How To Add Sliding Floating Facebook Like Box In Blogger

Today's post is about Facebook pop up like box. Now a days many webmasters and blogger used to increase their Facebook fan page traffic in short period of time. Facebook pop up like box gain a popularity day by day and it become well and well known widget in 2013. You might have observed that many bloggers and webmasters promoter their blog or website in different ways and styles. But many of them used this widget and it will surely increase their Facebook fan page traffic and also helps to increase blog traffic. This widget is used widely throughout the world by many bloggers and webmasters to increase their the Facebook fan page popularity. The widget Facebook pop up like box is made is created with the help JavaScript, HTML, CSS and JQuery.

Also Read: Facebook Like Box Plugin For Blogger Blog

How To Add Sliding Floating Facebook Like Box In Blogger ?

Follow the simple below steps.

• Login to blogger dashboard.
• Click on Layout >> Add a Gadget >> Html JavaScript Gadget.
• Copy the below code and paste inside Html.

<script type="text/javascript">
//<!--
$(document).ready(function() {$(".w2bslikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});
//-->
</script>
<style type="text/css">
.w2bslikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0vr2QJuhqoP1HETzR3UHuWRE9hOwrMqwDR5W1kh0XJwvxFYIlKmp0eslDimZgxKMippOKeXwITdC226vQKURCtlL78gVZxgaib3abMbJNEzGFW_AgFEizs_EwuNUDHalA4tKhgTQ_f09C/s150/w2b_facebookbadge.pn") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}
.w2bslikebox div{border:none;position:relative;display:block;}
.w2bslikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
.w2bslikebox span a{color: #808080;text-decoration:none;}
.w2bslikebox span a:hover{text-decoration:underline;}
</style><div class="w2bslikebox" style=""><div>
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2F703586603041868&amp;width=245&amp;colorscheme=light&amp;show_faces=true&amp; connections=9&amp;stream=false&amp;header=false&amp;height=270" scrolling="no" frameborder="0" scrolling="no" style="border: medium none; overflow: hidden; height: 270px; width: 245px;background:#fff;"></iframe></div></div>

• Click on save button.
• Now again goto blogger dashboard.
• Goto Template >> Edit Html.
• Find </head> and paste the below code just before/above it.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/>

Now you done all and save your template, so visit to your blog you will see a Facebook pop up like box no the right side of your blog home page.

 Customization

There are two customization in this widget the first one is change 703586603041868 with your Facebook fan page username, and second one is if you want to see this widget of left side then simply change float: right to float: left and you done it.