Bloggers Ezine

• Tweet
• Sharebar

• Tweet

This can be a good idea to add a like box floating on right side of your webpage/blog page. Below steps are very simple to add this to your WordPress blog. The benefit is that you add more hover effect and more animation resulting the increased attention of visitors on different sections of a webpage. You can see on many sites there are sliding facebook like box in your WordPress or blogspot site. Whenever a mouse comes on facebook image the likebox with faces pops out. Example can be seen on right side.

Steps to insert sliding facebook like box :

1. Add below code before the </head> tag of your blog. Go to Dashboard click Editor and Header on right side list. In the code you will find </head> tag where you paste this code:

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

2. Go to widgets and add new Text widget and copy and paste below code and save. Visit your blog or website and you will see sliding like box.

NOTE: Please change the word bloggersezine by name of your page. If you don’t have username you can create one for your page by visiting this page.

<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%2Fbloggersezine&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.MyBloggerTricks.com”>My Blogger Tricks</a></span></div></div>

Tags: facebook plugin, how to, like plugin, sliding Facebook Like Box, wordpress