You may have added a facebook like box to your website for your page but they are just simple without any effect. In this tutorials i will tell how to add a popout facebook like box with slide effect when some one over his mouse on the facebook image/badge. It use a simple jquery hover effect to slide. As you see a static facebook image badge at right side of the page For a demo try to mouse over this badge and you will see the image badge poping out with a cool effect , let see how to do this. 1. Login to your wordpress dashboard

Adding The Head Code

2. Add below code to the head of your wordpress website/blog and save it (if you dont know how to add code to the head section then 1st read the tutorial how to add head code in wordpress)

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

Adding The Widget code

3. Navigate to Appearance > Widgets 4. Drag and drop a Text (Arbitrary text or HTML ) widget to the sidebar. 5. Adding the code to this text widget. if your facebook page URL is look like "http://www.facebook.com/risepks" then use this code

<script type="text/javascript">// <![CDATA[ // < ![CDATA[ // < ![CDATA[ $(document).ready(function() {$(".fbplikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);}); // ]]></script> <div> <div><iframe style="overflow: hidden; height: 270px; width: 245px; background: none repeat scroll 0% 0% #ffffff;" src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2Frisepks&amp;width=245&amp;colorscheme=light&amp;show_faces=true&amp;connections=9&amp;stream=false&amp;header=false&amp;height=270" frameborder="0" scrolling="no" width="320" height="240"></iframe><a href="http://www.risepk.com/posts/fb-popout-likebox/">Get This Widget!</a></div> </div>

Replace "risepks" with you page username. In case your facebook  Page URL is in the form "http://www.facebook.com/pages/NEELAM-MUNEER/106066352757384" use this bit of code

<script type="text/javascript">// <![CDATA[ // < ![CDATA[ // < ![CDATA[ $(document).ready(function() {$(".fbplikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);}); // ]]></script> <div> <div><iframe style="overflow: hidden; height: 270px; width: 245px; background: none repeat scroll 0% 0% #ffffff;" src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2Fpages%2FNEELAM-MUNEER%2F106066352757384&amp;width=245&amp;colorscheme=light&amp;show_faces=true&amp;connections=9&amp;stream=false&amp;header=false&amp;height=270" frameborder="0" scrolling="no" width="320" height="240"></iframe><a href="http://www.risepk.com/posts/fb-popout-likebox/">Get This Widget!</a></div> </div>

You have to replace "NEELAM-MUNEER" and "106066352757384" with your once. you can get them by comparing it with  your facebook page URL "http://www.facebook.com/pages/NEELAM-MUNEER/106066352757384" Click save. Do let me know how useful was this tutorial for you. if you are confused feel to ask by dropping a few line of comment i will try to help you. Take care! User Tags :- Add Static Facebook Pop Out Like Box to wordpress, Add a pop out facebook like box with slide effect, stylish facebook badge, sliding facebook like box, like box with cool effect