How To Add Floating Facebook Fan LikeBox to Any Blog

Social Media is a great tool for bloggers who wish to gain extra traffic outside organic, direct and referral traffic.

Therefore building up a Facebook Fanbase using the facebook fanpage feature won’t be a bad idea at all.

This post would guide you through how to create a Floating and Slide Out Facebook Fan Linkebox on your WordPress or Blogger Blog like this image here.

One thing obvious about this box is that it would help convert your visitors into your Fans and readers because of its visibility.

Adding the Facebook Floating Fanbox to Blogger

Here is a step by step guide to add this to your blogger blog.

1. Login to your Blogger Dashboard. Right beside the blog you wish to add this to, click on the drop down men, select Layout > Add Widget > HTML/JavaScript .
2. A new window would pop up, in the Content area, copy and paste the below code.
   

   
<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("http://1.bp.blogspot.com/--tscpVzcBjo/TdUarKtcAlI/AAAAAAAAA3I/qVkypiYO9rc/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 style=""><div>
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2Foscarmini&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>Widget by:<a href="http://www.OscarMini.com">Blogging & WordPress Tips</a></span></div></div>


3. Then Click on Save.
4. Now go back to your blogger Home Dashboard, click the drop down button next to the blog, select Template > Edit HTML. Now tick the Expand Widget Templates checkbox.
5. Press Ctrl + F to search, then search for </head>
6. Right before it copy and paste this code
   

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


7. Click on Save Template.

And that’s how to add a floating Likebox to blogger. Visit your blog and see the effect. Now, let’s move over to how to add it to WordPress blogs.

Adding the Facebook Floating Fanbox to WordPress

Here is a guide to add this to your WordPress blog as well.

1. Login to your WordPress Dashboard. Locate Appearance on the Left sidebar, click on Appearance > Editor.
2. After the new page loads, Click on header.php on the right sidebar to load the header file.
3. Press Ctrl + F to search, then search for </head>
4. Right before it copy and paste this code
   

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


   Then click on Update File.

5. Now click on Appearance > Widgets, drag and drop a Text Widget to your sidebar, then copy and paste the below code in the wide 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("http://1.bp.blogspot.com/--tscpVzcBjo/TdUarKtcAlI/AAAAAAAAA3I/qVkypiYO9rc/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 style=""><div>
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2Foscarmini&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>Widget by:<a href="http://www.OscarMini.com">Blogging & WordPress Tips</a></span></div></div>


6. Then Click on Save.

And that’s how to add the Floating Slide Fanpage Likebox to your WordPress blog.

Note:: Remember to change oscarmini to your facebook fanpage username.

Here is a Demo to checkout what it looks like. It is located on the right sidebar of the Demo Page.