Badge types
Because Google+ pages and profiles are different, we offer two slightly different versions of the badge: one for each case. Badges that link to Google+ profiles allow people to easily find you on Google+ and add you to a circle directly from your website. Badges that link to Google+ pages include these features and add some additional functionality. They help Google consolidate +1's from your website and your Google+ page, and make your website eligible for Google+ Direct Connect.
Profile badge | Google+ page badge |
---|---|
Google+ badge for profiles
Profile badge tag
The Google+ badge allows visitors to engage with you directly from the badge itself. The minimum code required to render a Google+ profile badge on your website is one JavaScript include and a badge tag:
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<g:plus href="https://plus.google.com/{profileId}" rel="author"></g:plus>
You can also use an HTML5-valid badge tag by setting the class attribute to
g-plus
, and prefixing any badge attributes with data-
.
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<div class="g-plus" data-href="https://plus.google.com/{profileId}" rel="author"></div>
The Google+ badge can show a link to your Google+ profile and an Add to circles button.
Example badge sizes
Example | Width (px) | Height (px) |
---|---|---|
|
300 | 69 |
|
170 | 69 |
|
100 | 131 |
|
169 | 131 |
Tag attributes for the profile badge
These parameters control settings for each badge. You can set these
parameters as attribute=value
pairs on the Google+
badge tag, or as key:value
pairs in a call to
gapi.plus.render
.
Attribute | Value | Default | Description |
---|---|---|---|
href |
URL to the Google+ page | The URL of the Google+ profile. | |
width |
int | 300 |
The pixel width of the badge to render. For a 131px height badge, the width can be from 100 to
169 . For a 69px height badge, the minimum width is 170 and the badge can be
as wide as needed.
|
height |
69 or 131 | 69 | The pixel height of the badge to render. There are two valid heights. The badge will not render if an invalid height is specified. |
theme |
|
light |
The color theme of the badge. Use dark when
placing the badge on a page with a dark background.
|
Google+ badge for pages
Page Badge Tag
The Google+ badge allows visitors to engage with your brand directly from the badge itself. The minimum code required to render a Google+ badge on your website is one JavaScript include and a badge tag.
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<g:plus href="https://plus.google.com/{pageId}"></g:plus>
You can also use an HTML5-valid badge tag by setting the class attribute to
g-plus
, and prefixing any badge attributes with
data-
.
<div class="g-plus" data-href="https://plus.google.com/{pageId}"></div>
Example badge sizes
Example | Width (px) | Height (px) |
---|---|---|
|
350 | 131 |
|
300 | 69 |
|
100 | 131 |
Tag attributes for the pages badge
These parameters control settings for each badge. You can set these
parameters as attribute=value
pairs on the Google+
badge tag, or as key:value
pairs in a call to
gapi.plus.render
.
Attribute | Value | Default | Description |
---|---|---|---|
href |
URL to the Google+ page | The URL of the Google+ page that is associated with this brand. | |
width |
int | 300 |
The pixel width of the badge to render. A minimum width of 100 is
required for a 131px height badge, a minimum width of 170 is
required for a 69px height badge.
|
height |
69 or 131 | 131 | The pixel height of the badge to render. There are two valid heights. The badge will not render if an invalid height is specified. |
theme |
|
light |
The color theme of the badge. Use dark when
placing the badge on a page with a dark background.
|
size |
|
badge |
Deprecated. This controls the height of the badge. It has been replaced by the height attribute. |
Direct Connect
Google+ Direct Connect helps visitors find your Google+ page and add it
to their circles from directly within Google Search. After you
create your Google+ page, connect it to your site by adding
the following code inside the <head>
element of your
site:
<link href="https://plus.google.com/{plusPageUrl}" rel="publisher" />
You can also connect your site by simply linking to your Google+ page
anywhere on the page using a standard <a>
element and
include the rel="publisher"
attribute on
the link. For example, see the static Google+
badge.
Common configuration
Asynchronous JavaScript loading
Asynchronous inclusion allows your web page to continue loading while your browser fetches the Google+ badge JavaScript. By loading these elements in parallel, you ensure loading the badge JavaScript file does not increase your page load time.
To include the Google+ badge JavaScript asynchronously, use the following code:
<script type="text/javascript"> (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })(); </script>
When you load the JavaScript asynchronously, you must specify script tag parameters differently. Use the following syntax instead:
window.___gcfg = { lang: 'zh-CN', parsetags: 'onload' };
Script tag parameters
These parameters are defined within the <script />
element. The parameters the language and badge loading mechanism across the entire web page.
Key | Value | Default | Description |
---|---|---|---|
lang |
language code | en-US |
The language to use. See the list of supported languages. |
parsetags |
explicit, onload |
onload |
The loading mechanism to use.
|
JavaScript API
The badge JavaScript defines two button-rendering functions under the
gapi.plus
namespace. You must call one of these functions if you
disable automatic rendering by setting parsetags
to
explicit
or if you include the badge into your site
dynamically with AJAX after the the page has fully loaded.
Method | Description |
---|---|
gapi.plus.render( |
Renders the specified container as a Google+ badge.
|
gapi.plus.go( |
Renders all Google+ badge tags and classes in the specified container. This function
should be used only if parsetags is set to explicit ,
which you might do for performance reasons.
|
Static badge
The static Google+ badge provides an alternate badge style that links to your Google+ profile or page. This badge is useful if you are unable to use JavaScript on your website. To include a static badge on your site, use the configuration tool to generate the appropriate code for your desired static badge:
Size | Example | Width | Height |
---|---|---|---|
Large |
Google Developers
on Google+
|
>=67 (varies based on page name) | 98 |
Medium |
Google Developers
on
|
>=69 (varies based on page name) | 32 |
Small |
Google Developers
on
|
>=53 (varies based on page name) | 16 |
Large (no text) | 64 | 64 | |
Medium (no text) | 32 | 32 | |
Small (no text) | 16 | 16 |
Use of the code above is subject to the Google Button Publisher Policies.
Frequently asked questions
The following FAQs deal with technical considerations and implementation details. For additional resources, see Webmaster Tools Help and the Google+ Developers Forum.
- Should I include both a +1 button and a Google+ badge on my page?
-
If you have a +1 button connected to the homepage of your company or brand's site, you can replace it with a Google+ badge that is connected to your Google+ page. The Google+ badge includes a +1 button, and additionally allows your visitors to add you directly to their circles on Google+. Of course, you can always include both, to increase the chance that visitors may +1 your site.
If you have +1 buttons connected to individual articles or content, we recommend leaving those in place, and adding a separate Google+ badge that is connected to your Google+ page.
-
Is there any latency impact from the position of the
<script>
tag in the page? -
No, there is no significant latency impact from the placement of the
<script>
tag. However, by placing the tag at the bottom of the document, just before the</body>
tag, you might improve the loading speed of the page. -
Does the
<script>
tag need to be included before the +1 tag? -
No, the
<script>
tag can be included anywhere in the page. -
Does the
<script>
tag need to be included before another<script>
tag calls one of the methods in the JavaScript API section? -
Yes, if you use any of the JavaScript API methods, they need to be placed in the page after the
<script>
inclusion. - Some of my users get a security warning when they view pages with the Google+ badge. How do I get rid of this?
-
The Google+ badge button code requires a script from Google's servers. You might get this error by including the script via http:// on a page that's loaded via https://. We recommend using https:// to include the script:
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
If your web page uses
https://
, some browsers and verification tools will show an error when any assets on the page are called viahttp://
. If your site serves pages viahttps://
, make sure that the +1 button code on those pages also useshttps://
. In fact, it's fine to usehttps://
in the button code for all pages, even if they are only served viahttp://
. - What web browsers are supported?
-
All Google+ plugins support the same web browsers as the Google+ web
interface:
- Windows: Chrome, Firefox 3.6 and up, Internet Explorer 8 and up
- Linux : Chrome, Firefox 3.6 and up
- Mac: Chrome, Firefox 3.6 and up, Safari 4 and up