Using Google+ interactive post for web pages

Tuesday March 05, 2013 ()

A Google+ interactive post is similar to a basic share post but adds a call-to-action button to the post. In a product post for example, the call-to-action button can be "Add to cart", engaging your users direct from Google+ stream. The call-to-action button appears just below the main post area. Aside from the call-to-action, the interactive post will ask for user permission the first time the share button is used through the standard Google+ OAuth consent dialog or always depending on the value of data-approvalprompt attribute.

In this blog we will demonstrate how to create an interactive share button with a simple "READ_MORE" as our call-to-action. See live demo near the bottom of this article.

To add interactive post to your web page you need to create a Google APIs Console project and generate a client ID on the API Access pane. In the JavaScript origins field make sure to enter your domain name. In our case and for testing purposes we also added http://localhost, just so we can test the button before deployment. If you chose to add http://localhost, don't forget to remove them when no longer needed.

Add the Google+ Javascript code to your page, where possible in the head section of the page. This is the asynchronous version of Google+ code. It is recommended to use this code for performance reasons.  Although the synchronous version of the script also works.

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

Then add the HTML markup where you want the button to appear in the page. Use either a div, span or button.

<span id="ig_share" class="igc_share g-interactivepost"
      data-clientid="your_client_id_from_app_console"
      data-contenturl="#{evArticleBean.urlx}"
      data-calltoactionlabel="READ_MORE"
      data-prefilltext="This is the initial comment of the post"
      data-calltoactionurl="#{evArticleBean.urlx}"
      data-cookiepolicy="single_host_origin">
    <span class="ig_icon"> </span>
    <span class="ig_label">Share this on Google+</span>
</span>

Class g-interactivepost is required whether you are using span, div, or button. igc_share is our custom style for our button, see further down below for details of this class.

data-clientid is what you created earlier from the API console. This is a required attribute.

data-contenturl is the content of the post. This is what appears on the Google+ stream. This is similar to the standard shared post. This is a required attribute.

data-cookiepolicy. See here for determining the value of data-cookiepolicy. This is also a required attribute.

data-calltoactionlabel is the call to action button that appears below the text preview of the posted item (data-contenturl). In our example, we used READ_MORE. The default is OPEN, it also goes to default if what you specified cannot be identified. According to Google+, this label is translated to user's language. See the interactive post page for complete of list of possible values.

data-calltoactionurl - is the URL of the data-calltoactionlabel. The domain name specified here should match with that of the data-contenturl. In our example, since we are only using READ_MORE, this points to the same URL of the data-contenturl.

data-prefilltext - This is the initial comment to the post.

data-approvalprompt - This can either be auto or force. When force is used, the OAuth consent dialog is always shown when user click on the button.

See the Google+ interactive post page for complete list of button attributes.

Below is the CSS style we used for our button.

<style>
    #ig_share.igc_share {
        padding: 5px;
        background: transparent;
        cursor: pointer;
        line-height: 20px;
        /* border: 1px solid #e6e6e6; */
        border-radius: 4px;
    }
    #ig_share.igc_share .ig_icon {
        width: 20px;
        height: 20px;
        display: inline-block;
        background: url('/kauswagan/images/btn_white.png') 
            transparent 0 0px no-repeat;
    }
    #ig_share.igc_share:hover {
        background-color: #cc3732;
        color: #fff;
        border: #dd4b39;
    }
    #ig_share.igc_share:hover .ig_icon {
        background: url('/kauswagan/images/btn_red.png') 
            transparent 0 0px no-repeat;
    }
    .ig_label {
        font-size:11px;   /* Label of the button */
    }
</style>

In designing your button, it is recommended to follow Google+ branding guidelines.

Below is a live demo. It will share interactive post, this page, to your G+ stream.

  Share this on Google+

That's it Good Luck.


2,638

Comments (Using Google+ interactive post for web pages)