How to Add Floating Facebook Like Box Widget to Blogger

Having a Facebook widget box makes it pretty much simpler for your blog visitors to reach your social media handles. The small snippet can really improve your social presence that will ultimately drive in more traffic to your blog.

If you also wanna configure a Facebook widget box on your blog but don’t have any idea about it, then we have made it possible for you. In this article, we are gonna share a complete tutorial on how you can add floating Facebook like box widget to blogger here.

Guide to Add Floating Facebook Like Box Widget to Blogger

Before you make any changes to your blog, make sure you check whether your blog has jquery enabled or not. To check it, simply navigate to the blogger’s template section and search in for the code that we’ve provided below.

<script src=’http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js’/>

If you see the code in between the <head>….</head> section, then your blog has the jquery enabled. In case, you don’t find the code there, then simply copy it and paste it in between the <head>….</head> section to enable jquery on your blog.

Now, you’ve successfully enabled the jquery on your blog and it’s time to add floating Facebook like box widget to blogger. Let us show how it can be done as follows:

  • Go to Blogger.com platform.
  • Login to your blogger account.
  • Navigate to the Layout section.
  • There, you’ll see a “Add a Gadget” option.
  • Out of the available options, simply choose “HTML/Javascript” gadget.
  • Now, a popup window will appear on your screen.
  • All you have to do is simply copy one of the codes provided below and click Save.

Left Floating Facebook Like Box Widget Code

<script>
/*<![CDATA[*/
jQuery(document).ready(function() {jQuery(".bofblikebox").hover(function() {jQuery(this).stop().animate({left: "0"}, "medium");}, function() {jQuery(this).stop().animate({left: "-250"}, "medium");}, 500);});
/*]]>*/
</script>
<style type="text/css">
.bofblikebox{background: url("https://2.bp.blogspot.com/-nEQ7JzJk5Eo/WBokhQKtTcI/AAAAAAAAD_Y/7zCi7OPiyIk5YASpERlutUNPoSSD7AnIACLcB/s1600/fb-left.png") no-repeat scroll right center transparent !important;width:245px;height:225px;float:left;position:fixed;padding: 0 46px 0 5px;z-index:99999;top:30%;left:-250px;}
.bofblikebox div{background:#fafafa;margin-left:-8px;padding:0;border:4px solid  #3b5998;}
}
</style>
<div class="bofblikebox">
<div>
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2Fviralhax&amp;width=245&amp;colorscheme=light&amp;show_faces=true&amp;border_color=white&amp;connections=9&amp;stream=false&amp;header=false&amp;height=270" scrolling="no" frameborder="0" style="border: white; overflow: hidden; height: 215px; width: 245px;background:#fafafa;"></iframe>
</div>
</div>

Right Floating Facebook Like Box Widget Code

<script>
/*<![CDATA[*/
jQuery(document).ready(function() {jQuery(".bofblikebox").hover(function() {jQuery(this).stop().animate({right: "0"}, "medium");}, function() {jQuery(this).stop().animate({right: "-250"}, "medium");}, 500);});
/*]]>*/
</script>
<style type="text/css">
.bofblikebox{background: url("https://2.bp.blogspot.com/-Ehf_Yih8Tsc/WBokhSi7-NI/AAAAAAAAD_U/0azRzla8N_o5yXP5K1HqNVzHf12REf1HwCLcB/s1600/fb-right.png") no-repeat scroll left center transparent !important;width:245px;height:225px;float:right;position:fixed;padding: 0 5px 0 46px;z-index:99999;top:30%;right:-250px;}
.bofblikebox div{background:#fafafa;margin-right:-8px;padding:0;border:4px solid  #3b5998;}
}
</style>
<div class="bofblikebox">
<div>
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2Fviralhax&amp;width=245&amp;colorscheme=light&amp;show_faces=true&amp;border_color=white&amp;connections=9&amp;stream=false&amp;header=false&amp;height=270" scrolling="no" frameborder="0" style="border: white; overflow: hidden; height: 215px; width: 245px;background:#fafafa;"></iframe>
</div>
</div>

Note: Replace the highlighted “Viralhax” text with your Facebook Page username or ID.

Final Words

So, this was our guide on how you can add floating Facebook Like Box Widget to blogger. We hope this works perfectly for you. If you find it useful, then don’t forget to share it with others who are still finding it hard to add floating Facebook like box widget to blogger.

If anything goes wrong, then do let us know in the comment section below. We will try our best to get back to you.