Another New Floating Facebook Like Box Widget For Blogger !

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 Blogger ! This will Floating Facebook Button when to move your cursor on it it pop out with stylish floating facebook like box. This will help you to increase facebook likes. You just need to put small code to your blogger blog.  Currently this widget is only for Bloggeer/Blogspot blogs. We will soon share about WordPress in our next post. 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 For Blogger?

Live Demo

Add Floating Facebook Like Box Widget To Blogger !

  1. Go to Design > Page Elements.
  2. Click Add A Gadget.
  3. In Add A Gadget window, select the HTML/Javascript .
  4. Paste the following code inside it,
<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 Page URL or User name.

What’s Next !

Visit  your Blog to see it floating facebook like box at the right side of your webpage. I hope this widget surely helps you in increasing number of your Facebook Likes. The widget code is customized and improved by Ammar.

29 thoughts on “Another New Floating Facebook Like Box Widget For Blogger !”

  1. awesome buddy , it will make my blog more beautiful but i have question will it increase page loading speed because heavy java script is installed in it and my blog is already having few but important java scripts.

  2. The Error says
    No data received
    Unable to load the webpage because the server sent no data.
    Here are some suggestions:
    Reload this webpage later.
    Error 324 (net::ERR_EMPTY_RESPONSE): The server closed the connection without sending any data.
    what should i do?

  3. it looks so nice. i just got ur website and it seems very good.
    this widget background seems transparent which does not look good. so how to remove its transparency?

  4. For those who are facing problem after implementing above code please add below code into your HTML page above closing head

    1. Sign in to Blogger
    2. Go to your Dashboard>Design>Edit HTML
    3. Add this code above the closing tag in your HTML file:

  5. This is awesome! I was looking for this for quite some time. Thank you very much! Now I have one more request if I may ask? Could you give me this same widget but for Twitter? Cause I’ve seen websites with this same floating widget but for Twitter. Thanks in advance!

      1. sir,
        used the code in my website but for my facebook username it does not work but when i tried for other it worked my username is- nimtdewas
        it shows error “Could not retrieve id for the specified page. Please verify correct href was passed in.”

        1. Hi Sunjay,
          It works for PAGES only. You can’t like anyone’s profile ;) First go and create Facebook page than get a username. And than replace allbloggingtips to your page. It works :D

Leave a Comment

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.