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

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>

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 src="https://apis.google.com/js/platform.js" async defer>
    </script>
    <script>
      {"parsetags": "explicit"}
      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 src="https://apis.google.com/js/platform.js" async defer>
    </script>
    <script>
      {"parsetags": "explicit"}
    </script>
  </head>
  <body>
    <div id="content">
      <div class="g-post"></div>
    </div>
    <script>
      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 deferred execution onLoad 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

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.

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