Thursday, October 30, 2014

Facebook Recommended Bar for Blogger

Live Demo

 Finally the plugin of Facebook Recommended Bar is on your blogger. In order to engage readers more and let your visitors spend more time on your website Facebook has finally launched the "Recommendations Bar" in beta version. It's designed to display additional recommended articles right after readers have finished reading an article or spent some time on your blog. Only those articles are displayed that are previously liked or shared on Facebook. The number of likes are displayed under each article along with page title and a thumbnail. It also contains a like button and previously contained an Add to Timeline button that has been removed now. Unlike Facebook Recommendations box which offered related stories but with lack of user friendly interface and engagement, Facebook bar will force readers to stay longer on your site leading to increased pageviews, page impressions and thus traffic. It's a smart alternative to Recommended Post Slides widgets that we previously published.

Install it to Blogger

It can be installed easily on both BlogSpot blogs and Wordpress but with a little patience. We have kept the installation extremely easy and ignored unnecessary steps like installation ofOpen Graph Meta Tags. We would install necessary codes to keep the structure clean and make the widget work just fine. The code we are sharing is optimized and will display your blog titles and featured images correctly and with a lot of control attributes.

Creating Facebook Appication

First of all you have to create a Facebook Application. Here are the instruction that how you can create your facebook application. Click here to create a Facebook App.

Adding Recommended to your Blogger

Follow these steps to add the recommended bar to your blogger.

  • Go to Blogger > Template
  • Click on Edit HTML
  • Now Search for

<html
and replace it with
<html xmlns:fb='http://ogp.me/ns/fb#'

  • Now Search for <body> tag. and paste the following code just below it. 

<div id='fb-root'/>
<script>
//Facebook Recommendation bar by www.mybloggerworld.net
//<![CDATA[
(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=***************";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
//]]> 
</script> 
<b:if cond='data:blog.pageType == &quot;item&quot;'><b:if cond='data:blog.pageType != &quot;static_page&quot;'><div style='z-index:999999; position:absolute;'> 
<fb:recommendations-bar action='like' max_age='0'num_recommendations='3' read_time='10' side='right'site='http://www.mybloggerworld.net' trigger='40%'/></div> 
</b:if></b:if>
Now replace http://www.mybloggerworld.net with your blog url
By default it will show on right side if you want to change its site replace right

  • Now save the template and now you will see it on your blog.

at 12:23 PM

0 comments:

Post a Comment