How To Add Floating Facebook Like Box in Blogger

How To Add Floating Facebook Like Box in Blogger

       As  the saying goes "Sharing is Caring" I do believe it is true but when it comes to sharing your posts then you are caring for yourself. Everyone wants to share their posts on the social media sites. Sharing your posts to social media not only increases your Blog readers and fans But also it gives a good intuition on search engines. Nevertheless, Facebook and Blogger have made it effortless for you to increase the number of like on your Facebook page,. Source of getting Fans that is more likes on your page is the Facebook Like box For your Blog. But that like box was motionless.

Today we are at this point with perfectly different thing.  We are going to learn How To Add Floating Facebook Like Box in Blogger. In point of fact by adding this widget, a Facebook like box from the right corner will pop out, which looks real cool. This effect is achieved using jQuery.

 So here it is.

How To Add Floating Facebook Like Box in Blogger

Adding this widget is incredibly easy all you need to do is just follow the below in order to implant this Tutorial on your Blog.

Go to Blogger Dashboard.
Click on your Blog.
Now click on the Template tab as shown below.



Now click on the Edit HTML tab as shown below.




Proceed in the HTML coding.
Search for the </head> tag in the template coding ( by pressing CTRL+F you can find).
Copy the below jQuery script and paste it above the </head> tag.

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

Save your template.

If you are done with the above steps, then go to Layout tab.

Click on the Add a Gadget link as shown below.

A list of gadget will appear, pick the HTML/Javascript gadget from that list as shown below.

A box will appears, Now copy the below script and paste it in that HTML/JavaScript box.

<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/AVvXsEhgY6h_-xUJKlUBTuXNtAHs4IjI1KFYtmdLQ1XHWcCoazzSA6bkEmqpy5EbNc_fxCg1EFo63Ahg19wb6iN6DOwKgN3BQIAPr77DcnRfapqg5yN35ZhEaRQXJyAW5I1ocLQuFqzaPRN60s7k/s1600/facebookbadge.png") 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=https://www.facebook.com/central.alley&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><span> / <a href="http://shakdock.blogspot.in/2014/02/how-to-add-floating-facebook-like-box.html">Get This Widget! </a></span></div></div>

Customization Before Saving

- Now the last thing which you have to do is change the text in red to the URL of your page.

- Click on the save Button and you are DONE.

- If you have any trouble while adding this widget to your Blog just share your problem with us through the comment box, it will not spoil up! We are always here to resolve your problems.