Google+ Follow Button

The Google+ Follow button is a simple widget that works well in site designs that that use other social follow buttons or when space is constrained.

Like the badges, your users can immediately add your page or profile to their circles without leaving your site.

Use of Google+ buttons are subject to the Google+ Platform Buttons Policy.

Adding the Google+ Follow button to your page

The Google+ follow button adds a simple, smaller form factor button to your page, which quickly allows visitors to add you or your page to their circles. The minimum code required to render a Google+ follow button on your website is one JavaScript include and the follow button tag, for example:

<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>

<-- Place this tag where you want the button to render. -->
<div class="g-follow" data-href="https://plus.google.com/{pageId}" data-rel="{relationshipType}"></div>

You can also use the custom <g:follow > tag; however, the HTML5 markup is the recommended approach.

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

Example follow button sizes

For the follow button, you have three choices for the height of your button: 15, 20, and 24 pixels. The width of the button is automatically calculated to fit the label in the user's language.

Example	Height (px)	Annotation
	15	Default (`bubble`)
	15	`none`
	20	`none`
	20	`vertical-bubble`
	24	Default (`bubble`)

Tag attributes for the follow button

You can set these parameters as attribute="value" pairs on the button tag, or as key:value pairs in a call to gapi.follow.render.

If you use HTML5 markup, prefix the attribute names below with data-, for example: data-rel="author".

Attribute	Value	Default	Description
`class`	`g-follow`		Specify `g-follow` to render the follow button in HTML5-valid syntax. Otherwise, use the `<g:follow />` markup.
`data-href`	URL to the Google+ page or user profile		The URL of the Google+ page or user profile that the user might choose to follow. The following URL formats are supported: `https://plus.google.com/110967630299632321627` `https://plus.google.com/+LarryPage`
`data-annotation`	`none` `bubble` `vertical-bubble`	`bubble`	Sets the annotation to display next to the button. none Do not render additional annotations. bubble Display the number of users who are following this page or person in a graphic next to the button. vertical-bubble Display the number of users who are following this page or person in a graphic above to the button.
`data-height`	`15` `20` `24`	20	The pixel height of the button to render. This height controls only the height of the button. If you use the vertical annotation, the actual height of the full widget will be larger.
`data-rel`	`author` `publisher`	—	Describes the relationship of the entity defined at the href location to the page the badge is embedded.

Common configuration

Asynchronous JavaScript loading

Asynchronous inclusion allows your web page to continue loading while your browser fetches the Google+ JavaScript. By loading these elements in parallel, you ensure loading the badge JavaScript file does not increase your page load time.

To include the script 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 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 follow button on the page are automatically rendered after the page loads. See the asynchronous load example. explicit follow button are rendered only with explicit calls to `gapi.follow.go` or `gapi.follow.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.follow.go and gapi.follow.render examples.

JavaScript API

The follow button JavaScript defines two button-rendering functions under the gapi.follow namespace. You must call one of these functions if you disable automatic rendering by setting parsetags to "explicit".

Method Description

Method	Description
`gapi.follow.render( container, parameters )`	Renders the specified container as a follow button. container The container to render as the follow button. 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.follow.go( opt_container )`	Renders all follow button 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 follow button tags to render. Specify either the ID of the container (string) or the DOM element itself. If the `opt_container` parameter is omitted, all follow button tags on the page are rendered.

gapi.follow.render(
 container,
 parameters
)

Renders the specified container as a follow button.

container: The container to render as the follow button. 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.follow.go(
 opt_container
)

Renders all follow button 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 follow button tags to render. Specify either the ID of the container (string) or the DOM element itself. If the opt_container parameter is omitted, all follow button tags on the page are rendered.

FAQs

What data is sent to Google when you click the follow button?: When a user clicks a Follow button, Google receives information including the URL of the page/profile/community followed, information about the user's Google profile, the user's IP address, and other browser-related information.

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 3.0 License, and code samples are licensed under the Apache 2.0 License. For details, see our Site Policies.

Google+ Platform