Another New Floating Facebook Like Box For WordPress

Another New Floating Facebook Like Box For WordPressRecently we shared simple yet stylish floating facebook like box widget. Now we came with Another New Floating Facebook Like Box Widget For WordPress ! This will Floating Facebook Button when to move your cursor on it it pop out with stylish floating facebook like box. Its widget for WordPress. You can find floating facebook like box here.  Now lets move to how you can add this in blogger I will show you How You Can Add Another New Floating Facebook Like Box Widget To WordPress?

Add Floating Facebook Like Box Widget To WordPress !

  1. Go to Dashboard > Appearance > Widgets > Available Widgets.
  2. Drag Text widget into a sidebar.
  3. Paste in the code.
  4. Save.
<script type="text/javascript">
 /*<![CDATA[*/
 jQuery(document).ready(function() {jQuery(".abtlikebox").hover(function() {jQuery(this).stop().animate({right: "0"}, "medium");}, function() {jQuery(this).stop().animate({right: "-250"}, "medium");}, 500);});
 /*]]>*/
 </script>
 <style type="text/css">
 .abtlikebox{background: url("http://4.bp.blogspot.com/-mMtB2ANqowQ/T6es-PuSR2I/AAAAAAAAAjM/LDamrUnMJJc/s320/fb1-right.png") no-repeat scroll left center transparent !important; float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index:  99999;position:fixed;right:-250px;top:20%;}
.abtlikebox div{ padding: 0; margin-right:-8px; border:4px solid  #3b5998; background:#fafafa;}
.abtlikebox span{bottom: 4px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
 .abtlikebox span a{color: gray;text-decoration:none;}
 .abtlikebox span a:hover{text-decoration:underline;}
}
</style>
 <div class="abtlikebox" style="">
     <div>
     <iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2Fallbloggingtips&amp;width=245&amp;colorscheme=light&amp;show_faces=true&amp;border_color=white&amp;connections=9&amp;stream=false&amp;header=false&amp;height=270" scrolling="no" frameborder="0" scrolling="no" style="border: white; overflow: hidden; height: 270px; width: 245px;background:#fafafa;"></iframe><span></span>
     </div>
 </div>

5. Click on Save button and done !

Note:-Replace allbloggingtips With Your Facebook User name.

5. Save your widget.

Now this is most important part. If you missed it the widget will not works.

6. Goto Appearance > Editor

7. Than goto > Header.php

8. Now Place below code just before <head>

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

9. Click Save.

Now Visit your blog to see it that its working :D. Hope you enjoy the post.


Article by

Hi! I'm +Ammar Ali Part time Blogger, young entrepreneur, affiliate marketer and student. I help people in bulding a profitable blog easily. Read more about me. You can connect on Twitter, Facebook.

Ammar has written 146 awesome articles for us.

Write for us Guest Post?

Comment below, let me know what do you think?

26 Comments so far add one

  1. Really like this like box, will there be any effect on page loading speed if we add this ?

  2. Thanks for the code, I have been wanting a floating box but haven’t been able to find one I like.

  3. Thanks for the share Ammar. Can we use HTML 5 like box in that code?

  4. Really impressed by watching your improvement,when you published(25/01/2012) your first slide out facebook like box the number of your facebook fans was 66 and now(11/05/2012) on this version it is 364.Keep going bro.Best of luck….

  5. It’s look like arscode-social-slider-free plugins!

  6. Thank you for sharing good practices. Good advice is always good to take. Great article, I will try to increase my ranking on Google with these tips.

  7. Masroor Aijaz says:

    I even didn’t add the header code but still my floating facebook like box works.
    Masroor Aijaz recently posted..HTML5Press : The Best WP Theme I’ve ever Seen!My Profile

  8. hi Ammar i liked your way for this facebook like box without plugin so out hosting a/c not much load for other java scripts.
    thanks for this code.
    Gautam recently posted..best 10 android rpg gamesMy Profile

  9. i’ve put it on my website, and it’s work.. thanks
    dika recently posted..Free NAUGHTY AMERICA Premium Account updated 26 July 2012My Profile

  10. please specify how to put in facebook user name. whenever i am putting in my page name.its generating an error

  11. I think I discovered why it stopped working but would love a work around. I really love your code. I made a post that contained a youtube video and it stopped working. After i removed the post it started working again.
    Andrew recently posted..Today’s ProverbsMy Profile

  12. Hi. I saw that you have done exactly the same as I did over 1 year ago that is already adapted for WP, please take a look http://wordpress.org/extend/plugins/be-it-facebook-sidetab/ if you guys still have problems with this.

    Regards

  13. Great tutorial Ali,
    Was easy to follow and looks great on my blog !
    Thanks
    Phil M recently posted..5 Free Tools That I Would Recommend To Every BloggerMy Profile

  14. rakesh kumar says:

    Hello Ammar, if i am not wrong this code was originally belong to bloggers. You just customized it for wordpress. Am i right ? This really create an awesome feelings.
    rakesh kumar recently posted..3 installing wordpress blunders that can ruin your wordpress blog SEOMy Profile

  15. Thanks , it`s working good. But i want to put left side of my blog. Where should i changed in code.

  16. Hi Ammar! Wow this is so awesome. I think I like the feel of this widget compare to the ones I saw before. I’m not code savvy but this post is super helpful! Thanks so much! Just put it on my blog.

    xx Donah
    Sweet Jelly Bean
    Donah recently posted..Nude Magique BB Blush Review and SwatchesMy Profile

  17. Hey! first, everything go marvelous!!! thanks a lot by the code. But i have a cuestion… how can i do the same but with a twitter teets box?

    again, your code was perfect!
    see ya!

Speak Your Mind

CommentLuv badge