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.


We’re always adding new tools and apps. Sign up to receive our newsletter.

Privacy Policy: We hate SPAM and promise to keep your email address safe.

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 154 awesome articles for us.

 
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.

  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.

  9. i’ve put it on my website, and it’s work.. thanks

  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.

  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

  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.

    • Ammar Ali says:

      This widget was only available for blospot users. But I converted in to WP as well.. Now This is available for both. You can see the blogger version here.

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

    • Ammar Ali says:

      Search for “float : right” in above code and replace it with left. :)

      Let me know if you still face any issue!

  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

  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