Add Sliding Facebook LikeBox To

How to add a pop out facebook like box with slide effect like as you see in the image above. Basically it uses JQuery effect for sliding.

The image floats on the left side of the page when you put your mouse pointer on it. The image slide has a facebook like box with a cool style.
To get a facebook sliding likebox like this one , just follow as below:

1. Login to your Wordpress Dashboard.
2. Navigate to Appearance > Widgets
3. Drag and drop a Text (Arbitrary text or HTML ) widget to the sidebar
4. Paste the following code inside it, if your facebook page URL is look like “http://www.facebook.com/NadoriNews” then use this 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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXtjlWNcUlORI8sv9f8VIVWoBoimKGVeBv2no8DGq8H2hGferWHAyAX60-rCf2OfB5cYmOyUxeWQjb2VneMQK2-tyLlfXqMOBpKj_9FPJWwTYpnnULuSkooLOreSK5hYCu4oedUyhWGXFa/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%2FNadorNews&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></div></div> 

Replace "NadorNews" with you page username. In case your facebook  Page URL  looks like

“http://www.facebook.com/pages/NadorNews/108875105862938″

Then better create a facebook username to your page by visiting this page  so as it will be like :

 http://www.facebook.com/NadorNews

After , come back to this post and continue the next job:

     5. Save your widget.
     6. Next In your theme options > Go to Head Code.
     7. Paste the code below in the head code box
   

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

   
       8. Click Save.
Visit your blog to see it working, I hope you enjoy.

Posted in: Blogger tricks