Google+ Platform

Sharing interactive posts

Interactive posts provide an easy and prominent way to allow users to share your site or app with their connections and invite them to take action, for example, RSVP for an event. Interactive posts can drive new users to your site, improve conversions, and increase engagement.

An interactive post in the Google+ stream is similar to a basic shared post but adds a call-to-action button and support for deep linking.

A screenshot
  showing the call-to-action button, content URL and pre-filled text.
A share dialog for an interactive post

Deep linking allows the Google+ app on mobile devices to direct clicks on an interactive post to your mobile app if the user has it installed. If the user does not have your app installed, they are prompted to install it.

This document covers adding the sharing button for interactive posts to your website. If you also have a mobile app, you should also implement interactive sharing with deep linking for Android and iOS.

Adding the share button to your page

To add the interactive sharing button to your site:

  1. Create a Google APIs Console project and generate a client ID on the API Access pane.

    If you plan to use deep linking into your mobile apps, create a client ID for each of the platforms that you plan to support within the same project. The Google+ app automatically routes a click on a deep link to the app for the correct platform using this information.

  2. Include the following JavaScript just 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/client:plusone.js';
       var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
     })();
    </script>
    

    The above example follows the best practice of using asynchronous loading of the JavaScript file for improved performance.

  3. Choose a label for your call-to-action button from the following list of values:

    ACCEPT
    ACCEPT_GIFT
    ADD
    ADD_FRIEND
    ADD_ME
    ADD_TO_CALENDAR
    ADD_TO_CART
    ADD_TO_FAVORITES
    ADD_TO_QUEUE
    ADD_TO_WISH_LIST
    ANSWER
    ANSWER_QUIZ
    APPLY
    ASK
    ATTACK
    BEAT
    BID
    BOOK
    BOOKMARK
    BROWSE
    BUY
    CAPTURE
    CHALLENGE
    CHANGE
    CHAT
    CHECKIN
    COLLECT
    COMMENT
    COMPARE
    COMPLAIN
    CONFIRM
    CONNECT
    CONTRIBUTE
    COOK
    CREATE
    DEFEND
    DINE
    DISCOVER
    DISCUSS
    DONATE
    DOWNLOAD
    EARN
    EAT
    EXPLAIN
    FIND
    FIND_A_TABLE
    FOLLOW
    GET
    GIFT
    GIVE
    GO
    HELP
    IDENTIFY
    INSTALL
    INSTALL_APP
    INTRODUCE
    INVITE
    JOIN
    JOIN_ME
    LEARN
    LEARN_MORE
    LISTEN
    MAKE
    MATCH
    MESSAGE
    OPEN
    OPEN_APP
    OWN
    PAY
    PIN
    PIN_IT
    PLAN
    PLAY
    PURCHASE
    RATE
    READ
    READ_MORE
    RECOMMEND
    RECORD
    REDEEM
    REGISTER
    REPLY
    RESERVE
    REVIEW
    RSVP
    SAVE
    SAVE_OFFER
    SEE_DEMO
    SELL
    SEND
    SIGN_IN
    SIGN_UP
    START
    STOP
    SUBSCRIBE
    TAKE_QUIZ
    TAKE_TEST
    TRY_IT
    UPVOTE
    USE
    VIEW
    VIEW_ITEM
    VIEW_MENU
    VIEW_PROFILE
    VISIT
    VOTE
    WANT
    WANT_TO_SEE
    WANT_TO_SEE_IT
    WATCH
    WATCH_TRAILER
    WISH
    WRITE
    

    View same list with translations and descriptions.

    The values from this list are used by Google+ to localize the button to the user's language.

    This value is used in your data-calltoactionlabel parameter.

  4. Add the markup for the button by adding a <div>, <span>, or <button> element to your page with a unique ID and a label for the button within the element.

    <!-- Place the tag where you want the button to render -->
    <button
      class="g-interactivepost"
      data-contenturl="https://plus.google.com/pages/"
      data-contentdeeplinkid="/pages"
      data-clientid="xxxxx.apps.googleusercontent.com"
      data-cookiepolicy="single_host_origin"
      data-prefilltext="Engage your users today, create a Google+ page for your business."
      data-calltoactionlabel="CREATE"
      data-calltoactionurl="http://plus.google.com/pages/create"
      data-calltoactiondeeplinkid="/pages/create">
      Tell your friends
    </button>
    

    This example will auto-render a button when your page loads. You can also use JavaScript to create an interactive post button.

  5. Optional: Design your button for your app.

  6. Optional: If you use deep links, modify your mobile app to handle incoming deep links:

Rendering the button with JavaScript

You can create an interactive post button on your page by using the JavaScript API. You use the gapi.interactivepost.render() method to transform an element to be an interactive post button. For example, the following code creates a interactive post from the element with the ID of sharePost:

<div id="sharePost"></div>
<script type="text/javascript">
  var options = {
    contenturl: 'https://plus.google.com/pages/',
    contentdeeplinkid: '/pages',
    clientid: 'xxxx.apps.googleusercontent.com',
    cookiepolicy: 'single_host_origin',
    prefilltext: 'Create your Google+ Page too!',
    calltoactionlabel: 'CREATE',
    calltoactionurl: 'http://plus.google.com/pages/create',
    calltoactiondeeplinkid: '/pages/create'
  };
  // Call the render method when appropriate within your app to display
  // the button.
  gapi.interactivepost.render('sharePost', options);
</script>

The button is now enabled as an interactive post. Next, you might choose to design the button to fit your app's design.

Interactive share button attributes

The following attributes are specified on the HTML tag that you define as your container for the interactive post button by specifying the class="g-interactivepost" attribute. If you are using the JavaScript API to render your button, remove the data- prefix from the parameter names when calling gapi.interactivepost.render().

Key Value Default Required Description
class string g-interactivepost Required Required for rendering the button in HTML. Omit if using gapi.interactivepost.render().
data-clientid string Required Your OAuth 2.0 client ID that you obtained from the Google APIs Console.
data-contenturl url Required

The content URL points to the page that you want to render in the preview snippet in the share post. This URL can differ from the call-to-action button's URL, for example, you might link to an overview with the content URL and to a form with the call-to-action button.

If you specify the contentdeeplinkid attribute and the link is clicked on a mobile device, the Google+ app launches your app and passes the contentdeeplinkid for your app to use to determine the location within your app to take the user.

The protocol (http/https), host name, and port (if specified) for the content URL and the call-to-action URL must match. Because these must match, you should avoid using URL shorteners and redirects for either URL.

data-contentdeeplinkid string

Specify a URI path as a deep link ID for the content link in the shared post. The value must be 512 characters or fewer in length.

To take advantage of deep linking, your mobile app should be configured to handle incoming deep links. For more information, see handling incoming deep links for Android or iOS.

data-cookiepolicy
  • uri
  • single_host_origin
  • none
Required

Directs the interactive share button to store user and session information in a session cookie and HTML5 session storage on the user's client for the purpose of minimizing HTTP traffic and distinguishing between multiple Google accounts a user might be signed into. We call these two means of storage the client storage.

When a page containing a interactive share button is loaded, the user's sign-in state can quickly be accessed from this client storage rather than from Google servers, reducing the latency for button loading. In addition, the cookie can allow a user who is signed in to multiple Google accounts (say, work and personal) to select which account to use with your website. The cookie and session storage are deleted once the user ends their browsing session.

The value of the data-cookiepolicy attribute determines the scope of URIs that can access the cookie. Choose this value based on the website's domain name to set the cookie's scope. Then the cookie can be accessed by all interactive share buttons within that scope. You should use a policy that is as broad as necessary for your site because that reduces the number of cookies that your site writes to the user's client. There should ideally be only one cookie for each distinct domain suffix you are allowed to write cookies for (for example, one cookie each for example.com and example.co.uk).

Available values - Three values of data-cookiepolicy are allowed: a uri, single_host_origin, and none. The most versatile setting you can pass is the uri value that most broadly matches the structure of your website.

For help with choosing a value, see Determining a value for cookie policy.

  • uri

    The uri includes the scheme, site-domain and possibly port to be set for your site. The value you provide determines the scope of the cookie. The more general the uri, the broader the scope of the cookie. The first five use cases are examples. Specify uri in one of the following three URI formats:

    • http://site_domain - An http scheme in uri provides the broadest scope—it sets a cookie whose scope includes both http and https domains and all of the site's subdomains. A more specific URI, such as http://mail.example.com, would set a more narrowly scoped cookie that further restricts its scope to only that domain and its subdomains.
    • https://site_domain - An https scheme in uri is similar to but narrower than http—use it for SSL-only sites. This ensures that the cookies will have the "secure" attribute set and hence will not be sent over an un-encrypted connection.
    • scheme://site_domain:port - Using a value that includes a port number. This value restricts the cookie's scope to only that one URI.

    Note: Sites with distinct domain suffixes (such as http://example.com and http://example.co.uk) must have different site_domain values, and therefore must be specified with different data-cookiepolicy markup.

  • single_host_origin

    Use this value if your website has only a single host name and no subdomains (for example, host http://example.com but not http://www.example.com). This string is shorthand for the scheme and host name (and port number if it's not the default for the scheme) of the current page, which then is equivalent to the uri value above.

  • none

    The none value does not set cookies or session storage for the interactive share button and uses a less efficient fallback mechanism for determining user and session information. This value also can prevent a user who is signed in to multiple Google accounts (say, work and personal) from being able to select which account to use with your website.

Note: You can identify client storage entries written by the interactive share button by checking their prefixes: GCSC prefix is used for session cookies and HTML5 session storage, and G_AUTHUSER_ prefix is used for session cookies only.

data-calltoactionlabel
ACCEPT
ACCEPT_GIFT
ADD
ADD_FRIEND
ADD_ME
ADD_TO_CALENDAR
ADD_TO_CART
ADD_TO_FAVORITES
ADD_TO_QUEUE
ADD_TO_WISH_LIST
ANSWER
ANSWER_QUIZ
APPLY
ASK
ATTACK
BEAT
BID
BOOK
BOOKMARK
BROWSE
BUY
CAPTURE
CHALLENGE
CHANGE
CHAT
CHECKIN
COLLECT
COMMENT
COMPARE
COMPLAIN
CONFIRM
CONNECT
CONTRIBUTE
COOK
CREATE
DEFEND
DINE
DISCOVER
DISCUSS
DONATE
DOWNLOAD
EARN
EAT
EXPLAIN
FIND
FIND_A_TABLE
FOLLOW
GET
GIFT
GIVE
GO
HELP
IDENTIFY
INSTALL
INSTALL_APP
INTRODUCE
INVITE
JOIN
JOIN_ME
LEARN
LEARN_MORE
LISTEN
MAKE
MATCH
MESSAGE
OPEN
OPEN_APP
OWN
PAY
PIN
PIN_IT
PLAN
PLAY
PURCHASE
RATE
READ
READ_MORE
RECOMMEND
RECORD
REDEEM
REGISTER
REPLY
RESERVE
REVIEW
RSVP
SAVE
SAVE_OFFER
SEE_DEMO
SELL
SEND
SIGN_IN
SIGN_UP
START
STOP
SUBSCRIBE
TAKE_QUIZ
TAKE_TEST
TRY_IT
UPVOTE
USE
VIEW
VIEW_ITEM
VIEW_MENU
VIEW_PROFILE
VISIT
VOTE
WANT
WANT_TO_SEE
WANT_TO_SEE_IT
WATCH
WATCH_TRAILER
WISH
WRITE
Open

The label that renders in the stream post that prompts the reader to act. This field should be a verb that accurately describe the action that will be taken.

The calltoactionurl must also be specified to render the call-to-action button.

The call-to-action label is automatically translated in the Google+ stream to the viewer's language.

data-calltoactionurl url Required

The URL that the user will be taken to when the call-to-action button is clicked from a web browser. If the button is clicked on a mobile device, the Google+ app launches your app and passes the calltoactiondeeplinkid for your app to use to determine the location within your app to take the user.

The protocol (http/https), host name, and port (if specified) for the call-to-action URL and the data-contenturl must match. Because these must match, you should avoid using URL shorteners and redirects for either URL.

data-calltoactiondeeplinkid string

Specify a URI path as a deep link ID for the call to action button. The value must be 512 characters or fewer in length.

To take advantage of deep linking, your mobile app should be configured to handle incoming deep links. For more information, see handling incoming deep links for Android or iOS.

data-prefilltext string

Text that is prefilled in the comment area of the share box on behalf of the user. The user can edit or remove the prefilled text.

The maximum length of the prefilled text is 1042 characters.

data-recipients string

A comma-separated list of user IDs and email addresses that you want to prefill the share settings with. You can get these IDs by calling the people.list method on behalf of an authenticated user. A maximum of ten recipients are allowed.

Inherited attributes from sign in
data-accesstype
  • online
  • offline
online If using the server-side sign-in flow and you want to get a refresh token that you can use to make offline requests, specify this attribute and set the value to offline.
data-approvalprompt
  • auto
  • force
auto Allows control over when the user is re-prompted for consent. When set to auto, the user only sees the OAuth consent dialog if they have not authorized your application. When set to force, the user is shown the OAuth consent dialog each time that they click the sign-in button.
data-callback function(authResult)

A function, in the global namespace, which is called after a successful sign-in occurs. This function must hide the sign-in button.

This function is passed a single parameter: a JSON object with the following structure:

{
  "id_token": A JSON web token (JWT) that contains identity information about the user that is digitally signed by Google,
  "access_token": the access token,
  "expires_in": the validity of the tokens, in seconds,
  "code" : a one-time code that can be sent to your server and exchanged for an access token,

  "error": The OAuth2 error type if problems occurred,
  "error_description": an error message if problems occurred
}
data-requestvisibleactions A space delimited list of moment type URIs.

If your app will write moments, list the full URI of the types of moments that you intend to write. For example: http://schemas.google.com/AddActivity.

data-scope A space delimited list of scope URIs https://www.googleapis.com/auth/plus.login

The OAuth 2.0 scopes for the APIs that you would like to use as a space-delimited list. You can list Google+ scopes and other Google OAuth 2.0 scopes that your application might require. Find more scopes in the OAuth 2.0 Playground.

The button attribute data-cookiepolicy is required for the sign-in and interactive share buttons. You can specify a value for this attribute based on the use case that best fits your needs. These examples are in the order of broadest to narrowest scope:

  1. A website with multiple subdomains, and possibly both https and http (such as http://example.com, http://www.example.com, and https://secure.example.com) should use:
    data-cookiepolicy="http://example.com".
  2. A website with multiple subdomains and SSL only (https://example.com, https://www.example.com, and https://static.example.com) should use:
    data-cookiepolicy="https://example.com".
  3. A site that is part of a larger website and wants to restrict the scope to only its subdomain (https://mydept.example.com but not https://otherdept.example.com) should use:
    data-cookiepolicy="https://mydept.example.com".
  4. A website with only one host name that runs on a non-default port (http://dev.example.com:8080) should use:
    data-cookiepolicy="http://dev.example.com:8080".
  5. A website that has only a single host name (such as http://example.com but not also http://www.example.com) should use:
    data-cookiepolicy="single_host_origin"
  6. A website where cookies and HTML5 storage are not allowed should use the following, but the site will suffer from degraded performance and a user who is signed in to multiple Google accounts might not be able to select which account to use with your website:
    data-cookiepolicy="none"

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 interactive post on the page are automatically rendered after the page loads. See the asynchronous load example.
explicit
interactive post are rendered only with explicit calls to gapi.interactivepost.go or gapi.interactivepost.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.interactivepost.go and gapi.interactivepost.render examples.

JavaScript API

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

Method Description
gapi.interactivepost.render(
 container,
 parameters
)
Renders the specified container as a interactive post.
container
The container to render as the interactive 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, {"clientid": "xxxx.apps.google.usercontent.com", "calltoactionlabel": 'INSTALL_APP'}.
gapi.interactivepost.go(
 opt_container
)
Renders all interactive 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 interactive 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 interactive post tags on the page are rendered.

Button design

You have broad control over the appearance of the interactive posts button within your app to fit with your design. The style of this button is up to you; however, you must still follow the button policies and branding guidelines.

The following is a basic example of creating a CSS style to apply to your button:

<style type="text/css">
  #myBtn.demo {
    padding: 5px;
    background: #fff;
    cursor: pointer;
    line-height: 20px;
    border: 1px solid #e6e6e6;
    border-radius: 4px;
  }
  #myBtn.demo .icon {
    width: 20px;
    height: 20px;
    display: inline-block;
    background: url('../../images/branding/btn_icons_sprite.png') transparent 0 -40px no-repeat;
  }
  #myBtn.demo:hover {
    background-color: #cc3732;
    color: #fff;
    border: #dd4b39;
  }
  #myBtn.demo:hover .icon {
    background: url('../../images/branding/btn_icons_sprite.png') transparent 0 0px no-repeat;
  }
</style>

You must use a DIV, SPAN, or BUTTON element for your interactive post container element; however, you can use your own custom markup within the container element to achieve a design that meets your needs. For example, if you wanted to use an icon:

<span id="myBtn" class="demo g-interactivepost"
    data-clientid="841077041629.apps.googleusercontent.com"
    data-contenturl="https://developers.google.com/+/web/share/interactive"
    data-calltoactionlabel="INVITE"
    data-calltoactionurl="https://developers.google.com/+/web/share/interactive?invite=true"
    data-cookiepolicy="single_host_origin"
    data-prefilltext="Come learn about interactive posts with me!">
  <span class="icon">&nbsp;</span>
  <span class="label">Invite your friends!</span>
</span>

The markup and CSS above would create the interactive post button shown below:

  Invite your friends!

You can download images, fonts, and PhotoShop source files to help with your button design from the branding guidelines.

Troubleshooting

Shared an interactive post, but it is not appearing in my stream
The URLs that you use for data-contenturl and data-calltoactionurl parameters must match: protocols (http or https), domains, and port number (if applicable). You should not use URL shorteners or redirects for either of these URLs.

FAQs

What data is sent to Google when you click the interactive post button?
When a user signs into your app with Google, Google will receive information including information about the user's Google profile, the user's IP address, and other browser or client related information. Google may also receive details of the user's activities in your app if the app uses the moments API methods.

Authentication required

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

Signing you in...

Google Developers needs your permission to do that.