Add a pop out facebook like box with slide effect

Written by risepk on . Posted in Tips and Tricks

Facebook Popout boxYou 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
Related Posts Plugin for WordPress, Blogger...

Tags: , , , ,

Trackback from your site.

Comments (2)

  • Mohammad Mustafa Ahmedzai

    |

    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

    Reply

    • Anonymous

      |

      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

      Reply

Leave a comment

Contact us

We're not around right now. But you can send us an email and we'll get back to you, asap.

Questions, issues or concerns? I'd love to help you!

Click ENTER to chat
%d bloggers like this: