How to get a Floating Facebook Like Box on Blogger

Today I was searching for a Facebook widget for my blog and Here is an interesting Facebook widget which I found on Internet, It's really great and attractive. It's actually a floating box with Facebook logo on it, When you hover mouse pointer on it, A like box appears with a slide.

facebook slide widget

It looks awesome, Doesn't take time to load and really attractive. This widget will sure bring lots of likes on your blog fan page, I really liked it and I've personally used it on my blog.

live demo button

For a Live Working Demo, Click the button below.

Do you want to get this widget for your own Blog? Today In this Post I'll show you How to get it. This widget belongs to MBT

Things You'll Need

  • A Facebook Fan Page with Username.
  • A Blogger Blog
  • Few Minutes time 
Before we can begin, You should have a facebook fan page with custom username.(example: If you don't have it yet then Click Here for a tutorial.

How to Get Floating Facebook Like Box

Step 1: From Blogger Dashboard, Go to Design > Page Elements.


Step 2: Now Click on Add a Gadget and choose HTML/Javascript Widget.

html javascript widget

Step 3: Now Paste the following code inside the widget.
<script type="text/javascript">
$(document).ready(function() {$(".w2bslikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});
<style type="text/css">
.w2bslikebox{background: url("") 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=";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: 255px; width: 245px;background:#fff;"></iframe><span></div>

Step 4: Now Just Replace thearea51blog with your own facebook username (eg: and Save Widget.

Step 5: Again Go to Design Tab > Edit HTML

blogger dashboard

Step 6: Now Add the following Script just below the <head> in your Template.
<script src='' type='text/javascript'/>
Step 7: Click on Save Template.

Now you'll see a facebook logo on right side of your blog, Hope you liked this Tutorial, I tried to make it as simple as I can. So please Share it with your Friends using the widget on left.

Please Like our facebook page if you liked this Turorial.

Credits: This Widget Belongs to and the code was developed by Harish from Thanks to these guys for creating such cool widget.

About Jimmie Luthra

Jimmie Luthra is a Mariner, Tech enthusiast, Blogger and Gadget reviewer. He is fond of technology and is usually found playing with some piece of tech. He is also a Guitarist, Music lover & fitness freak.
    Blogger Comment
    Facebook Comment