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">
 jQuery(document).ready(function() {jQuery(".abtlikebox").hover(function() {jQuery(this).stop().animate({right: "0"}, "medium");}, function() {jQuery(this).stop().animate({right: "-250"}, "medium");}, 500);});
 <style type="text/css">
 .abtlikebox{background: url("") 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;}
 <div class="abtlikebox" style="">
     <iframe src=";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>

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=""></script>

9. Click Save.

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

Article by

A blogger, web designer, front-end developer and WordPress expert since 2011. I started this blog during high school. I鈥檝e gone from 0 to $3,000+ per month all in my spare time. Here I share what I've learned so far and what I continue to learn through blogging so that I can be of assistance in some way to improve your blog. Interested?

Ammar has written 166 awesome articlesfor us.

Comment below, let me know what do you think?
  1. says

    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!

  2. says

    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

  3. Nirav says

    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!

  4. 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.

      • says

        It means i was quite right in this case. Your basically come on wordpress from blogger. its really awesome progress, Congratulation.. for this growth.

  5. Andrew says

    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.

  6. Adil says

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

  7. Gautam says

    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.

  8. Masroor Aijaz says

    I even didn’t add the header code but still my floating facebook like box works.

  9. says

    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.

  10. says

    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….

Leave a Reply

Your email address will not be published. Required fields are marked *