The Joomla! Community Magazine™

Standing Out in the Stream - Adding Interactive Posts to your Content

Written by | Friday, 01 March 2013 00:00 | Published in 2013 March
We've all seen the social sharing icons which appear at the bottom of many websites encouraging people to like and share your content, but what if you could have the message that your visitors are pushing out to their social streams become more interactive? Google+ has just introduced 'interactive Posts' which help your shared posts stand out from the crowd - this could be a real game changer for many websites and an interesting way to develop social interaction with your visitors' networks.
Standing Out in the Stream - Adding Interactive Posts to your Content Google Developers

Imagine if you could have the ability for customers to share a product on your website to their social media networks encouraging their friends to buy it for them, with a clear 'call to action' button superimposed on the shared link taking their friends straight to your buy now page! 

What about if you have a poll on your website, and you could allow people to share to their networks with a 'vote now' button, giving people a cue to provide their thoughts?

Google has recently announced the availability of 'Interactive Posts' which "provide an easy and prominent way to allow users to share your site or app with their connections and invite them to take action, for example RSVP for an event."

This new development should have marketing professionals dancing in the street, because I anticipate that with careful use, interactive posts could result in driving new users to your site, improving conversions, and increasing engagement.

> Skip to the geeky bit!

Google+ Interactive posts

As a user of social media, knowing the 'intention' behind the link that has been shared by my friends (for example, if they want me to RSVP to an event, or they are sharing a link to a product on a shop, or suggesting that I read an article) means that I already have an idea of what might be at the 'other end' of the link and therefore informs the decision of whether I want to click on the link or not - if I click through I know roughly what to expect. 

Add to this a well optimised title, a graphic and a snippet of text from the page, and you have something that looks like the image above.

How could this be used on a Joomla! website?

There are many ways that this kind of feature could be implemented on a Joomla! website - it's quite new technology so I haven't seen anything in use to date, but some of the 100 available call to action interactive post labels which may have relevance to Joomla! extensions include:

  • Add to cart
  • Add to calendar
  • Apply for a job
  • Ask a question
  • Bid in an auction
  • Bookmark a website
  • Buy an item
  • Check in at a location
  • Comment on a post or an item
  • Report an error
  • Confirm attendance
  • Download a document
  • Find a table in a restaurant
  • Invite a friend to an event
  • Learn/read more about a topic
  • Pay a subscription
  • Watch a demo
  • Sign up for a newsletter or magazine
  • Vote in a poll
  • Let your friends know what you'd like for your birthday!!
  • Write a review

 How to implement Interactive Posts?

There are some fairly clear instructions on the Google+ API documentation page but basically you need to follow these steps:

  1. Create a Google APIs Console project and generate a client ID on the API Access pane.
  2. Include the following javascript just before your closing body tag:
  3. <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>
  4. Choose a label to use from the 100 call to action labels available - it is important to use these labels and not manually specify your own, as these are translated into the native language of the user viewing the post. This value is used in the data-calltoactionlabel parameter.
  5. Add the markup to your extension (ideally in a template override if it's not already being used in the core extension). You can do this by using a div, span or a button - see below - This will automatically render a button on page load - you can use the Javascript API to create interactive post buttons.

  6. <!-- Place the tag where you want the button to render -->
    <button class="g-interactivepost"
    data-contenturl="https://plus.google.com/pages/"
    data-contentdeeplinkid="/pages"
    data-clientid="xxxxx.apps.googleusercontent.com"
    data-cookiepolicy="single_host_origin"
    data-prefilltext="Engage your users today, create a Google+ page for your business."
    data-calltoactionlabel="CREATE"
    data-calltoactionurl="http://plus.google.com/pages/create"
    data-calltoactiondeeplinkid="/pages/create">
      Tell your friends
    </button>

  7. If you don't like the design of the buttons, you can create your own buttons and customise to your requirements.

The potential of this development is endless, and the range of areas in which it could be implemented to drive traffic to websites, generate user interaction and social sharing - I look forward to seeing it implemented by Joomla! developers soon!

Read 201286 times
Tagged under Sitebuilders, English
Ruth Cheesley

Ruth Cheesley

Ruth Cheesley is CEO and Co-Founder of Virya Group and has worked with Joomla! since the fork from Mambo.  She specialises in Joomla! - in particular Search Engine Optimisation (SEO) - and is interested in exploring how open source technology can be implemented in business and education.  Virya means a driving force or energy to do good for the benefit of others, which is the central ethos behind the business.

She's also a field hockey goal keeper, training for ordination in the Triratna Buddhist Order and runs the popular Joomla! User Group Suffolk, as well as being part of the Joomla!Day UK organising team.  Ruth joined the Joomla! Community Leadership Team in 2013.