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

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

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:

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-calltoactionurlparameter. Of course you’ll now be interested in what kind of labels you can use for these action-buttons…

Labelling Action Buttons

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

Snippets

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:

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

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:

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:

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

Spread the ♥:

About Author

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 him on Twitter, Facebook or on Google+!

Hi, I tried to implement Google+ Interactive posts along with Google+ sign-in in my web app. The app generates dynamic interactive post button by calling gapi.interactivepost.render() but it calls the sign-in callback function every time a user clicks it. How can I resolve this?

I’m wondering if it is possible to get a permanent link to the interactive post. The callback function “onshare” does return a response object, but it’s only containing a very long “post_id” (eg. “z13tif0himythxkyl04cjlcbwl20wdqrgqk0k”) which does not match the actual post ID (eg. “https://plus.google.com/1061[…]2440989/posts/c3hMKNmdsNh”, see last part of the url). Any idea how to solve this?

Hi Philipp, I don’t really know to be honest, it’s been quite a while since I developed on G+. to be honest, I wasnt even aware that there’s a callback at all! Do you know if this is new / documented? I’ld love to try this out, maybe I can come up with an explanation f.d. ID thing…

Hey Philipp, we investigated this again last week – to our knowledge, there’s *no* callback when the post is published (the onshare-callback is triggered when the sharing popup is *opened*). So there’s really no straight way to check if a user has actually published, unfortunately.

on 2014/08/16

By Philipp

Thank you for the updated info! We are now trying to post content on a specific page (“fanpage”), which is connected to the profile. But it seems to be impossible with interactive post, huh?