How to Create a Google+ Interactive Post for Your WordPress Articles

How to Create a Google+ Interactive Post for Your WordPress Articles

Interactive posts make up a very small percentage of the total posts on Google+. Which is a shame, because it really allows you to create much better engagement with your content. Most of you wouldn’t have even heard of interactive posts, so here is a screenshot showing what it looks like. Note the “Read” button at the bottom. So here’s how to create a Google+ interactive post with WordPress.

Final Interactive

Unlike a regular JavaScript rendered social button, this will not be a social button directly placed on your website. It can be designed that way, but that’s not how I’m going to illustrate this example. Rather, we’re going to create a separate HTML page to render the button that will generate the post. This will consist of the following steps:

  1. Create a Google+ API Console Project;

  2. Create the HTML and the Button Code;

  3. Visit the page from a browser and Generate the Post.

So let’s get started!

Create a Google Console Project

Visit https://cloud.google.com/console and follow the steps to create a new project. Under the “APIs and Auth” menu item on the left, select “Credentials”. If you haven’t already, click the “Create New Client ID” button as shown below.

create new client id

Now as a test, we’re going to be sharing posts from the domain http://lab.webhostingshed.com. As shown in the screenshot below, select “Web application” under Application type and under “Authorized JavaScript Origins”, type the domain name from which the articles you are about to share are residing on.

Web application

It’s very important to remember that you should leave out any trailing “/”! If you forget to do this, your newly created post will appear for a split second and just vanish without a trace. If you don’t want it to disappear, make sure that the origin is properly typed in without a “/” at the end.

You can leave the second box blank and click “Create Client ID”. Once that’s done, your client ID will be displayed as shown below. For security purposes I blanked out my own ID, but you should copy the alphanumeric string before “.apps.googleusercontent.com”.

client id

Creating the HTML File and the Button Code

Using an editor like Notepad++, create a basic skeleton HTML file with a <html>, <head>, and <body> tags. For ease of use, I just copy pasted the code from http://www.eg.bucknell.edu/~brk009/assets/skel.html.

In order to render our button, we have to add two elements. The first is the JavaScript that you should enter just before the closing </body> element as shown below:

<script type="text/javascript">
 (function() {
  var po = document.createElement('script'); po.type = 'text/javascript'; 
po.async = true;
  po.src = 'https://apis.google.com/js/client:plusone.js';
  var s = document.getElementsByTagName('script')[0];
 s.parentNode.insertBefore(po, s);
})();
</script>

The second piece of HTML renders the button itself. Here is the code I’m using as a sample:

<!-- Place the tag where you want the button to render -->
<button
 class="g-interactivepost"
 data-contenturl="http://lab.webhostingshed.com/2013/rights-and-freedoms
/how-do-atheists-infringe-on-religious-rights.html/"
 data-clientid="xxxxxxxxx.apps.googleusercontent.com"
 data-cookiepolicy="single_host_origin"
 data-prefilltext="This is the excerpt"
 data-calltoactionlabel="READ"
 data-calltoactionurl="http://lab.webhostingshed.com/2013/rights-and-freedoms
/how-do-atheists-infringe-on-religious-rights.html/">
 Tell your friends
</button>

Each of these data items has significance and needs to be tailored for your own specific situation. The ones that need to be customized are detailed as below:

  • data-contenturl: This is the URL that needs to be shared. Obviously it will vary from page to page and will need to be changed each time you want to share a new post. As you can see, I have entered a sample page from the test blog that I’ve set up for this purpose.

  • data-clientid: You need to replace the “xxxxxxxx” with the client ID that you obtained in an earlier step. The entire client ID has to be printed out. This is probably one of the reasons why it’s not a good idea to have the share button on a public page. You don’t want to expose this string to all and sundry.

  • data-prefilltext: This is the excerpt that will be prefilled when you create your Google+ post. It’s not particularly important because you will get the opportunity to rewrite it when a new post is being shared – just like any other Google+ post.

  • data-calltoactionlabel: This is the label that will be displayed on the button. In our example as shown in the first screenshot, I have used the “READ” parameter. You can get a complete list of the possible values as well as their descriptions at https://developers.google.com/+/features/call-to-action-labels. There are a great variety of options ranging from food menus, movie tickets, book reviews and so on and so forth.

  • data-calltoactionurl: Finally, this is the URL that the above label will link to. So for example if the label value is “COMMENT”, the data-calltoactionurl value can directly link to the comments section of the post or article. You can immediately see that this presents a great deal of flexibility in crafting the user experience. Upon clicking the button, you can navigate the visitor to a very specific page that is hinted at in the button label itself.

You should now be getting an idea of the power of Google+ interactive posts. While a traditional shared item only links to the article in question, this gives you the capability to perform much more complicated interactions. In addition, it also allows your post to stand out from the thousands of others in a typical Google+ stream.

Here is the final HTML I have used for my own sample for test purposes:

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
This is a skeleton html file that you can use to get you started on each new
HTML project
Name: Your Name Here
Class: CIS 3303
Section: x
-->
<html>
<head>
<title>My Title</title>
</head>
<body>
<p>This is the first paragraph in the body of your new HTML file!</p>
<!-- Place the tag where you want the button to render -->
<button
 class="g-interactivepost"
 data-contenturl="http://lab.webhostingshed.com/2013/rights-and-freedoms
/how-do-atheists-infringe-on-religious-rights.html/"
 data-contentdeeplinkid="/pages"
 data-clientid="xxxxxxxx.apps.googleusercontent.com"
 data-cookiepolicy="single_host_origin"
 data-prefilltext="This is the excerpt"
 data-calltoactionlabel="READ"
 data-calltoactionurl="http://lab.webhostingshed.com/2013/rights-and-freedoms
/how-do-atheists-infringe-on-religious-rights.html/"
 data-calltoactiondeeplinkid="/pages/create">
 Tell your friends
</button>
<script type="text/javascript">
 (function() {
  var po = document.createElement('script'); po.type = 'text/javascript'; 
po.async = true;
  po.src = 'https://apis.google.com/js/client:plusone.js';
  var s = document.getElementsByTagName('script')[0]; 
s.parentNode.insertBefore(po, s);
})();
</script>
</body>
</html>

Save this as an HTML file and upload it to your domain using an FTP client. We are now ready to generate the interactive post.

Creating the Post

Visit the file you just uploaded from a web browser. If everything has gone smoothly, you should see something like in the screenshot below.

Button

From here, it’s easy sailing. Click the button and you should see a pre-populated Google+ post with the options you’ve chosen in the button rendering code. Customize the excerpt to suit your taste if necessary, chose the people or communities you want to share it with him a and click “Share”.

Create post

The results should be an interactive post similar to what you saw in the screenshot at the beginning. I can tell you from first-hand experience that’s it certainly catches the eye. I know that I myself pay more attention to these posts as they show up in the stream. Due to the somewhat involved process of creating one, not everyone will be using it and this provides you with the power to create a truly compelling experience on a fast-growing social platform.

So tell me what you think – will you be using Google+ interactive posts for sharing your own articles?

Is Your Website Slow?

A slow website can cost you visitors. Enter your website URL below to test its load speed now and find out how to make it faster:

15 Comments on “How to Create a Google+ Interactive Post for Your WordPress Articles”

  1. i am using this but it can’t trigger the interactive posts..any suggestions how to use that one…

  2. I just really wanted to thank you for this post. Without it I would have been trying to post forever. The share box would come up like you said and then just disappear. I thought at first it was auto posting but, it was not. Either way because you explained how the web address needs to have no / at the end made it clear. Thanks again

  3. Hello,
    I have successfully created the html file following the steps in the article. But in which directory should this file be uploaded in WordPress blog?
    Could you elaborate?
    Thanks
    Abha

    • Bhagwad Jal Park

      Put it anywhere that you can access it via your web browser to test it out!

      • Hello,

        Thanks for the reply!

        I have successfully installed G+ Interactive Posts plugin for WordPress. I can see g+ button on my post. But the problem is that the final interactive post shows full size image (800*529) instead of thumbnail shown in the preview. Therefore, I cannot see the description and call to action (CTA) button in the g+ interactive post?
        I have attached 2 screenshots to elaborate the problem.

        How to change the size of the image?

        Regards,
        Abha

        • Bhagwad Jal Park

          Great question! I think Google+ automatically tries to make a “full image” when it meets the requirements. So if you create you image to be less than 400px for example, it should render it as a thumbnail. For more details, see this article: https://developers.google.com/+/web/snippet/article-rendering

          Next, to choose the image that Google+ renders, use the og:image meta tag as described here: https://www.webhostinghero.com/how-to-specify-the-facebook-ogimage-tag-in-wordpress/

          • In older version of G+, the interactive post is visible correctly. Here is the screenshot.
            G+ interactive post plugin is picking up feature image from the post. If I reduce the size of this feature image, the image will not appear correctly in the twitter card. Twitter image dimensions: 837*438.
            What is the simplest solution to fix the bug in new G+?

          • Bhagwad Jal Park

            Hmm…what happens when you specify a new image with the og:image meta tag?

          • I created og_image custom field with a new image which
            is just 350 px wide. And inserted the php code in the functions.php. But this displays only link to the blog post. Check this screenshot.

          • Bhagwad Jal Park

            Just checked your link. The og_image is 800px wide. Did you change it?

          • I have resized the image. It is just 350 px wide. here is the link to the image http://theoff.info/Adventure-Travel/wp-content/uploads/2016/08/UK-Raft-10-Q2-G.jpg

          • Bhagwad Jal Park

            The image I’m seeing on the page is still huge…

            The one you showed in the comment has the word “raft” in it. The og:image on the page has “rafting”…

            Also, could you change the og:image:width and og:image:height parameters to reflect the dimensions as well?

          • Hello,

            Thanks for the reply!

            Here is the screen shot where you can see value of the og_image custom field.

            In fact, I tried to add image width to the code pasted in functions.php. But it delivered HTTP 500 Error and I could not access my WP dashboard. Then I deleted the image
            dimensions from the function via ftp and could access the dashboard.

            function
            insert_og_image() {

            if(get_post_meta(get_the_ID(),
            ‘og_image’, true) && is_single()) {

            $output =
            ”;

            }

            echo $output;

            }

            add_action(‘wp_head’,’insert_og_image’);

            However, I have renamed the image for the custom field to avoid any confusion because of raft and rafting words in both image names (feature image and custom field image).

            The renamed image url
            …/Adventure-Travel/wp-content/uploads/2016/08/Kayak-Quiz.jpg in custom field also did not solve the problem.

            Could you point out the mistake?

            Thanks

          • Bhagwad Jal Park

            I think the error was caused because of improper closing of apostrophes after content=”350″ . But I wonder why the og:image on your site is still different.

            I see you’re using a caching plugin. Can you refresh all of them so that the change is visible?

  4. I have tried what you have suggested. Unfortunately, g+ interactive post does not look the way it should.
    Thanks for your time!

Leave a Reply

Your email address will not be published. Required fields are marked *

Disclosure: We receive a compensation from some of the companies whose products are presented on our website.