How to Add Facebook Like Button Widget to Blogger (Official)

Do you want to add a simple and clean facebook like box widget to your blogger (blogspot) ? Well, I've got it for you in this post and its very clean and fast loading.

Facebook is one of top social media site to promote your online content. You can drive a huge amount of targeted traffic to your blog and websites by facebook pages and groups.

If you don't have a facebook page for your blog or website yet then go and create a one. For a good amount of targeted traffic your facebook fan page must be active and big. From big, I mean with a healthy number of likes.

To increase your facebook fan page likes, Its a good idea to add your facebook page to your blog. It will be cost-free and easy for your as well. So, inspite of creating ads and investing your precious money, its highly recommended mate.

In this post, I am going to share a very good looking facebook like box widget for your blog. It purely coded and won't affect your blog's loading time anyhow. Below is a simple screenshot of it.
Demo of Facebook Like Box Widget
So, without wasting your time I would now like to share the like box widget for blogger. Just follow the steps carefully and make it own.

How to Add Facebook Page Like Widget to Blogger?

Log in to blogger and Select your blog.
Now, Go to Template > Html & anywhere inside the html box. After that, search for <body> tag and copy-paste the below given javascript code just below <body> tag there.

<div id='fb-root'/> 
(function(d, s, id) { 
  var js, fjs = d.getElementsByTagName(s)[0]; 
  if (d.getElementById(id)) return; 
  js = d.createElement(s); = id; 
  js.src = "//"; 
  fjs.parentNode.insertBefore(js, fjs); 
}(document, 'script', 'facebook-jssdk')); 

After that, Go to Layout > Add a Gadget & Select Html & Javascript. Now, Copy-paste the below code there & hit the save button.

<div class="fb-page" data-href="" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><div class="fb-xfbml-parse-ignore"><blockquote cite=""><a href="">TricksFeed</a></blockquote></div></div>
Replace Tricksfeed with your page Username

Thats all. Be the first one to view it.

Thats All. Your widget must be appearing there. You can re-arrange its position anytime by dragging under Layout area.

Just leave a comment if you are having any issues with this facebook like widget for bloger. Happy Blogging :)
Next Post »