How To Add Facebook Recommendation bar in Blogger

Advertisements
Facebook is probably the largest social networking website in the world. This is the reason why most of the corporate companies utilize Facebook for marketing their material and making it go viral on Social media. Facebook provides various ways of making your content go viral through Facebook like box, Facebook comments, Facebook like button. Almost the majority of websites claims that after adding Social elements to their website they were able to get more viral audience. In this article, we will show you how to add Facebook recommendation bar in Blogger.

Facebook Recommendation bar is pretty much of a like button that appears as you scroll and shows you the snippets of the articles which you have published on your site.

 Create a Facebook Application: 

The First thing you need to do is to create a separate App ID for your application and that can be done easily through Facebook Developer. Login to your Facebook account and go to Facebook Developers website. This places allow Developers to manage their apps hosted at Facebook, click on Create New App button.
A Small pop out will appear which would ask you to insert little information about your application. There are two fields, write the App name and press the continue button.
Your app is almost ready, just press the link "Website with Facebook login" and insert your full website URL i.e. http:.//www.mybloggerlab.com/. Once done, press the "Save Changes" button located at the bottom.
Now you will land of a new page which would provide you your application details like App ID, App name and etc. You need to copy these keys and enter them later.

Setting up Facebook Recommendation Bar:

Once you have the App Id and the secrete key, you are almost ready to add the Facebook Recommendation bar to your Blogger site. Go Blogger.com >> Layout >> Add a Gadget >> Add HTML/JavaScript and in the text area paste the following code.

<div id='fb-root'/>
<script>
//Facebook Recommendation bar by www.mybloggerlab.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 == &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.mybloggerlab.com' trigger='40%'/></div>
</b:if></b:if>

Now you have to just add your Application ID along with your website URL. Replace the *************** 15 dots with your APP ID and http://www.mybloggerlab.com with your own website URL

Congratulations: You have successfully learned How To Add Facebook Recommendation bar in Blogger? visit your website to see the recommendations bar in action. This is how it looked like on our test site:
We hope that this tutorial have allowed you to understand how to add a Facebook recommendation bar in Blogger. Now will you add this recommendation bar on your website? Let us know in the comments below.
Advertisements

The Editorial Team of MyBloggerLab consists of a group of Professional Blogger geeks Led by Syed Faizan Ali (Founder of MyBloggerLab).

Comment With:
OR
Choose Wisely!

6 comments

June 30, 2013 at 1:27 PM

Good one Bro ! :D this is better than RECENT POSTS LOL

July 2, 2013 at 9:46 AM

Thanks bro!
How to add or align " adsense ad + Facebook like box " below posts (like your blog). please help me !!!!!!!!!!

Thanks

Editorial Team MOD
July 4, 2013 at 2:41 PM

That's a bit tricky but we will make it simple for you guys. Cheers

August 31, 2013 at 12:05 PM

My Apps Not Avail Dear

This app is in Sandbox Mode(Only visible to Admins, Developers and Testers)

Editorial Team MOD
September 8, 2013 at 11:37 AM

Disable the Sandbox than its simple :)

November 10, 2013 at 5:11 AM

cool bro!

My Blog

Post a Comment

We’re eager to see your comment. However, Please Keep in mind that all comments are moderated manually by our human reviewers according to our comment policy, and all the links are nofollow. Using Keywords in the name field area is forbidden. Let’s enjoy a personal and evocative conversation.

Helping You to do Cool Things With Blogger Since 2012™.

© Copyright 2012 - 2016. MBL Networks, All Rights are Strictly Reserved.