Add a Facebook Recommedation Bar to your Blogger blog

The Facebook Recommendation Bar displays some blog posts which have liked by some readers which also helps in engaging some of the new readers in your blog. It only appears when a reader has finished reading some post.

To implement this on your blog follow the simple steps below.

1> Go to https://developers.facebook.com/apps

2> Click on Create New App on the upper right corner.

3> Type "Recommedation Bar" in the App Name.

4> Provide the security check.

5> After that you will be provided with an App Id. Store it somewhere safe.

6> Go to your blogger account --> template --> edit html.

7> Find <html where the whole code will be some thing like this ....

Replace this code with this one ....

8> Now, using Ctrl+f, find <body>

Then paste this code just after the <body> line ....

<div id='fb-root'/>
<script>
//Facebook Recommendation bar by http://www.source-codes.co.in/
//this notice must stay intact for legal use
//For more visit http://www.source-codes.co.in/
//<![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=PASTE YOUR APPID HERE";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
//]]>
</script>
<b:if cond='data:blog.pageType == "item"'>

<b:if cond='data:blog.pageType != "static_page"'>

</div>
</b:if>

</b:if>

Change the site url to your own website url.
'recommedations=5' displays how many recommendations it will be displayed.
'read_time='5'' is the time in seconds after which the bar will appear in your website.

9> Save your template and view a post to see the effect.

Leave a comment if you have any difficulty.