Add a pop out facebook like box with slide effect

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

 

Do You Like This Story..............?

Subscribe via Email

We will send you updates & Tutorials

Follow us!