Google+ Platform

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

Sets the annotation to display next to the button.

Do not render additional annotations.
Display the number of users who are following this page or person in a graphic next to the button.

Display the number of users who are following this page or person in a graphic above to the button.

  • 15
  • 20
  • 24

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.

  • author
  • publisher
Describes the relationship of the entity defined at the href location to the page the badge is embedded.

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 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.
All follow button on the page are automatically rendered after the page loads. See the deferred execution onLoad example.
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
Renders the specified container as a follow button.
The container to render as the follow button. Specify either the ID of the container (string) or the DOM element itself.
An object containing tag attributes as key=value pairs, for example, {"width": "300", "theme": "light"}.
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.
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.


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.