How to add a Facebook Like Box Widget or Facebook Fan Page Widgets to Blogger or any Website?

How to add Facebook Fan Page box to Blogger?

Facebook fan page widget is very important for any Website. Because when people visit your site, they see it and of your site seems nice to them, they will like it. Then what will be happened?More traffic will come from your facebook fan page.

Facebook Like Box Widget like above picture. It can be kept any place of your website. It is an HTML code, so any one publish it in a post. But it is important to post in html basis.

So lets start.

First Step: 

Go to Blogspot.com and choose your any one of blog.

Second Step:

Then Click on Layout.

Third Step:

Then clik on Add Gadget from any.

And Select HTML/JavaScript and a new window will appear like below.

Last and Final Step:

Now give a tittle Facebook fan page or Facebook like box or Find us on Facebook as you wish.

In Content Box Copy and Paste this html code from below.

<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com/osbdkitc&width=300&</p> </p> <p class="separator" style="clear: both; text-align: left;"> <p> height=300&show_</p> </p> <p class="separator" style="clear: both; text-align: left;"> <p> faces=true&colorscheme=light&</p> </p> <p class="separator" style="clear: both; text-align: left;"> <p> amp;stream=false&border_color&header=false"</p> </p> <p class="separator" style="clear: both; text-align: left;"> <p> scrolling="no" frameborder="0" style="border:none;</p> </p> <p class="separator" style="clear: both; text-align: left;"> <p> overflow:hidden; width:300px; height:300px;"</p> </p> <p class="separator" style="clear: both; text-align: left;"> <p> allowtransparency="true"></iframe></p> </p> <p class="separator" style="clear: both; text-align: left;"> <p> <a href="http://www.freelancer-solution.blogspot.com" rel="dofollow"</p> </p> <p class="separator" style="clear: both; text-align: left;"> <p> target="_blank" title="blogger"><img src="https://bitly.com/haakblog" alt="blogger" border="0" style="position: fixed;</p> </p> <p class="separator" style="clear: both; text-align: left;"> <p> bottom: 10%; right: 0%;"/></a><div id="rpdr" style="font-</p> </p> <p class="separator" style="clear: both; text-align: left;"> <p> family: arial, sans-serif; font-size: 9px;"></p> </p> <p class="separator" style="clear: both; text-align: left;"> <p> <a href="http://www.freelancer-solution.blogspot.com/2015/01/facebook-like-box-widget-fan-page-widget-blogger-website.html" target="_blank"</p> </p> <p class="separator" style="clear: both; text-align: left;"> <p> title="like box Widget">Get Like Box Widget</a></div>

NB: You need to change this address "www.facebook.com/osbdkitc"<textarea> with your fanpage address.</p> <p> <a data-blogger-escaped-p="" data-blogger-escaped-target="_blank" href="http://www.freelance-solution.blogspot.com/2015/01/facebook-like-box-widget-fan-page-widget-blogger-website.html"> </a></p> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <p class="separator" style="clear: both; text-align: left;"> <br></p> <p class="separator" style="clear: both; text-align: left;"> Or, Goto <a data-blogger-escaped-target="_blank" href="http://mobizonebd.com/forum2_theme_111920550.xhtml?tema=4">This Link</a> and Copy the code.</p> </div> </div> <p class="separator" style="clear: both; text-align: left;"> <br></p> <p> And last Click on Save and see your blog. If this article is not helpful please comment or visit our facebook fanpage. </p> </div>

This Link and copy the code.

And last Click on Save.

• Tweet
• Share
• Share
• Share
• Share