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&width=245&colorscheme=light&show_faces=true&connections=9&stream=false&header=false&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&width=245&colorscheme=light&show_faces=true&connections=9&stream=false&header=false&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
Loved it Faiz and liked your site a lot. Would appreciate if you could share this tutorial with blogger users at MBT. Drop me a mail if it could me done with blogger
Muhammad Mustafa bhai you don’t know how happy and excited i m you have comment at my site its a great pleasure for me inshallah soon i will write it for blogger @ MBT