Add A Facebook Recommendations Bar To Blogger

AssalamuAlaikum Readers,
Facebook was already helping developers in the promotion of their apps,websites etc and now facebook have launched a plugin "Recommendations Bar" well actually It's designed to display additional recommended articles right after readers have finished reading an article or spent some time on your blog. It will collapse on page load and expand once a reader has reached a specific location on your blog or finished reading the post. 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.To see a demo check the bottom right of our site.

Installing The Plugin:

Consists Of Two Easy Steps:

Step#1: Creating Facebook Application.

1. Log into Facebook Apps
2. Click On Create New Application.
3. Now inside the App Name type in "My Recommendations Bar" and leave other as default and click continue.

4. Type in the captcha spam blocker verification code and click submit.

5. now simply click on Website With Facebook Login and type in your website url and click on save changes.

6. Copy the App Id and save it as it has to be used in the script.

Step#2: Adding The Script To Blog.

1. Go to Blogger

2. Backup your Template.

(Create Backup By Going To Template And Clicking On Backup / Restore And Then Clicking On Download Template)

3. Go to Template > Edit HTML > Proceed.

4. Search for the following code:

<html

and replace it with:

<html xmlns:fb='http://ogp.me/ns/fb#'

this will make the plugin compatible with the older version of Internet Explorer.

5. Now search for the <body> and just below it paste the following code:

<div id='fb-root'/>

<script>

//Facebook Recommendation bar by www.bloggerfreaks.com

//<![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 == "item"'><b:if
cond='data:blog.pageType != "static_page"'><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.bloggerfreaks.com' trigger='40%'/>
</div>

</b:if></b:if>

Compulsory Changes:

Replace *************** with the app id.
Replace http://www.bloggerfreaks.com with your website url.

Possible Changes:

max_age='0' if you don't want to show the articles which are to aged :) then you can set it to like changing it to 1-10 then it will only show posts of last 10 days.
num_recommendations='3' change the value to your preferences, it changes the number of articles to be shown.
read_time='10' its the time after which the plugin will expand and show articles, you can set it to whatever you want to, basically its the estimated time taken by your readers to read the post, I prefer that you let it be '10', its in seconds.
side='right' change it to 'left' if you want it to appear on the bottom left of your page.
the plugin only display on post pages not on static pages or home page, if you want it to appear on the homepage and static pages aswell then just delete the following code from the script.

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

</b:if></b:if>

Troubleshooting:

If your title doesn't show up then simply below the <head> paste the following piece of codes:

<meta content='article' property='og:type'/>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
<meta expr:content='data:blog.title' property='og:site_name'/>
<meta expr:content='data:blog.pageName' property='og:title'/>

(Note): The above code will work for the new posts only, for old posts read this ARTICLE on how to solve the problem.

Any Queries? Feel Free To Contact Us, Don't Forget To Bookmark Our Page, Posts And Like Our Posts ALLAH HAFIZ , Stay Blessed.

Thanks For Making This Possible! Kindly Bookmark and Share it.

4 comments:

Hammad Baig on 2 July 2012 06:36 said...: Awesome plugin by facebook team ,thanks for this tutorial
meesum raza on 2 July 2012 07:59 said...: @Hammad Baig
welcome dude! feel free to ask if any queries! :)
Hamxa Wasim on 9 August 2012 11:04 said...: Awesome Plugin :D

Sleek Social Subscribe Box For Blogger Adapted From WordPress
meesum raza on 9 August 2012 13:21 said...: @hamxa
so it is thank you for the love :)

Confused? Feel Free to Ask

Your feedback is always appreciated. We will try to reply to your queries as soon as time allows.

Please do not spam
Spam comments will be deleted immediately upon our review.

Regards,
Meesum Raza