How To Add Facebook Recommendation bar in Blogger

Socialize It →

Tweet

6

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

About the Editorial Team

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