How to add floating Facebook like box widget for Blogger

Having a Floating Facebook Like Box can help get more Facebook likes and make it easier for you to communicate to your fans and get some attention. 

Social media are needed a lot right now so here is how to do it really fast. 

Let me just say its a widget so you won't have to make any change in the template.

So let us start.

1. Login to Blogger account and go to Layout. 

2. Click on add gadget.

3. Choose to add HTML/JavaScrit

4. Copy the following code 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"> </script> <script type="text/javascript"> //<!-- $(document).ready(function() {$(".floatinglikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);}); //--> </script> <style type="text/css"> .floatinglikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR9ivyv9eNrDqiKuDzey0SmlA_1OHCxBJL8UJhV1Q4H0s2YBs04P6WYBa-5RCmFuLM5aos2z4qut9Egj2pAVk4Qjn5IWbZhYUyF6ATnTNJjxJwVeKAccJVdQMFxmpJUEMos8bcDAK8GWg/s1600/floatingfb.png") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 40px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:10%;} .floatinglikebox div{border:none;position:relative;display:block;} .floatinglikebox span{bottom: 10px;font: 10px tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;} .floatinglikebox span a{color: #808080;text-decoration:none;} .floatinglikebox span a:hover{text-decoration:underline;} </style><div class="floatinglikebox" style=""> <div> <iframe src="//www.facebook.com/plugins/likebox.php? href=https://www.facebook.com/wizardofdork&amp;width=251&amp;height=270&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23cccccc&amp;stream=false&amp;header=false&amp;" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:251px; height:270px; background:#fff;" allowtransparency="true"> </iframe></div></div>

5. Simply replace the marked page with yours.

And that is all. You have successfully installed your own floating Facebook Like Box for Blogger!

Find out more Blogger tips and SEO tools here:

How To Remove Blogger Navbar

How to remove powered by blogger

How to make a signature for your blog posts on blogger

How to remove: Subscribe Post to Atom for Blogger

How to create an about us page on Blogger

How to create custom contact form page for Blogger

How to add floating Facebook like box widget for Blogger