Another New Floating Facebook Like Box For WordPress

by Ammar Ali on May 11, 2012 · 24 comments Follow me on Twitter

Recently 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 !

Go to Dashboard > Appearance > Widgets > Available Widgets.
Drag Text widget into a sidebar.
Paste in the code.
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>Widget by :<a href="http://www.AllBloggingTips.com"> All Blogging Tips</a></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 . Hope you enjoy the post.

If you enjoyed this article, get email updates (it's FREE).

Article by Ammar Ali

I'm +Ammar Ali Part time Blogger, young Entrepreneur, Affiliate marketer and Student. Read more about me. You can connect with me on Twitter, Facebook.

Ammar has written 122 awesome articles for us.

Follow @AllBloggingTips

Google+

Write for us Guest Post?