Labels

Add Facebook Like Box to Your Blogger Blog

Facebook Widget for Blogger

Facebook Like Box or most commonly called as Facebook Page widget is having an importance for websites. Having a Facebook Like Box on a website enable its visitors to join our community on the biggest social media platform Facebook. A person who joins your community/page on Facebook can easily get in touch with every update of the website.


Look at our blog, you will see a Facebook Like Box. You guys must have seen so many other Facebook Widgets on the web but majority of these are heavy and affect the blogger load time. On the other hand, the widget we will show you today is light and fast and doesn't decrease the blogger load time.

Today we are showing you 2 methods to install Facebook Like Box widget on your blogger blog. So lets follow this tutorial on How You Can Add a Facebook Like Box to Your Blogger Blog?

Method 1: 
Facebook Social Plugins Page
  • Fill the blank fields and choose the dimensions (i.e., Height and Width) of your desire. Then click on "Get Code".
  • Facebook will show you a window of codes with multiple options in HTML5, XBFML, IFRAME or URL. You can choose any of these but we may prefer HTML5. If the other methods don't work with your blog then choose, IFrame.
Facebook widget codes for blogger
  • Now click on HTML5 and copy the first part of the code. Now go to Blogger>Template>Edit Template and paste it right after the <body> tag. Then save it.
  • Now go to Layout and Add a Gadget of HTML/JavaScript. Paste the second code (you copied) in the box and save it.
  • That's it. You have successfully added the Facebook Like Box widget to your Blogger Blog.

Method 2: 
The second method is simple and less time consuming. Follow these steps to successfully add this widget.
  • Go to Blogger > Layout > Add a Gadget and select HTML/JavaScript.
  • Copy and paste this code in the box.
<iframe src="//www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/Galakcious&height=258&show_faces=true&colorscheme=light&stream=false&border_color&header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:285px; height:258px;" allowtransparency="true"></iframe>
  • Replace Galakcious with you page name and save it.
  • Job done. Cheers :)

I hope this tutorial will help you a lot. If you have some other methods then share these with us. If you liked this one and want more tips and tricks then like our blog's Facebook Page. Thanks!
Labels:

Comments

Post a Comment

Popular Posts