How to Add Google+ Content Recommendations to Your Mobile Site

Google+ Content Recommendations is a great way to add more interactivity to your mobile site. Google has introduced this new feature to enhance the Google+ integration with your site, recommending the articles which have been +1 by your visitors and lead them to deeper engagement with your site.

It will work on the latest Android as well as iOS browsers on the native Android browser, Safari, and Chrome. You can increase mobile site pageviews for sure by adding this feature in a few minutes.

google+ recommends

Add Google+ Content Recommendations

For most websites and blogs which already display the +1 button or Google+ badges, it means simply editing a single line of code.  Here is the code you need to add  or edit.

1. Link to Publisher Profile –  We already had the link to our Google+ publisher profile in the HEAD tags of the HTML. Most sites have this code as it is essential for integrating your site Google+ page.

<link href="https://plus.google.com/104720479662987122222/" rel="publisher" />

That long number 104720479662987122222 is our publisher ID. You need to replace it with your page ID.

2. Add the Google+ Script to Footer. Again we already had it loaded in the footer as we display +1 buttons.

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

3. Add Publisher ID to the Google+ Script. This is the only single code change everyone needs to do if you already have the earlier codes loaded up.

We need to replace

https://apis.google.com/js/plusone.js

with

https://apis.google.com/js/plusone.js?publisherid=104720479662987122222

Remember to replace our page ID  with your page ID for this to work. So now the final script posted in our footer looks like this.

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

You can then configure your settings from the Google+ dashboard  and choose to disable recommendations for selected pages or choose for the script to work on selected urls or choose after how much page scroll to display recommendations. I am sure they will implement it for the full screen desktop view soon just like Facebook recommendation bar.

See how this will work on your mobile website

So now visit QOT.CO (our short url) on your mobile device to visit our responsive mobile website and check out if you get content recommendations from your friends.

Share with friends

About the Author: P Chandra is editor of QOT, one of India's earliest tech bloggers since 2004. A tech enthusiast with expertise in coding, WordPress, web tools, SEO and DIY hacks.