Google+ Platform

Share

Documentation

When a user finds something interesting on the web, sometimes a lightweight endorsement feels right. Other times, a user just wants to share it with friends, right away. This document will help webmasters and programmers add a Google+ share button to their pages.

Your use of the share code is subject to the Google Button Publisher Policies.

Getting Started

A Simple Button

The simplest way to include a share button on your page is just by including the necessary JavaScript and adding a share tag. This basic implementation will include the standard 20px share button with a variable width.

<script src="https://apis.google.com/js/plusone.js"></script>
<g:plus action="share"></g:plus>

The script must be sourced at https and can be included at any point on the page without restriction (see the FAQ for more information). You can also load the script asynchronously for better performance.

Share Tag

Here is the standard share tag syntax:

<g:plus action="share" ...></g:plus>

If you want, you can use this HTML5-valid share tag (the class attribute must be set to g-plus, and any button attributes must be prefixed with data-).

<div class="g-plus" data-action="share" ... ></div>

By default, the included script will traverse the DOM and render share 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 share button.

Asynchronous JavaScript Loading

Asynchronous inclusion allows your web page to continue loading while your browser fetches the share JavaScript. By loading these elements in parallel, you're ensuring the HTTP request that gets the share button JavaScript doesn't increase your page load time.

To include the share 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: 'en-US',
  parsetags: 'onload'
};

A full example is included in the Examples section.

Configuration

Setting the URL to share

The URL that is shared is determined by one of three things, in this order:

1. The share tag's href attribute
This attribute explicitly defines the URL to share.
2. The page's <link rel="canonical" ... /> tag
If the share tag's href attribute is not provided, Google will use the page's canonical URL. For more information on defining the canonical URL for a page, see the Canonicalization help article.
3. The URL provided by document.location.href (not recommended)
If neither of the previous pieces of data are present, Google will use 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 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.
onload
All share button on the page are automatically rendered after the page loads. See the asynchronous load example.
explicit
share button are rendered only with explicit calls to gapi.plus.go or gapi.plus.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.plus.go and gapi.plus.render examples.

Share Tag Attributes

These parameters control settings for each button. You can set these parameters as attribute/value pairs on share tags, or as key/value pairs in a call to gapi.plus.render .

Attribute Value Default Description
data-href URL to share current page URL The URL to share. If you set this attribute by using gapi.plus.render, you should not escape the URL.
data-annotation
  • inline
  • bubble
  • vertical-bubble
  • none
bubble The annotation to display next to the button.
inline
Display profile pictures of connected users who have shared the page and a count of users who have shared the page.
bubble
Display the number of users who have shared the page in a graphic next to the button.
vertical-bubble
Display the number of users who have shared the page in a graphic above the button.
none
Do not render any additional annotations.
data-width int The maximum width to allocate to the entire share plugin. See Button Sizes for more information.
data-height int 20 The height to assign the button. This may be 15, 20, 24 or 60. See Button Sizes for more information.
data-align
  • left
  • right
left Sets the alignment of the button assets within its frame.
data-expandTo comma-separated list of
  • top
  • right
  • bottom
  • left
empty list

The preferred positions in which to display hover and confirmation bubbles, relative to the button. Set this parameter when your page contains certain elements, such as Flash objects, that might interfere with rendering the bubbles.

If omitted, the rendering logic will guess the best position, usually defaulting to below the button (bottom).

data-onstartinteraction function(jsonParam)

If specified, this function is called when an interaction bubble appears (such as when the user hovers over the button or starts the sharing flow).

This function must be in the global namespace and may accept a single parameter, which will be a JSON object with the following structure:

{
  "id": target URL,
  "type": hover|confirm
}
data-onendinteraction function(jsonParam)

If specified, this function is called when the interaction 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.

Button Sizes

The following table lists some example button sizes and the attribute values.

Button Example Width (px) Height (px) Annotation
15
20
24
bubble
vertical-bubble
200 20

Populating the +Snippet

The share bubble (along 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 share URL and may be easily specified by the owner of that content.

For detailed information please see the snippet documentation.

JavaScript API

The share button JavaScript defines two button-rendering functions under the gapi.plus namespace. You must call one of these functions if you disable automatic rendering by setting parsetags to "explicit".

Method Description
gapi.plus.render(
 container,
 parameters
)
Renders the specified container as a share button.
container
The container to render as the share 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.plus.go(
 opt_container
)
Renders all share 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 share 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 share button tags on the page are rendered.

Examples

Basic Page

<html>
  <head>
    <title>Share 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:plus action="share"></g:plus>
  </body>
</html>

Asynchronous Load

<html>
  <head>
    <title>Share Demo: Async load</title>
    <link rel="canonical" href="http://www.example.com" />
  </head>
  <body>
    <g:plus action="share"></g:plus>

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

Mobile

Share on Android

Content can be shared from your app to Google+ by using the standard ACTION_SEND intent, which can launch the Google+ share dialog. For more information, see Share on Google+ for Android

Share on iOS

The Google+ iOS SDK provides a share dialog for users to share rich content from your app. For more information, see Share on Google+ for iOS.

Frequently Asked Questions

Can I place multiple buttons on a single page that all share different URLs?
Yes. Use the href attribute as specified in share tag parameters to indicate the URL to be shared.
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 may improve the loading speed of the page.
Does the <script> tag need to be included before the share 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 href attribute?
The href attribute is not required. See share URL for more information
Why is the hover bubble cut off by Adobe Flash content?

By default Flash content renders in front of all other HTML content. This includes hover bubbles and other content rendered by the share button. This may result in some share 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 may 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 share button to prevent an overlap.

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 share?
When a user clicks a Share button, Google receives information including the URL of the content being shared, any user comments, information about the user's Google profile, the user's IP address, and other browser-related information.

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

Authentication required

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

Signing you in...

Google Developers needs your permission to do that.