+1 Button

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 +1 Button 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 type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<g:plusone></g:plusone>

The script must be loaded from the HTTPS protocol and can be included from any point on the page without restriction. For more information, see the FAQ. You can also load the script asynchronously for improved performance.

+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 will traverse the DOM and render +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.

Asynchronous JavaScript loading

Asynchronous inclusion allows your web page to continue loading while your browser fetches the +1 JavaScript file. By loading these elements in parallel, you ensure that loading +1 button JavaScript file does not increase your page load time.

To include the +1 button JavaScript 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>

If you would like to set script tag parameters, use the following syntax:

  window.___gcfg = {
    lang: 'zh-CN',
    parsetags: 'onload'
  };

A full example is included in the examples.

Configuration

Setting the +1 target URL

The URL that is +1'd is determined in the following order:

1. The button's href attribute: This attribute explicitly defines the +1 target URL.
2. 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.
3. The URL provided by document.location.href , which is not recommended.: If none of these items are present, Google uses the URL of the page as found in the 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 the href attribute 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 the +1 buttons 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 +1 buttons on the page are automatically rendered after the page loads. See the asynchronous load example. explicit +1 buttons are rendered only with explicit calls to `gapi.plusone.go` or `gapi.plusone.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.plusone.go and gapi.plusone.render examples.

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

This feature is currently in platform preview.

Attribute	Value	Default	Description
`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.plus.render`, you should should not escape the URL.
`size`	`small` `medium` `standard` `tall`	`standard`	Sets the +1 button size to render. See button sizes for more information.
`annotation`	`none` `bubble` `inline`	`bubble`	Sets the annotation to display next to the button. none Do not render additional annotations. bubble Display the number of users who have +1'd the page in a graphic next to the button. inline Display profile pictures of connected users who have +1'd the page and a count of users who have +1'd the page.
`width`	`int`	—	If `annotation` is set to "`inline`", this parameter sets the width in pixels to use for the button and its inline annotation. If the width is omitted, a button and its inline annotation use 450px. See Inline annotation widths for examples of how the annotation is displayed for various width settings.
`align`	`left` `right`	`left`	Sets the horizontal alignment of the button assets within its frame.
`expandTo`	`comma-separated list of` `top` `right` `bottom` `left`	`empty list`	Sets the preferred positions to display hover and confirmation bubbles, which are relative to the button. Set this parameter when your page contains certain elements, such as Flash objects, that might interfere with rendering the bubbles. For example, `top` will display the hover and confirmation bubbles above the button. If omitted, the rendering logic will guess the best position, usually defaulting to below the button by using the `bottom` value.
`callback`	`function(jsonParam)`	—	If specified, this function is called after the user clicks the +1 button. The callback function must be in the global namespace and accept a single parameter, which is a JSON object with the following structure: { "href": `target URL`, "state": "on"\|"off" } The `state` property is set to "`on`" for a +1, and "`off`" for the removal of a +1.
`onstartinteraction`	`function(jsonParam)`	—	If specified, this function is called either when a hover bubble displays, which is caused by the user hovering the mouse over the +1 button, or when a confirmation bubble displays, which is caused by the user +1'ing the page. You can use this callback function to modify your page, such as pausing a video when the bubble appears. This function must be in the global namespace and accept a single parameter, which is a JSON object with the following structure: { "id": `target URL`, "type": hover\|confirm }
`onendinteraction`	`function(jsonParam)`	—	If specified, this function is called when either a hover or confirmation bubble disappears. You can use this callback function to modify your page, such as resuming a video when the bubble closes. This function accepts a single parameter, which is identical in structure to the parameter passed to `onstartinteraction`.
`recommendations`	`true, false`	`true`	To disable showing recommendations within the +1 hover bubble, set `recommendations` to `false`.
`count`	`true, false`	`true`	Deprecated: To disable the count display, use `annotation="none"`.

Button sizes

Specifying a height that is smaller than the smallest supported height render as the smallest supported height. Other heights render the largest button that will fit and vertically center that icon in the requested space. If enough space is available horizontally, the small and standard buttons render the total number of +1's for that page.

Button type (annotation)	Width (px)	Max width (px)	Height (px)
Small (none)	24	—	15
Small (bubble)	—	70	15
Medium (none)	32	—	20
Medium (bubble)	—	90	20
Standard (none)	38	—	24
Standard (bubble)	—	106	24
Tall (none)	50	—	20
Tall (bubble)	50	—	60

Inline annotation widths

The display of inline annotations varies based on the value of the width parameter.

If the width parameter is unspecified, a +1 button and its inline annotation use a width of 450px.
The inline annotation requires a minimum of 120px to display. Lower values are automatically resized. The recommended minimum width is 250px.
For other widths, the display of inline profile pictures and text will vary based on the defined width, as shown in the examples below.

Width	+1 Button (www.google.com)
250px
300px
350px
unspecified (450px)

Populating the +Snippet

After clicking the +1 button, the user is given the option to share the page to Google+ via a displayed share bubble. This share bubble with the resulting Google+ activity post includes a preview, or +Snippet, that contains the page title, a brief description of the page, and a thumbnail image. These pieces of data are extracted from content found at the target URL and can be easily specified by the content publisher.

For detailed information and to customize your own snippet, see the snippet documentation.

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

Method	Description
`gapi.plusone.render( container, parameters )`	Renders the specified container as a +1 button widget. container The container to render as the +1 button. Specify either the ID of the container (string) or the DOM element itself. parameters An object containing +1 tag attributes as key=value pairs, for example, `{"size": "tall", "callback": myCallbackFunction}`.
`gapi.plusone.go( opt_container )`	Renders all +1 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 +1 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 +1 tags on the page are rendered.

gapi.plusone.render(

 container,
 parameters
)

Renders the specified container as a +1 button widget.

container: The container to render as the +1 button. Specify either the ID of the container (string) or the DOM element itself.
parameters: An object containing +1 tag attributes as key=value pairs, for example, {"size": "tall", "callback": myCallbackFunction}.

gapi.plusone.go(
 opt_container
)

Renders all +1 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 +1 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 +1 tags on the page are rendered.

Examples

Basic page

<html>
  <head>
    <title>+1 demo: Basic page</title>
    <link rel="canonical" href="http://www.example.com" />
    <script type="text/javascript" src="https://apis.google.com/js/plusone.js">
    </script>
  </head>
  <body>
    <g:plusone></g:plusone>
  </body>
</html>

Explicit load

<html>
  <head>
    <title>+1 demo: Explicit load</title>
    <link rel="canonical" href="http://www.example.com" />
    <script type="text/javascript" src="https://apis.google.com/js/plusone.js">
      {"parsetags": "explicit"}
    </script>
  </head>
  <body>
    <div id="content">
      <g:plusone></g:plusone>
    </div>
    <script type="text/javascript">
      gapi.plusone.go("content");
    </script>
  </body>
</html>

Explicit render

<html>
  <head>
    <title>+1 Demo: Explicit render</title>
    <link rel="canonical" href="http://www.example.com" />
    <script type="text/javascript" src="https://apis.google.com/js/plusone.js">
      {"parsetags": "explicit"}
    </script>
    <script type="text/javascript">
      function renderPlusone() {
        gapi.plusone.render("plusone-div");
      }
    </script>
  </head>
  <body>
    <a href="#" onClick="renderPlusone();">Render the +1 button</a>
    <div id="plusone-div"></div>
  </body>
</html>

Asynchronous load

<html>
  <head>
    <title>+1 Demo: Async load</title>
    <link rel="canonical" href="http://www.example.com" />
  </head>
  <body>
    <g:plusone></g:plusone>

    <script type="text/javascript">
      window.___gcfg = {
        lang: 'en-US'
      };

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

Can I place multiple buttons on a single page that all +1 different URLs?

Yes. Use the href attribute as specified in +1 tag parameters to indicate the URL to be +1'd.

Where should I put the +1 button on my pages?

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 the end of an article or story as well as the beginning.

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.

What happens if I +1 a private URL?

The button won't work. +1's only work for public URLs.

Do I need to use the href attribute?

The href attribute 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 href attribute isn't set, Google will next look for the rel="canonical" tag on the page. If that isn't found, Google will use the document.location.href. This final value can sometimes be misleading because of state variables often kept in the URL. So, using a rel="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 via https://. We recommend using https:// to include the script:

<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>

If your web page uses https://, some browsers and verification tools will show an error when any assets on the page are called via http://. If your site serves pages via https://, make sure that the +1 button code on those pages also uses https://. (In fact, it's fine to use https:// in the button code for all pages, even if they are only served via http://.)

Can I track +1 button interactions with Google Analytics?

Yes, the latest version of Google Analytics automatically tracks all +1 button interactions without any modifications to your existing tracking code. You can view social-related metrics with reports under Visitors > Social. Read more on the About Social Plug-in Analytics Help Center page.

Why is the hover bubble cut off by Adobe Flash content?

By default Flash content renders above all other HTML content. This includes hover bubbles and other content rendered by the +1 button. This might result in some +1 button content appearing to be cut off by Adobe Flash elements in your page.

The solution depends on your situation. If you can edit the HTML source code for the Flash object on your page, you can simply add a property to the object element. However, if the Flash element is being added to your page by a script (as is the typical case for ads), you will need a more sophisticated solution.

First, if you have access to the HTML source code for the Flash object on your page, you must set the wmode parameter to 'transparent'. You can do this by adding a parameter to the Flash object element:

<object ... >
<param name="wmode" value="transparent">
... </object>

For other cases, where the Flash element is added by a script, you might still be able to resolve this issue. You can programmatically add the above described parameter using JavaScript. FlashHeed is an example of this technique. This will work as long as the Flash is not embedded inside an iframe. If the Flash element is inside an iframe, you must reposition either the Flash content or the +1 button to prevent an overlap.

I put my +1 button code inside an iframe. Why is the share dialog being cut off in some web browsers?

When you click on the +1 button we display a share dialog. This dialog is much larger than the +1 button itself. For this reason, if you put +1 button code inside an iframe that is smaller than the share dialog, parts of the share dialog can be cut off and become inaccessible to your users.

To work around this it's best to directly include the +1 button source code into your pages. If you must use an iframe to wrap the +1 button, make sure that there is plenty of space for the share dialog.

I've set the 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>

The recommendations in the +1 hover are not appropriate for my website, how do I remove them?

Please let us know why the recommendations do not work on your website so that we can improve the product and improve the experience for your website. If you need to disable the recommendations, you can set the recommendations attribute to false on the +1 tag.

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

Language Codes

Language	Value
Afrikaans	af
Amharic	am
Arabic	ar
Basque	eu
Bengali	bn
Bulgarian	bg
Catalan	ca
Chinese (Hong Kong)	zh-HK
Chinese (Simplified)	zh-CN
Chinese (Traditional)	zh-TW
Croatian	hr
Czech	cs
Danish	da
Dutch	nl
English (UK)	en-GB
English (US)	en-US
Estonian	et
Filipino	fil
Finnish	fi
French	fr
French (Canadian)	fr-CA

Language	Value
Galician	gl
German	de
Greek	el
Gujarati	gu
Hebrew	iw
Hindi	hi
Hungarian	hu
Icelandic	is
Indonesian	id
Italian	it
Japanese	ja
Kannada	kn
Korean	ko
Latvian	lv
Lithuanian	lt
Malay	ms
Malayalam	ml
Marathi	mr
Norwegian	no
Persian	fa
Polish	pl

Language	Value
Portuguese (Brazil)	pt-BR
Portuguese (Portugal)	pt-PT
Romanian	ro
Russian	ru
Serbian	sr
Slovak	sk
Slovenian	sl
Spanish	es
Spanish (Latin America)	es-419
Swahili	sw
Swedish	sv
Tamil	ta
Telugu	te
Thai	th
Turkish	tr
Ukrainian	uk
Urdu	ur
Vietnamese	vi
Zulu	zu

Google+ Platform

Feedback on this document

Documentation

Getting Started

A Simple Button

+1 tag

Asynchronous JavaScript loading

Configuration

Setting the +1 target URL

Script tag parameters

+1 tag attributes

Button sizes

Inline annotation widths

Populating the +Snippet

JavaScript API

Examples

Basic page

Explicit load

Explicit render

Asynchronous load

Frequently asked questions

Language Codes

Authentication required

Signing you in...

Google+ Platform Feedback on this document

+1 Button

Documentation

Getting Started

A Simple Button

+1 tag

Asynchronous JavaScript loading

Configuration

Setting the +1 target URL

Script tag parameters

+1 tag attributes

Button sizes

Inline annotation widths

Populating the +Snippet

JavaScript API

Examples

Basic page

Explicit load

Explicit render

Asynchronous load

Frequently asked questions

Language Codes

Authentication required

Signing you in...

Google+ Platform

Feedback on this document