Add Facebook Recommendation Bar in 13 easy steps

Wednesday, December 12, 2012

As in the presence era Facebook is one of the most popular sites on internet and millions of people are online in facebook any time so bloggers can attract internet users from facebook to their blogs and websites through different Facebook widgets and one of those widget is "Facebook Recommendation Bar", which is recently launched by facebook. You can also increase your blog traffic with this FRB (Facebook Recommendation Bar). A visitor can like your post on facebook and share/recommend it to his/her facebook friends through FRB. Facebook Recommendation Bar also recommend your related posts to your blog visitor. Therefore many bloggers have added FRB in their blogs, I have also added it to my blog you can view it. When a visitor is about to finish reading
your post the FRB will appear at the right bottom side of your blog once you complete the simple 12 steps below.

Steps

1. Go to Blogger dashboard > template > Edit Html > tick mark in the exppand widget teplates > find the <head> code and just below/after it paste the following code and save it. Please download your template back up before doing this.
_____________________________________________________________________

<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'/>

<b:if cond='data:blog.metaDescription != ""'>
<meta expr:content='data:blog.metaDescription' name='description'/>
</b:if>

_____________________________________________________________________
2. Go to https://developers.facebook.com/apps/ and click on "Register as Developer", (if you are not register) like below image.

step 1 adding facebook recommendation bar to blogger

3. Just click on "Continue.

step 2 adding facebook recommendation bar to blogger

4. Click on skip like below image and don't mess with other settings.

step 3 adding facebook recommendation bar to blogger

5. After skipping click done.

6. Now Click on "Create New Application" button at the top right like the below image.

step 5 adding facebook recommendation bar to blogger

7. Give any name to your application and then click on Continue, do not check "Web Hosting".

step 6 adding facebook recommendation bar to blogger

8. Now you will be redirected to a page where you have to enter the correct captcha and then click on "Continue.

9. Now copy the App ID numerical number and save it into your word pad or notepad because you will need it later. Also "Click on Website with Facebook Login" and typer your complete url of your blog or site. and then press "Save Changes".

step 8 adding facebook recommendation bar to blogger

10. Now we will add it to blogger. Login to your blogger Dashboar > Click on your Blog > then click on template and back up your template (in case of not working you can upload your template back up file), then click on Html > then click on proceed >

11. Now find the <html code and replace it with <html xmlns:fb='http://ogp.me/ns/fb#'

12. Now find the <body> code by pressing Ctrl+F and paste/place the below code after/below the <body> code, follow the last step as well.

Code;
__________________________________________________________________________

<div id='fb-root'/>
<script>
//<![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=YOUR_APP_ID";
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://YOUR_BLOG_URL' trigger='40%'/></div>
</b:if></b:if>
____________________________________________________________________________

13. Replace "YOUR_APP_ID" with your App ID and replace "YOUR_BLOG_URL" with your blog URl before placing the above code below the <body> code.

You might also like;