Hacking Google+ Part 3: Interactive Posts

This posting was inspired by gpluscamp, a Google+-focussed barcamp happening today in Essen, Germany. Since I am not able to attend personally, I thought I might at least contribute this way… :) Have fun at #gpluscamp! After integrating your web-app with the  Google+ Sign-In Button  and fetching circles & profiles for the Friend Selector, it’s finally […]

This posting was inspired by gpluscamp, a Google+-focussed barcamp happening today in Essen, Germany. Since I am not able to attend personally, I thought I might at least contribute this way… :) Have fun at #gpluscamp!

After integrating your web-app with the  Google+ Sign-In Button  and fetching circles & profiles for the Friend Selector, it’s finally time to start publishing stuff on Google+! In part 3 of our ongoing series “Hacking Google+” we’re going to use a platform feature called Interactive Posts to let users of our web-app post content  to their Google+ profiles.

Demo-App: https://dev.diesocialisten.at/google+/
GitHub Repository: https://github.com/DieSocialisten/Hacking-Google-Plus
Resources: https://developers.google.com/+/

Sharing is Caring

Before letting our users share content on Google+, its important to be aware of the underlying principles. Other than Facebook’s Graph API, which allows publishing of content through their REST-API, sharing to Google+ always happens on the browser-side by triggering the sharing-dialogue offered by the JavaScript client. While this is a great measure to prevent abusive apps from spamming users profiles, its certainly a limitation developers have to keep in mind. Other thn Facebook wall-postings, which may contain a link, photo, video or may be text-only, shares on Google+ always refer to a webpage which is linked in the posting.

The basic share-button for interactive posts is included with this code-snippet (note: to make this work, the JavaScript client has to be loaded and initialized, see previous tutorials for details):

<button class="g-interactivepost"
               data-prefilltext="Developers, you should check this out!"
               Share this Tutorial!

As usual, the data-attributes are used to control the share-button’s behavior:

  • data-contenturl contains the URL of the web-page that should be shared & linked in the post.
  • data-clientid refers to the OAuth Client ID – copy your ID (*.apps.googleusercontent.com) from the Google API Console!
  • data-cookiepolicy specifies which source domains can access the Google+ cookie – single_host_origin is fine for our demo.
  • data-prefilltext allows to pre-populate the message a user is adding to the shared link.
  • data-calltoactionlabel is the label of an action button, which is rendered within the snippet.
  • data-calltoactionurl is the URL a user is directed to when clicking on the action-button rendered in the interactive post. This can be different from the data-contenturl.

This code-snippet renders a plain, vanilla sharing button which after clicking, brings up the sharing dialog:

Sharing Dialog


What’s really interesting here is the “Open”-button displayed within the preview-snippet of the shared link. It is a very cool way to make postings published by your users more engaging. Clicking the button on the published posting, users will get redirected to the URL given in the data-calltoactionurl parameter. Of course you’ll now be interested in what kind of labels you can use for these action-buttons…

Labelling Action Buttons

Available Call-to-action LabelsTo prevent abuse, the call-to-action label (= the text displayed on the button) can’t be defined entirely free by the developer, but has to be customized from a list of more than 100 pre-defined labels. These include lots of options, from generic ones like “Buy”, “Learn”, “Open” and “Watch” to more specific ones like “Add to Favorites”, “Accept Gift” or “Find a Table”. The complete list can of course be found in the docs.


Btw, it’s always a good idea to optimize the snippet Google+ will display when someone is sharing content from your website or -app. You can fine-tune the displayed thumbnail, title and description-text by putting schema.org or Open Graph Protocol-metatags on your pages – this means you’re basically good to go if you’ve already optimized your web-pages for Facebook, however if you want to serve different snippets to Google+, adding these schema.org-tags is the way to go:

<meta itemprop="name" content="Hacking Google+">
<meta itemprop="description" content="Follow us learning how to use the Google+-APIs - Step by Step!">
<meta property="og:image" content="http://dev.diesocialisten.at/google+/img/logo.png">

Google is offering a tool to customize these tags as well as the Structured Data Testing Tool – although the latter doesn’t seem to display thumbnails, which is why I recommend testing your metadata directly by doing test-postings on Google+. If you’re encountering caching-problems, it’s always easy to add some random GET-parameter like ?v=5 to break the cache. As for thumbnail size: at the moment snippets are displayed with 150x150px dimension, but its always a good idea to provide quite larger images (think of retina-displays and future layout-changes on Google+).


Google+ Rich Snippets

Rendering through JavaScript

Instead of including the HTML of the share-button into your web-page in a static way, you can also use the JavaScript client to render the button dynamically:

var options = {
                contenturl: 'https://dev.diesocialisten.at/google+/?v=5',
                clientid: '582679366292.apps.googleusercontent.com',
                cookiepolicy: 'single_host_origin',
                prefilltext: 'Developers, you should check this out!',
                recipients: 114276358234046019939,
                calltoactionlabel: 'LEARN_MORE',
                calltoactionurl: 'https://dev.diesocialisten.at/google+/?v=5'
gapi.interactivepost.render('share-button', options);

This code-snippet renders the button in the element with the ID share-button. Careful readers will notice the parameter we’ve introduced here: recipients (or data-recipients when rendered in HTML) allows to circle up to 10 persons by passing their Google+-IDs as a comma-separated list!

Inviting People

Combined with the Friend Selector from part of 2 of our series, this makes up for a cool way to “invite” friends to your app, similar to app-requests known on the Facebook platform:

Share & Circle Post

That’s it for this time! As always, you’ll find the complet source-code to this tutorial on github! In the next post I’m planning to cover another exciting publishing feature – App Activities! Until then – have fun and Hack Google+!

More articles from our series Hacking Google+:

About Author

Michael Kamleitner

Michael Kamleitner is CEO & Product Manager at Swat.io, a Social Media Management solution that’s helping companies to improve their customer support & content management on Facebook, Twitter, Instagram and others. Swat.io is currently used by companies such as 3Österreich, Hitradio Ö3, ÖBB, Focus Online and Burda Intermedia. Follow Michael on Twitter, Facebook or Google+!

Facebook Twitter Google+ Foursquare SlideShare