Google+ Platform

Google+ Embedded Posts

You can embed public Google+ posts in your site or articles with just a few lines of HTML code. Your signed-in Google+ readers can +1 or comment on your post directly from your site or follow the author.

Use of embedded posts is subject to the Embedded Content Policy.

See more examples of different types of posts as an embed.

Adding the embedded posts

Adding the embedded posts to your page is quick and easy. The easiest method is to locate the post that you want to embed on plus.google.com and click the A
downward pointing arrow that indicates the menu menu icon and choose Embed post. A dialog displays with code that you can copy and paste into the desired location within your article or site. For example:

The embed
  post dialog with the code to copy and paste

URL format

The link to the Google+ post must be in its canonical format:

https://plus.google.com/110174288943220639247/posts/cfjDgZ7zK8o

The following URL formats are not supported:

  • Custom URLs

    https://plus.google.com/+LarryPage/posts/MtVcQaAi684
    
  • URLs with /u in them

    https://plus.google.com/u/0/106189723444098348646/posts/MtVcQaAi684
    
  • Mobile web Google+ URLS:

    http://www.google.com/url?sa=D&q=https%3A%2F%2Fplus.google.com%2Fapp%2Fbasic%2Fstream%2Fz12ptj0rxnfczztqq04cjldqhk2ffnwpzys0k%3Fcbp%3D1atsk37dadx58%26sview%3D27%26spath%3D%2Fapp%2Fbasic%2F%252BAdeOshineye%2Fposts
    

Supported posts

In addition to posts that contain text and links, the following additional types of posts are supported as embedded posts:

  • Posts with images - The post will render with the image. Clicking the image directs the visitor to the image view on Google+.
  • Posts with videos - The post will render with the video. Clicking the video will play the video within the embedded post.
  • Posts with links to a community - Your visitors can click through to view the community as they would in the stream.

The following post types are not supported:

  • Posts from within a community, including publicly reshared posts from a community.
  • Posts that are restricted to a Google Apps domain
  • Private posts
  • Events posts
  • Hangout on Air posts

Advanced configuration

Loading the JavaScript API asynchronously

For improved page load time, you should load the JavaScript asynchronously. This approach allows the browser to load your page and the JavaScript file in parallel. For the best performance, place the following JavaScript before your </body> tag:

<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?onload=onLoadCallback';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>

You can use the onload callback when using the asynchronous loading to start the execution of your code after all of the dependencies have loaded.

When you load the JavaScript asynchronously, you must specify script tag parameters differently. Use the following syntax instead:

<script type="text/javascript">
window.___gcfg = {
  lang: 'zh-CN',
  parsetags: 'onload'
};
(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>

Explicit rendering

You can render embedded posts dynamically by using the gapi.post.render() method. This method is useful when you dynamically load content or when you need to explicitly control the execution of app. For example:

<html>
  <head>
    <title>Demo: Explicit render of a embedded post</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 renderWidget() {
        gapi.post.render("widget-div", {'href' : 'https://plus.google.com/109813896768294978296/posts/hdbPtrsqMXQ'} );
      }
    </script>
  </head>
  <body>
    <a href="#" onClick="renderWidget();">Render the embedded post</a>
    <div id="widget-div"></div>
  </body>
</html>

Explicit loading

Explicit loading is useful when your site loads content dynamically and you need to instructh the JavaScript API to find and render elements within a given element. For example:

<html>
  <head>
    <title>Demo: Explicit load of a embedded post</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">
      <div class="g-post"></div>
    </div>
    <script type="text/javascript">
      gapi.post.go("content");
    </script>
  </body>
</html>

Tag attributes

These parameters control the settings for each embedded post. You an set these parameters as attribute=value pairs on the HTML element or as key:value pairs in a call to gapi.post.render.

Attribute Value Default Description
class g-post Required for specifying your embedded post with HTML. This parameter is not necessary when dynamically rendering an element with the gapi.post.render function.
data-href URL to the post Sets the URL to the specific post that you want to embed in your page. The URL must point to a publically shared post. If you set this attribute by using gapi.post.render, you should not escape the URL.

Script tag parameters

These parameters are defined within the <script /> element. The parameters control the button loading mechanism that are used across the entire web page.

Key Value Default Description
parsetags explicit, onload onload Sets the loading mechanism to use.
onload
All embedded post on the page are automatically rendered after the page loads. See the asynchronous load example.
explicit
embedded post are rendered only with explicit calls to gapi.post.go or gapi.post.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.post.go and gapi.post.render examples.

JavaScript API

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

Method Description
gapi.post.render(
 container,
 parameters
)
Renders the specified container as a embedded post.
container
The container to render as the embedded post. 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, {'href' : 'https://plus.google.com/109813896768294978296/posts/hdbPtrsqMXQ'}.
gapi.post.go(
 opt_container
)
Renders all embedded post 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 embedded post tags to render. Specify either the ID of the container (string) or the DOM element itself. If the opt_container parameter is omitted, all embedded post tags on the page are rendered.

Examples

A post with an image: A post with an video:

Note that the author disabled comments on this post.

A post with a link to a community: An interactive post:
A post to a song on Google Play: A post to a Google Play movie:

FAQ

I use Wordpress.com, can I use embedded posts?

Yes. By default Wordpress.com does not allow you to embed JavaScript into your posts; however, Wordpress.com will recognize a Google+ URL and automatically render a embedded post. A shortcode format is also available. For detailed information, see Wordpress.com support: Google+ Embeds.

Can I test this feature locally?

You will not be able to open an HTML file from your file sytem (file://) and preview the embedded posts. The embedded posts only load correctly when viewed from an http:// or https:// location. You can test from a local webserver. If you have python installed, you can quickly run the following command to serve the current directory's contents from http://localhost:8000

python -m SimpleHTTPServer
Can I customize the appearance of the embedded post? Such as width or number of comments to display.

Currently, you cannot customize the appearance of the embedded post.

Can I disable commenting on the embedded post?

Yes, if you disable commenting on the post from within https://plus.google.com by clicking the post's A
downward pointing arrow that indicates the menu in the upper right corner of the post and choosing Disable comments.

You cannot disable comments for only the embedded post on your page.

My embedded post is not displaying
  • Are you using link to a supported type of post?
  • Is your post URL in the correct format?

    Correct:
    https://plus.google.com/nnnnnnnnnnnnnnnnn/posts/XXXXXXXXXXXXX
    Incorrect:
    https://plus.google.com/u/0/nnnnnnnnnnnnnnnnn/posts/XXXXXXXXXXXXX
  • Check your JavaScript console for any errors and resolve.

Authentication required

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

Signing you in...

Google Developers needs your permission to do that.