Add Floating Facebook Like Box in Blogger | | Always at your Services

Add Floating Facebook Like Box in Blogger

Many tutorial gives you how to add floating facebook like button. Now I came up with new tutorial for adding floating like box to blogger. This is a great way which requires almost no space and it looks more attractive than that of simply keeping the like box.

Adding Jquery Plugin
1. Sign in to Blogger
2. Go to your Dashboard>Design>Edit HTML
3. Add this code above the closing </head> tag in your HTML file:
<script src="" type="text/javascript">

Ignore this step if you have added Jyquery plugin to your blog.

Adding Widget Code
1. Go to Design>Add a Gadget>HTML/JavaScript
2. Add This code to HTML/JavaScript Widget
<script type="text/javascript">
$(document).ready(function() {$(".floatinglikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});
<style type="text/css">
.floatinglikebox{background: url("") 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:20%;}
.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="//;width=251&amp;height=270&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23cccccc&amp;stream=false&amp;header=false&amp;appId=159468740772399" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:251px; height:270px; background:#fff;" allowtransparency="true"></iframe><span><a href="" target="_blank">+Get This!</a></span></div></div>

Replace, with your Facebook fan page URL.

Before replacing URL, replace these symbols:
: with %3A
/ with %2F

for example, if your URL like this:
It will look like this:

Feel free to share with us if you have any problem.Comment


  1. plzzzzz upload video plzzzzzzzzzz

  2. Video !!! its a simple script video requirements in is...Join us on

  3. I love the social media bar that floats on the right hand side of your website... care to share how to get it? :)

  4. will post asap...betwn chk out & for regular updates