Google+ Badge

Documentation

Use of Google+ badges is subject to the Google+ Platform Buttons Policy.

1. Badge types
2. Google+ badge for people
   1. Person badge tag
   2. Example badge sizes
   3. Tag attributes for the person badge
3. Google+ badge for pages
   1. Page badge tag
   2. Example badge sizes
   3. Tag attributes for the pages badge
4. Google+ badge for communities
   1. Community badge tag
   2. Example badge sizes
   3. Tag attributes for the community badge
5. Common configuration options
   1. Deferred execution with onLoad and script tag parameters
   2. Script tag parameters
6. JavaScript API
7. Static badge
8. Frequently asked questions

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>

Tip: If you already use a +1 button on your site, you don't need to add the platform.js script again. Just add the g:person tag.

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>

Tip: If you already have a +1 button on your site, you do not need to add the platform.js script again. Just add the g:page tag.

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>

Tip: If you already have a +1 button or other Google+ plugin on your site, you do not need to add the platform.js script again. Just add the g:community tag.

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.