Saturday, 29 November 2014 00:00

Google Plus Interactive Posts

  Share This Post !

First, just what is a Google Plus interactive post and where might it be used...?

A Google Plus interactive post, in effect, is a pre formatted post that shows in a user's Google Plus stream with a predefined message, image and call to action (CTA) which can be very effective at catching the attention of the prospective user.

It is also by far the best possible way of controlling your brand's image and how it is portrayed throughout the web. If you have a specific messgae, offer, product or service to convey we'd recommend the use of Google Plus interactive posts as they are simple, eye catching and efffective.

To create Google Plus interactive posts follow these simple steps:

  • Create a Google Developer's API Account
  • Create the post
  • Add the Interactive post link
  • Share the post

It really is that simple and here's how:

Create a Google Developer's API Account

May seem daunting but it really isn't that hard. Simply visit the Google Developers Console and create a new project. If you use Google+ Sign in or other servives that require an API you can skip this step, simply as your web designer for the "Client ID".

You'll need to enable the Google+ API, customise the consent screen and create an API key. Other than that you should be OK and can easily go back here later to add additional information.

Create The Post

Just like any other Blog article or post, you simply write it up and then we add the Interactive post code later.

Add The Interactive Post Link

The post we have created here has a Google Plus Interactive post CTA at the top of the page. The code is actually quite simple:

Anywhere on the page but ideally in the header and just before the closing

</head> tag insert the following:

<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>

This needs to be included on every page that uses the Google Plus Interactive posts so we may as well insert it into the page headers for good measure.

Next we have the code itself:

<span id="myBtn" class="demo g-interactivepost" data-clientid="XXXXX.apps.googleusercontent.com" data-contenturl="http://www.whatnowebsite.co.uk/blog/how-to/google-plus-interactive-posts?Link=G+IPost" data-calltoactionlabel="LEARN_MORE" data-calltoactionurl="http://www.whatnowebsite.co.uk/blog/how-to/google-plus-interactive-posts?Link=G+IPost" data-cookiepolicy="single_host_origin" data-prefilltext="A step by step guide on how to start using Google Plus Interactive posts on your website."> <span class="icon">&nbsp;</span> <span class="label">Share This Post !</span> </span>

So what does all this mean...?

  • The button has a class "myBtn"
    • This controls the look and feel of the button and we have included the CSS below
  • data-clientid
    • This is your API client ID
  • data-contenturl
    • The url being linked to. You'll notice ours also has a query string "?Link=G+IPost" so we can track the posts through Analytics more easily
  • data-calltoactionlabel
    • This can be customised here and there are around 100 to choose from
  • data-calltoactionurl
    • Must be the same as "data-contenturl"
  • data-prefilltext
    • This is where you insert your own specific message

The image, in our case is taken from the post itself and the content for the post from the meta description for the page.

Share The Post

Now all that's left to do is share the post itself. Try it out by clicking the link below:

  Share This Post !

You'll notice it asks you for permission, that's the API call being made. You'll also notice that you can customise the audience by selecting "Public" or specific circles or communities.

CSS For Interactive Post Button:

#myBtn.demo { padding: 5px; background: #fff; cursor: pointer; line-height: 20px; border: 1px solid #e6e6e6; border-radius: 4px; } #myBtn.demo .icon { width: 20px; height: 20px; display: inline-block; background: url('https://developers.google.com/+/images/branding/btn_icons_sprite.png') transparent 0 -40px no-repeat; } #myBtn.demo:hover { background-color: #cc3732; color: #fff; border: #dd4b39; } #myBtn.demo:hover .icon { background: url('https://developers.google.com/+/images/branding/btn_icons_sprite.png') transparent 0 0px no-repeat; }

Additional Info

Last modified on Friday, 24 April 2015 21:00

Leave a comment

Make sure you enter all the required information, indicated by an asterisk (*). HTML code is not allowed.

Our Most Popular Blog Articles

  • Default
  • Title
  • Date
  • Random
load more hold SHIFT key to load all load all

Turning Ideas Into Reality

We work with companies all over the world helping them realise their ideas and optimise ideas already working well for them.

Need Help With Your SEO ? We don't just monitor, we don't just make changes, we train you to manage your own SEO !

Contact us to find out how we can help you make more profit with less effort.

Search

Contact Us

+44 (0)845 527 3596 (UK)
+34 602 155205 (ES)
This email address is being protected from spambots. You need JavaScript enabled to view it.



See how you too can achieve an increase in online revenue.

Review Us...

What Others Have To Say...

  • Michael managed with attention to detail and monitors the status of accounts like a hawk without losing sight of the
    Timothy Barreiro Coral Hotel Group
  • What No Website offers a great and valuable service which is absolutely perfect for any new start business or entrepreneur
    Christopher Pennington Capecan Group
  • That is amazing thank you soooooo so much. Honestly, this is going to change the way we work here.
    Suzanne Lovell Age UK
  • We had an excellent level of communication with What No Website who completed all the tasks in a timely manner…
    CTO Paradise Park Hotel
  • 1

Recent Blog Articles