Why Aren’t You Using Google+ Interactive Posts?

  • follow us in feedly
Published December 18, 2013 by Brad Knutson
Google+ Interactive Posts

You have probably seen Google+ Interactive Posts around, whether you realize it or not. There are plenty of large sites that use Google+ Interactive Posts so their readers can share their posts and products with call-to-actions embedded into the share.

 Share With Your Followers!

 

You’ll know you are encountering a Google+ Interactive Post if you are prompted to authorize through Google+.

Google+ Interactive Posts - App Requesting Approval

Mashable is one site that uses Google+ Interactive blog posts. Click the Google+ share button and you’ll see something like this.

Google+ Interactive Posts - Posting Example

Notice the call-to-action at the bottom of the post? This tiny addition to a Google+ post has proven to increase click-through-rates (CTR). Here is an example of an actual interactive post I recently made.

So How Do We Set Up Google+ Interactive Posts For Our Site?

Unfortunately, this is where it gets a little technical. If you are comfortable working with HTML and Javascript, you will be ok. If not, hopefully this guide will help you.

1. Set Up The API

This is probably why a lot of sites and web masters are not using Google+ Interactive Posts. APIs scare people off pretty quick. Don’t be scared!

All we really need to do here is head over to Google’s Developer Console, then click on APIs & auth on the right sidebar, then click on Credentials. Next, click the red button labeled Create New Client ID.

Google Plus Interactive Posts - API Setup

A popup window will display on the screen. Assuming this is a website you are dealing with (apps get much more complicated pretty quick), then leave the Application type at it’s default setting of web application.

In the Authorized Javascript origins, enter the domain that you want to display the Interactive Post share button on. If you want to display the share button on multiple websites, make sure you enter each domain on it’s own line. Note: pay attention to https:// vs http://!

In the “Authorized Redirect URI” field, enter a page on your site that you want to redirect people to if you use OAuth on your site. This field doesn’t come into play for Interactive Posts, so entering your root domain is ok.

Google+ Interactive Posts - Setting Up Client ID

You’ll now be shown your Client ID. Make note of this because you’ll need it in a moment!

Google+ Interactive Posts - Getting a Client ID

2. Fill Out The Consent Screen

This step is important. If you skip this step, you will be able to generate a share button and everything will appear correct, until you click the share button – at which point you’ll receive a series of error messages.

Click on the Consent screen option right below the “Credentials” tab you were just on. Fill out the form with all the proper information. This will be the information that displays on the authorize screen when a user clicks your share button.

Google Plus Interactive Posts - Consent Screen

Upload your logo, and optionally tie your Google+ Page to your product.

3. Include the Following Javascript On Your Page

The below Javascript should be included immediately above the closing body tag.

4. Choose Your Call-To-Action Label

Google requires that you choose a call-to-action label from an existing list that they put together. It’s pretty all inclusive and I have had a hard time finding a situation that Google hasn’t accounted for.

If you’d like more information on these call-to-action labels and their meanings, read more here.

Make note of your label choice, you’ll need it in the next step.

5. Build the Interactive Share Button

This is where things get a little tricky. Here is the default button code with a few placeholders:

The first step is to replace the “xxxxx” part of the data-clientid value with your Client ID that we retrieved a few steps ago. Next, replace the data-calltoactionlabel value (leave the quotation marks) with your new call-to-action label.

Now, it’s completely up to you to change the rest of the field values. Here is what each field means:

  • class=”g-interactivepost” – This is the class given by the default Google+ Interactive Post share button, and it doesn’t really mean anything. Change this to whatever CSS class you want to use to style the button.
  • data-contenturl – This is the URL that you want to display content for. The content includes the thumbnail image, and the short description that displays on the Google+ post. This does not have to be the same as the URL you want to use for your call-to-action button, so take advantage of being able to use different URLs here.
  • data-contentdeeplinkid=”/pages” – If you are setting up the Interactive Post to link to a specific section of a mobile app, this is where you would do that. For web applications (websites) this field doesn’t matter.
  • data-clientid=”xxxxx.apps.googleusercontent.com” – Replace the “xxxxx” with your Client ID that you retrieved a few steps ago.
  • data-cookiepolicy=”single_host_origin” – Leave this at the default.
  • data-prefilltext – This is the text that you want to be auto-filled in the Google+ share. If you prefer that your readers write their own text, then you can leave this blank. Users will always have the option to override what you put here, so it’s a good idea to put something down.
  • data-calltoactionlabel – This is where you enter the call-to-action label that you chose a few steps ago.
  • data-calltoactionurl – This is the URL that you want your call-to-action button, and the title of the post to link to. This is the page that people clicking on your post will end up at.
  • data-calltoactiondeeplinkid=”/pages/create” – Much like the data-contentdeeplinkid field, this is for mobile apps, and doesn’t matter for websites.

After you’ve updated your button code, place it on your site wherever you want the button to display.

Remember to update your button text too!

6. Style Your Button (Optional)

Now that your button is set up, you have the option to style it however you’d like. If you’d like to keep the Google+ recommended styles, download the below image and use the following CSS:

And the end result should look something like this:

 Share With Your Followers!
The following two tabs change content below.
Founder at Inbounderish
Brad Knutson is a Web Developer in the Twin Cities area of Minnesota. He has experience working with WordPress and Drupal, and also has an interest in SEO and Inbound Marketing.

Keep Up-to-Date

Subscribe

Topics

See a complete list of topics discussed in blog posts here.

Check These Out

Get 2 Weeks Free! Sign Up Today! Premium Managed WordPress Hosting Genesis Framework for WordPress SEO is complex. Tools should be simple. Thesis Theme for WordPress:  Options Galore and a Helpful Support Community

12 thoughts on “Why Aren’t You Using Google+ Interactive Posts?

    1. Brad Knutson Post author

      Hey Shemul,

      I’m not finding your Interactive Post Share button on the page. Can you tell me where your share button is?

      Thanks,
      Brad

    1. Brad Knutson Post author

      The Google+ Share button you have above the Related Posts is the regular Google+ Share button, so it will not include the call-to-action button in the post itself. I looked at the source of the page and I do not see the code for the Interactive Post button either. That looks like the problem.

  1. gaurav

    i have problem on interactive posts. i can use interactive posts using javascript and xml.
    share window are render and click on share button but post are not share in google plus.
    pleace help me for that..

    thanks in adv…!

    Reply
    1. Brad Knutson Post author

      Hey Gaurav,

      Are you getting an error message? Have you tried following my example using the button code?

  2. Alan Wong

    Hi,
    After I click on share on this page I just get a white opaque iframe over the whole page. I am seeing the same behavior on my page. Do you know what that is all about?

    Thanks

    Reply
    1. Brad Knutson Post author

      After you hit the share button, maybe let it sit for a minute? I understand the white opaque background you are referring to, but a Google+ Share popup should be shown over the top of that shortly after. Perhaps your browser is having problems with the Javascript? Have you tried another browser?

  3. Thaya

    I need to pass dynamic content in data-prefilltext, I am using render method, but whatever i am sharing, it not getting post in their account.

    var prefillvalue = “Hai have a nice day”;
    var options = {
    contenturl:”https://plus.google.com/pages/”,
    contentdeeplinkid:””,
    clientid:”xxxxxx.apps.googleusercontent.com”,
    cookiepolicy:”single_host_origin”,
    prefilltext:prefillvalue,
    calltoactionlabel:”CREATE”,
    calltoactionurl:”http://plus.google.com/pages/create”,
    calltoactiondeeplinkid:”/pages/create”,
    };
    gapi.interactivepost.render(sharepost,options);

    please help me. I am using js google plus share window is displaying, but it isnot getting shre to any one of the account.

    Reply

Share Your Thoughts

Your email address will not be shown.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">