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

Authentication required

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

Signing you in...

Google Developers needs your permission to do that.