Floating Facebook Like Box Widget For Your Website

Add a floating facebook like box to your blog or website. When you hover over the blue facebook image, the like box will then slide and reveal itself using jquery.This widget will help you to get more likes.

Add a floating facebook like box to your blog or website. The widget remains in a fixed position on the right-hand side of your site. When you hover over the blue facebook image, the like box will then slide and reveal itself using jquery.

Add Widget to your website

Follow these steps to Add this widget.

Go to Blogger

Take Backup of your Blog Template

Edit template

Search for </body>

Just Before </body> Paste following Code..

<!--Floating Facebook Widget by www.teezbuy.com -->
<script type='text/javascript'> /*<![CDATA[*/ jQuery(document).ready(function() {jQuery(".vktechzone").hover(function() {jQuery(this).stop().animate({right: "0"}, "medium");}, function() {jQuery(this).stop().animate({right: "-250"}, "medium");}, 500);}); /*]]>*/ </script> <style type='text/css'> .vktechzone{background: url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrHZACTjdmpnJ-cpUDuF2AyRFPol7CS_d2o3bvtAA2YjqVm6gVWiAAS9DO0nAmWsJmntl12-kDrjN9jj0rYsMu0vnHdcdGZAmP27Q9dGApaTI0P9jejV617dApGRQ48rB6x9_cS9_fC0x-/s1600/ABT_facebook_widget.png&quot;) no-repeat scroll left center transparent !important; float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;} .vktechzone div{ padding: 0; margin-right:-8px; border:4px solid #3b5998; background:#fafafa;} .vktechzone span{bottom: 4px;font: 8px &quot;lucida grande&quot;,tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;} .vktechzone span a{color: gray;text-decoration:none;} .vktechzone span a:hover{text-decoration:underline;} } </style><div class='vktechzone' style=''>
<div>
<iframe frameborder='0' scrolling='no' src='http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2Fteezbuy&amp;width=245&amp;colorscheme=light&amp;show_ faces=true&amp;border_color=white&amp;connections=9&amp;stream=false&amp;header=false&amp;height=270' style='border: white; overflow: hidden; height: 270px; width: 245px;background:#fafafa;color:000;'/><span><center>
<a href='http://www.teezbuy.com/' style='color:#a8a8a8;font-size:8px;'>Get Widget</a></center>
</span></div>
</div>
<!--Floating Facebook Widget by www.teezbuy.com-->

Note:-
Find http%3A%2F%2Ffacebook.com%2Fteezbuy.In this given above code Replace teezbuy with your facebook username

Add jQuery Code (If already using then Skip this step)

If the floating facbook widget is not working properly.Add this jQuery code to your website.
If jQuery code is already added to your website then skip this step.

Edit Website template

Search for </head>

Just Before </head> Paste following Code..

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

Conclusion

If you’re still having problems with the getting the facebook box to display properly, let me know. Comment below and I will be happy to assist you.