Google+ Follow Button

1. Adding the Google+ Follow button to your page
2. Example follow button sizes
3. Tag attributes for the follow button
4. Common configuration
   1. Deferred execution with onLoad and script tag parameters
   2. Script tag parameters
5. JavaScript API
6. FAQs

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>

Tips:

• 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 button markup.

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

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 follow button on the page are automatically rendered after the page loads. See the deferred execution onLoad 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.