Documentation

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.

Google+ badge for profiles

<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>

<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>

Google+ badge for pages

<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<g:plus href="https://plus.google.com/{pageId}"></g:plus>

<div class="g-plus" data-href="https://plus.google.com/{pageId}"></div>

<link href="https://plus.google.com/{plusPageUrl}" rel="publisher" />

Common configuration

<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>

window.___gcfg = {
  lang: 'zh-CN',
  parsetags: 'onload'
};

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.

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 via http://. If your site serves pages via https://, make sure that the +1 button code on those pages also uses https://. In fact, it's fine to use https:// in the button code for all pages, even if they are only served via http://.

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