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 thedata-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
Michael, großartige Leistung. Gefällt mir super!
Gibt es bei dem Interactive-Post-Generator keine Möglichkeit, die CTA einzudeutschen? Über eine Antwort würde ich mich freuen :)
Beste Grüße
Peter
Vielen Dank, Peter :)
Interessante Frage! Die Docs sagen zu den vordefinierten Call-to-Actions-Strings: “The values from this list are used by Google+ to localize the button to the user’s language.”
Habe das grade ausprobiert, dürfte nicht wirklich funktionieren – auf einem deutschsprachigen Test-Account werden die Buttons dennoch in englischer Sprache angezeigt :( Fürchte da kann man vorerst nicht viel machen…
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.
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?
It is possible but only in a very limited way: the user has to follow the page!
Here’s a screenshot: https://www.evernote.com/shard/s3/sh/bab4ca96-11b5-4c71-91b2-8ff805590911/2c386afddff448f813c9a9b2a52f349c
You can try it out here: https://dev.diesocialisten.at/google+/
Whenever i tried it returns me with this error in the console.
401 (Unauthorized)
Refused to display document because display forbidden by X-Frame-Options.
[…] Hacking Google+ Part 3: Interactive Posts […]
[…] Hacking Google+ Part 3: Interactive Posts […]