Another New Floating Facebook Like Box For WordPress

facebook like box widgetRecently 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.

26 thoughts on “Another New Floating Facebook Like Box For WordPress”

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

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

      Let me know if you still face any issue!

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

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

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

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

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

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