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.
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 src="https://apis.google.com/js/platform.js" async defer></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 src="https://apis.google.com/js/platform.js" async defer></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 src="https://apis.google.com/js/platform.js" async defer></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

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 src="https://apis.google.com/js/platform.js" async defer></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

Deferred execution with onLoad and script tag parameters

Use the onload callback to execute widget code after all dependencies have loaded.

To specify script tag parameters, use the following syntax: 

<script >
  window.___gcfg = {
    lang: 'zh-CN',
    parsetags: 'onload'
  };
</script>
<script src="https://apis.google.com/js/platform.js" async defer></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 deferred execution onLoad 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.

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 src="https://apis.google.com/js/platform.js" async defer></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, or followed from the badge, information about the user's Google profile, the user's IP address, and other browser-related information.

Envoyer des commentaires concernant…

Cette page
Commentaires sur la documentation
Google+ Platform for Web
Google+ Platform for Web
Commentaires sur le produit