Add this button to content across your site to make sharing on Google+ easy. This button is perfect for content that users may want to share but not +1 (e.g. news or controversial content).When a user finds something interesting on the web, sometimes a lightweight endorsement feels right. Other times a user justs want 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.
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:
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 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 theCanonicalization 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
hrefattribute or adding a<link rel="canonical" ...>tag to your page.
Button Sizes
The following table lists some example button sizes and the attribute values.
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.
Share Link
The share link is intended for native client applications, Flash applications, highly privacy-sensitive sites, and others who may not be able to use the +1 or share button. Adding the following markup to your site will include a simple icon which will pop open a share dialog for your visitors.
<a href="https://plus.google.com/share?url={URL}" onclick="javascript:window.open(this.href,
'', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;"><img
src="https://www.gstatic.com/images/icons/gplus-64.png" alt="Share on Google+"/></a>
Note: Replace {URL} with the URL of the page you want to share. You must properly escape any user-generated content that may occur within {URL}
Share Link Sizes
The share icon is available in a number of different sizes.
| Size | Example | Image URL | W | H |
|---|---|---|---|---|
| Large |  | https://www.gstatic.com/images/icons/gplus-64.png | 64 | 64 |
| Medium |  | https://www.gstatic.com/images/icons/gplus-32.png | 32 | 32 |
| Small |  | https://www.gstatic.com/images/icons/gplus-16.png | 16 | 16 |
Share Endpoint
The share link invokes the Google+ share endpoint, which you can also link to directly:
https://plus.google.com/share
The Google+ share endpoint accepts the following query parameters:
| Parameter | Description |
|---|---|
url | The URL of the page to share. This value should be url encoded. |
hl | The language code for the locale to use on the Google+ sharing page. |
Share Bookmarklet
Drag and drop this link to your Bookmarks Bar to be able to easily Share on Google+.
Mobile
Share on Android
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 AndroidShare 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
- Yes. Use the
hrefattribute 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
hrefattribute? - The
hrefattribute 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
wmodeparameter 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.