Facebook like box conjointly referred to as Facebook fan box has become a requirement part for several web site. It permits web site house owners to supply their users with a straightforward thanks to be a part of their facebook community and obtain updates right in their Facebook news feed.

 In this topic, I will discuss on how to add Facebook Fan page or Like box widget to your blog or website in simple steps.



For Blogger,

Step 1:

  • Go to your "Blogger Dashboard" and click on the blog to which you would like to add the Facebook Fan box.
  • From the options to left of webpage, select and click on "Template".
  • Next click on "Edit HTML".
  • Using Default Search feature(ctrl+F), find  </body> and paste the below code right above or before </body>.
<div id="fb-root"></div>
<script>(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";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
  • Now, click on "Save Template".

Step 2:

  • Go to your "Blogger Dashboard" and click on the blog to which you would like to add the Facebook Fan box.
  • From the options to left of webpage, select and click on "Layout".
  • Click on "Add a Gadget".
  • A new pop-up window opens, find and select "HTML/JavaScript".
  • Now paste the below code in the "content box" , replace "http://www.facebook.com/ViNiwebworld" with your Facebook Fan-page URL and click "Save".
 <div class="fb-like-box" data-href="http://www.facebook.com/ViNiwebworld" data-width="The pixel width of the plugin" data-height="The pixel height of the plugin" data-colorscheme="light" data-show-faces="true" data-header="true" data-stream="false" data-show-border="true"></div>
  • Next, click "Save arrangement" on the top right of your web page.

After, you are done with the above two steps, go to your's blogger's blog and check whether it works or not.

For Website,


Just add the below code right after the head tag "<head>" in the HTML of your website.


 <div id="fb-root"></div>
<script>(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";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

 Now, you can place the below code on your website at any place of your choice and replace "http://www.facebook.com/ViNiwebworld" with your FB Fan page URL.


  <div class="fb-like-box" data-href="http://www.facebook.com/ViNiwebworld" data-width="The pixel width of the plugin" data-height="The pixel height of the plugin" data-colorscheme="light" data-show-faces="true" data-header="true" data-stream="false" data-show-border="true"></div>

That's it, now you are done with adding Facebook Fan page or Like page to your blogger's blog or Website. 


 For more related information and future updates, subscribe to ViNi Web world.

Please share your opinions with us or comment.