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 |
|
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:
|
|
data-annotation |
|
bubble |
Sets the annotation to display next to the button.
|
data-height |
|
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 |
|
— | 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.
|
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( |
Renders the specified container as a follow button.
|
gapi.follow.go( |
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.
|
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.