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.

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-contenturl="https://dev.diesocialisten.at/google+/?v=5"
               data-clientid="582679366292.apps.googleusercontent.com"
               data-cookiepolicy="single_host_origin"
               data-prefilltext="Developers, you should check this out!"
               data-calltoactionlabel="OPEN"
               data-calltoactionurl="https://dev.diesocialisten.at/google+">
               Share this Tutorial!
</button>

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:

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

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:

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

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:

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

• Hacking Google+ Part 1: The Sign-In Button
• Hacking Google+ Part 2: Building a Friend Selector
• Hacking Google+ Part 3: Interactive Posts