Google+ Platform

Google+ Badge

Badge types

Because Google+ pages, profiles, and communities are different, we offer slightly different versions of the badges:

Profiles
Allow people to easily find you on Google+ and add you to a circle directly from your website.
Pages
Includes the profile badge features and adds 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.
Communities
Help people find your community and engage with other users on a topic they find interesting.
Profile badge Google+ page badge Community badge

If you require a smaller widget, you might also consider using the Google+ Follow button:

Google+ badge for people

Person 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:person href="https://plus.google.com/{profileId}" data-rel="author"></g:person>

You can also use an HTML5-valid badge tag by setting the class attribute to g-person, and prefixing any badge attributes with data-.

<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<div class="g-person" data-href="https://plus.google.com/{profileId}"></div>

The Google+ badge can show a link to your Google+ profile and an Add to circles button.

Example badge sizes

Example Width (px) Layout
180 portrait
300 portrait
273 landscape
450 landscape

Tag attributes for the person 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.person.render.

Attribute Value Default Description
class g-person

Specify class="g-person" to render the badge in HTML5-valid syntax. Otherwise, use the <g:person /> markup.

data-href URL to the Google+ page The URL of the Google+ profile.
data-layout
  • landscape
  • portrait
portrait

Sets the orientation of the badge

data-showcoverphoto
  • true
  • false
true Displays the cover photo in the badge if set to true and the photo exists.
data-showtagline
  • true
  • false
true Displays the user's tag line if set to true.
data-theme
  • light
  • dark
light The color theme of the badge. Use dark when placing the badge on a page with a dark background.
data-width int 300

The pixel width of the badge to render.

The following ranges are valid:

Portrait layout
180-450 pixels
Landscape layout
273-450 pixels

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:page href="https://plus.google.com/{pageId}"></g:page>

You can also use an HTML5-valid badge tag by setting the class attribute to g-page, and prefixing any badge attributes with data-.

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

Example badge sizes

Example Width (px) Layout
180 portrait
450 portrait
273 landscape
450 landscape

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.page.render.

Attribute Value Default Description
class g-page

Specify class="g-page" to render the badge in HTML5-valid syntax. Otherwise, use the <g:page /> markup.

data-href URL to the Google+ page The URL of the Google+ page that is associated with this brand.
data-layout
  • landscape
  • portrait
portrait

Sets the orientation of the badge

data-theme
  • light
  • dark
light The color theme of the badge. Use dark when placing the badge on a page with a dark background.
data-showcoverphoto
  • true
  • false
true Displays the cover photo in the badge if set to true and the photo exists.
data-showtagline
  • true
  • false
true Displays the page's tag line if set to true.
data-width int 300

The pixel width of the badge to render.

The following ranges are valid:

Portrait layout
180-450 pixels
Landscape layout
273-450 pixels

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.

Google+ community badge

Community badge tag

The Google+ community badge allows visitors to your site to find your community and preview the community before choosing to join. The minimum code required to render the badge on your website is one JavaScript include and the community badge tag.

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

You can also use an HTML5-valid tag by setting the class attribute to g-community, and prefixing the attributes with data-.

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

Example community badge sizes

Example Width (px) Layout
180 Default
273 landscape
300 portrait
300 landscape
450 portrait
450 landscape

Tag attributes for the community badge

These parameters control settings for each badge. You can set these parameters as attribute=value pairs on the Google+ community badge tag, or as key:value pairs in a call to gapi.community.render. If you are using HTML-5 syntax, specify the data- prefix before the attribute name, for example: data-theme="dark"

Attribute Value Default Description
class g-community

Specify g-community to render the community badge in HTML5-valid syntax. Otherwise, use the <g:community /> markup.

data-href URL to the Google+ page or user profile The URL of the Google+ community that the user might choose to visit and join.
data-layout
  • landscape
  • portrait
portrait

Sets the orientation of the badge

data-showphoto
  • true
  • false
true Displays the community profile photo if set to true and the photo exists.
data-showowners
  • true
  • false
false Displays a list of community owners if set to true.
data-showtagline
  • true
  • false
true Displays the community's tag line if set to true.
data-theme
  • light
  • dark
light The color theme of the badge. Use dark when placing the badge on a page with a dark background.
data-width int 300

The pixel width of the badge to render.

The following ranges are valid:

Portrait layout
180-450 pixels
Landscape layout
273-450 pixels

Common configuration

Asynchronous JavaScript loading

For improved page load time, you should load the JavaScript asynchronously. This approach allows the browser to load your page and the JavaScript file in parallel. For the best performance, place the following JavaScript before your </body> tag:

<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?onload=onLoadCallback';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>

You can use the onload callback when using the asynchronous loading to start the execution of your code after all of the dependencies have loaded.

When you load the JavaScript asynchronously, you must specify script tag parameters differently. Use the following syntax instead:

<script type="text/javascript">
window.___gcfg = {
  lang: 'zh-CN',
  parsetags: 'onload'
};
(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>

Script tag parameters

These parameters are defined within the <script /> element. The parameters control the language and button loading mechanism that are used across the entire web page.

Key Value Default Description
lang language code en-US Sets the language to use for all of the Google+ plugins on the page. For available language code values, see the list of supported language codes and a lang example.
parsetags explicit, onload onload Sets the loading mechanism to use.
onload
All badge on the page are automatically rendered after the page loads. See the asynchronous load example.
explicit
badge are rendered only with explicit calls to gapi.*.go or gapi.*.render.

When you use the explicit load in conjunction with go and render calls that point to specific containers in your page, you prevent the script from traversing the entire DOM, which can improve button rendering time. See the gapi.*.go and gapi.*.render examples.

JavaScript API

The badge JavaScript defines two button-rendering functions for each badge type. You must call one of these functions if you disable automatic rendering by setting parsetags to "explicit".

Method Description
gapi.community.render(
 container,
 parameters
)
Renders the specified container as a badge.
container
The container to render as the badge. Specify either the ID of the container (string) or the DOM element itself.
parameters
An object containing tag attributes as key=value pairs, for example, {"width": "300", "theme": "light"}.
gapi.community.go(
 opt_container
)
Renders all 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.
opt_container
The container containing the badge tags to render. Specify either the ID of the container (string) or the DOM element itself. If the opt_container parameter is omitted, all badge tags on the page are rendered.
gapi.page.render(
 container,
 parameters
)
Renders the specified container as a badge.
container
The container to render as the badge. Specify either the ID of the container (string) or the DOM element itself.
parameters
An object containing tag attributes as key=value pairs, for example, {"width": "300", "theme": "light"}.
gapi.page.go(
 opt_container
)
Renders all 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.
opt_container
The container containing the badge tags to render. Specify either the ID of the container (string) or the DOM element itself. If the opt_container parameter is omitted, all badge tags on the page are rendered.
gapi.person.render(
 container,
 parameters
)
Renders the specified container as a badge.
container
The container to render as the badge. Specify either the ID of the container (string) or the DOM element itself.
parameters
An object containing tag attributes as key=value pairs, for example, {"width": "300", "theme": "light"}.
gapi.person.go(
 opt_container
)
Renders all 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.
opt_container
The container containing the badge tags to render. Specify either the ID of the container (string) or the DOM element itself. If the opt_container parameter is omitted, all badge tags on the page are rendered.

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

The static badge does not allow a user to follow you directly from your site. You might consider using the Google+ Follow button if you need a smaller widget to fit in your design.

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 might +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
What data is sent to Google when you click the badge?
When a user clicks a badge, Google receives information including the URL of the page/profile/community previewed, followed or +1'd from the badge, information about the user's Google profile, the user's IP address, and other browser-related information.

Authentication required

You need to be signed in with Google+ to do that.

Signing you in...

Google Developers needs your permission to do that.