Documentation
You can add and customize the +1 button to meet the needs of your website, such as modifying the button size and load technique. By adding the +1 button to your website, you allow your users to recommend your content to their circles and drive traffic to your site. The +1 button can also improve the time spent on your site by providing recommendations for further reading.
Use of the +1 button is subject to the Google+ Platform Buttons policy.
Getting started
A simple button
The easiest method for including a +1 button on your page is to include the necessary JavaScript resource and to add a +1 button tag:
<script src="https://apis.google.com/js/platform.js" async defer></script> <g:plusone></g:plusone>
The script must be loaded using the HTTPS protocol and can be included from any point on the page without restriction. For more information, see the FAQ.
+1 tag
To render a simple +1 tag:
<g:plusone size="tall"></g:plusone>
You can also use a HTML5-valid +1 tag by setting the class attribute to
g-plusone, and prefixing any button attributes with
data-.
<div class="g-plusone" data-size="tall" ... ></div>
By default, the included script traverses the DOM and renders +1 tags as buttons. You can improve rendering time on large pages by using the JavaScript API to traverse only a single element within the page, or to render a specific element as a +1 button.
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>
Configuration
Setting the +1 target URL
The URL that is +1'd is determined from the following priority:
-
The button's href attribute
This attribute explicitly defines the +1 target URL. -
The page's
<link rel="canonical" ... />tag
If the +1 button's href attribute is not provided, Google uses the page's canonical URL. For more information on defining the canonical URL for a page, see this help article. -
The URL provided by
document.location.href
This choice is not recommended. -
The URL of the page as found in the page's DOM
Because this URL might contain session IDs, anchors, or other parameters that are not actually part of the canonical URL, we highly recommend either setting thehrefattribute for the +1 button or adding a<link rel="canonical" ...>tag to your page.
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.
|
+1 tag attributes
These parameters control settings for each button. You can set these
parameters as attribute=value pairs on +1 button
tags, or as JavaScript key:value pairs in a call to gapi.plusone.render.
| Attribute | Value | Default | Description |
|---|---|---|---|
data-href |
URL to +1 | current page URL |
Sets the URL to +1. Set this attribute when you have a +1 button next
to an item description for another page and want the button to +1 the
referenced page and not the current page. If you set this attribute by
using gapi.plusone.render,
you should not escape the URL.
|
data-size |
|
standard |
Sets the +1 button size to render. See button sizes for more information. |
Button sizes
The following tables shows examples of data-size values.
JavaScript API
The +1 button JavaScript defines two button-rendering functions under
the gapi.plusone namespace. You must call one of these
functions if you disable automatic rendering by setting
parsetags to
"explicit".
| Method | Description |
|---|---|
gapi.plusone.render( |
Renders the specified container as a +1 button.
|
gapi.plusone.go( |
Renders all +1 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.
|
Examples
Basic page
<html>
<head>
<title>+1 demo: Basic page</title>
<link rel="canonical" href="http://www.example.com" />
<script src="https://apis.google.com/js/platform.js" async defer>
</script>
</head>
<body>
<g:plusone></g:plusone>
</body>
</html>
Explicit load
<html>
<head>
<title>Demo: Explicit load of a +1 button</title>
<link rel="canonical" href="http://www.example.com" />
<script src="https://apis.google.com/js/platform.js" async defer>
</script>
<script>
{"parsetags": "explicit"}
</script>
</head>
<body>
<div id="content">
<div class="g-plusone"></div>
</div>
<script>
gapi.plusone.go("content");
</script>
</body>
</html>
Explicit render
<html>
<head>
<title>Demo: Explicit render of a +1 button</title>
<link rel="canonical" href="http://www.example.com" />
<script src="https://apis.google.com/js/platform.js" async defer>
</script>
<script>
{"parsetags": "explicit"}
function renderWidget() {
gapi.plusone.render("widget-div" );
}
</script>
</head>
<body>
<a href="#" onClick="renderWidget();">Render the +1 button</a>
<div id="widget-div"></div>
</body>
</html>
Deferred execution with language code
<html>
<head>
<title>+1 Demo: Deferred execution with language code</title>
<link rel="canonical" href="http://www.example.com" />
</head>
<body>
<g:plusone></g:plusone>
<script>
window.___gcfg = {
lang: 'en-US'
};
</script>
<script src="https://apis.google.com/js/platform.js" async defer></script>
</body>
</html>
Frequently asked questions
The following FAQs deal with technical considerations and implementation details. For additional resources, see the general FAQs and the platform discussion forum.
-
Yes. Use the
hrefattribute as specified in +1 tag parameters to indicate the URL to be +1'd. - You know your page and your users best, so we recommend putting the button wherever you think it will be the most effective. Above the fold, near the title of the page, and close to sharing links is often a good location. It can also be effective to place the +1 button at both the end and beginning of an article or story.
-
Is there any latency impact from the position of the
<script>tag in the page? -
No, there is no significant latency impact from the placement of the
<script>tag. However, by placing the tag at the bottom of the document, just before the</body>close tag, you might improve the loading speed of the page. -
Does the
<script>tag need to be included before the +1 tag? -
No, the
<script>tag can be included anywhere in the page. -
Does the
<script>tag need to be included before another<script>tag calls one of the methods in the JavaScript API section? -
Yes, if you use any of the JavaScript API methods,
they need to be placed in the page after the
<script>inclusion. -
Do I need to use the
hrefattribute? -
The
hrefattribute is not required. See +1 target URL for more information -
Do all my pages need to have a
rel="canonical"tag? -
No, though we recommend it. If the
hrefattribute isn't set, Google will next look for therel="canonical"tag on the page. If that isn't found, Google will use thedocument.location.href. This final value can sometimes be misleading because of state variables often kept in the URL. So, using arel="canonical"tag can help you specify the exact URL you want +1'd. - Some of my users get a security warning when they view pages with the +1 button. How do I get rid of this?
-
The +1 button code requires a script from Google's servers. You might get
this error by including the script via
http://on a page that's loaded viahttps://. We recommend usinghttps://to include the script:<script src="https://apis.google.com/js/platform.js" async defer></script>
If your web page useshttps://, some browsers and verification tools will show an error when any assets on the page are called viahttp://. If your site serves pages viahttps://, make sure that the +1 button code on those pages also useshttps://. In fact, it's fine to usehttps://in the button code for all pages, even if they are only served viahttp://. -
I've set the alignment of my button to
right, but the button isn't right-aligned on the page. -
If
align="right"is set, Google will right-align the button assets within its frame. However, for the button to be right-aligned on your page, you must set the alignment of the button container. For example:<div style="float: right"> <g:plusone align="right"></g:plusone> </div>
- What web browsers are supported?
-
All Google+ plugins support the same
web browsers as the
Google+ web interface:
- Windows: Chrome, Firefox 3.6 and up, Internet Explorer 8 and up
- Linux : Chrome, Firefox 3.6 and up
- Mac: Chrome, Firefox 3.6 and up, Safari 4 and up
- What data is sent to Google when you click +1?
- When a user clicks +1, Google receives information about the user's Google profile, the URL that they have +1'd, their IP address, and other browser-related information. For more information about how Google uses +1 data, see How the +1 button respects your privacy.
Language codes
|
|
|