Ravi Saive: A Technology Blog For Newbies

Yesterday, I have found a cool script online that will display floating Facebook Fan Page at right side of your website/blog. The script is based on jQuery and gives an excellent slider effect and that hides the Fan Page inside a container and opens it only when a user hovers the cursor on the floating button. So lets add this amazing floating Facebook fan page to your websites/blogs. I kept installation steps very easy, simply follow below steps correctly. I have attached screenshot of this widget. You can see Live Demo at right side of this page.

Floating Facebook Fan Page Preview

How To Add Floating Facebook Fan Page To Blogs

1. Go to your Design tab ---> Page Elements tab.

2. Click on "Add a Widget" then select "HTML/JavaScript" Widget.

3. Paste the following code inside it.

<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 class="w2bslikebox" style=""><div>

<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2Fravisaive.in&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 style="color:#333;">Widget by: <a style="color:#333; font-weight:bold" href="http://www.ravisaive.in">Ravi Saive</a></span></div></div>

4. Replace ravisaive.in with your Facebook Fan Page name.

5. Save your widget.

6. Go to your Blogger Dashboard click on ---> Design tab ---> Edit HTML tab.

7. Now click on Expand Template Widgets check box.

8. Search for </head> and just above it paste the following jQuery code. (Ignore this step if you already added jQuery script in your template).

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

9. Save your template and view your blog!

Hope this floating Facebook Fan Page would increase your Facebook readers. This code was developed by Harish and reshared at Ravi Saive.