Floating Facebook LikeBox For Blogs

floating facebook likeboxI found a script online that adds a floating Facebook button to right side of your blogs or websites. The button upon clicking slides towards left revealing a Facebook Like Box. It is an excellent coded slider that Hides the Likebox inside a container and reveals it only when visitors hovers the cursor on the floating button. A wordpress version of the widget will also be shared today inshAllah. You can use the same code to add it to your websites or any webpage you may have. So lets add this cool Floating Like Box to your blogger blogs.

UPDATE: Find the Wordpress Version Here

Live Demo

Add Floating Likebox To Blogger

  1. Go To Blogger > Design > PageElements
  2. Click on "Add a Gadget"
  3. Choose HTML/JavaScript Widget
  4. Paste the following code inside it,

<script type="text/javascript">
$(document).ready(function() {$(".w2bslikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});
<style type="text/css">
.w2bslikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPrGuW1qfs04KYnqnZY7ubYzLv12St1LshRJZpUscA7A0GTBtb3EOfMYVp5PYqyVfdey5IGH8s0l6KexI9E0eB2qxXO9_zRWZoTMOgPzAzttkP4qQXuT5WSuEBYXOXnHvAsbQMMkmEpPTM/s150/w2b_facebookbadge.pn") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}
.w2bslikebox div{border:none;position:relative;display:block;}
.w2bslikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
.w2bslikebox span a{color: #808080;text-decoration:none;}
.w2bslikebox span a:hover{text-decoration:underline;}
</style><div class="w2bslikebox" style=""><div>

<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2Fbloggertricks&amp;width=245&amp;colorscheme=light&amp;show_faces=true&amp; connections=9&amp;stream=false&amp;header=false&amp;height=270" scrolling="no" frameborder="0" scrolling="no" style="border: medium none; overflow: hidden; height: 270px; width: 245px;background:#fff;"></iframe><span>Widget by:<a href="http://www.MyBloggerTricks.com">My Blogger Tricks</a></span></div></div>


If you have not yet created a Facebook Username to brand your Fan Page then create it in seconds by clicking this link Once your create a username then replace bloggertricks with your newly created username

    6.  Save your widget

    7.  Now go To Design > Edit HTML

    8. Search for <head> and just below it paste the following JQuery code, (You can ignore this step if Jquery Link is already added in your template)

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/>

9.  Save your template and you are all done!

Visit your Blogs to see it floating at the right side of your webpage. I hope this widget helps you in increasing the number of your Facebook Readers. The widget code was created by Harish and reshared at MBT.

Need Help?

If you wish to change the width or hight of the Likebox or make the image changes then do let me know.  Peace pals! :)

If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »


We have Zero Tolerance to Spam. Chessy Comments and Comments with 'Links' will be deleted immediately upon our review.
  1. can v do the same for twitter?? and plzz bhai tell me do u know any sites that provide sponsorships, giveaways or contests to promote not some directories i'll mai you few sites as example...

  2. doesn't work brother
    thnx any way

  3. @علي

    dude just replace fan page url in above code carefully ..dont just edit fan page name in above code as told by Mohammad,becoz some page contain number also in fan page url like 168480899835197

    This is my fan page url :
    [ https://www.facebook.com/pages/Hacking/168480899835197 ]

    in code it ll looks like
    [ http%3a%2f%2fwww.facebook.com%2fpages%2fhacking%2f168480899835197 ]

    @Mohammad : bro pls make changes in your above article.

    My latest Post :
    Hack Facebook Account

  4. @Niketan Patil

    Yeh I have mentioned that if you have not yet applied for a facebook username then you do it first and then apply the code. Read last lines of Step#5 buddy. :)

  5. thnx I Love You Mustafa ++

  6. That WAs nice.. অনেক ভাল লাগল... ধন্যবাদ...

  7. thnnxx bro i used ur tricks nd widget for my blog and round about all r working thnnxxxxx.

  8. Mustafa, why does this widget looks the same like the one who post about this widget first on his blog?


  9. This widget is orignally belongs to way2blogging.org

  10. need this to float from right to left and the position need to be more on top

  11. its working great. i applied it on my site www.thefunbooster.com

  12. This is too amazing!!! The fan page gadget was taking too much space on my blog. Also, it looked out of place. But now, this looks incredible! So professional. Dude, you are too good! :D

  13. @Ashiq Hassan sliding twitter follower widget is awesome
    Collection of Beautiful HD wallpapers

  14. I am glad you all liked it buddies. :)

    @ahmad @Danial
    I already mentioned in the post that we only reshared it but didn't created it pal. We have attached credits to the real coder

  15. thanks a lot.... i created mine... :))


  16. sir i got my ans but on my blog facbook button is not giving any responce it is just following the cursor not responce on clicking on it
    please help

  17. Sorry I can't got you my fan page of facebook is down can you send me a html link for mine website

    fan page of facebook : http://facebook.com/computerguru97
    My website : http://greatcomputerworld.blogspot.com/

  18. I want to add it in left side of my blog..... Can u tell me How to?


  19. it does not work for me, i have done as you have said but it only shows facebook logo and it floats but nothing gets display, have a look here

  20. @Mohammad help it works if i add that jquery but, the post slider is not working when i add that jquery what to do....

    my site link - www.csk247.blogspot.com

    help me plsss......

  21. hi...bhai first time its working good .. but idk where is the main problem now its not working .plz check my blog page and help me out plz http://jaycutlerbest.blogspot.com

  22. nice post... it work on my site http://aguinaldogravidezlll.blogspot.com/

  23. how can I add this to phpbb3 forum

  24. mine doesn't work .....it says "Could not retrieve id for the specified page. Please verify correct href was passed in."

    what should i do???? http://gracegloria08.blogspot.com

  25. Hello Mahammad,

    Nice Blog! I tried to install it in my blog. But it is not working for some reason. It used to work before but when I tried installing facebook jquery pop-up box from your site, everything went wrong. Again I tried installing at least this. But No Luck!

    Please Help Me!

    Appreciate your time.

  26. Hey, how do you reduce the size of the widget on the left margin without creating an empty gap on the right edge.

  27. This comment has been removed by the author.

  28. Really nice dude, Hope you don't mind me making a tutorial for my own blog (I'll give credit and backlink)

  29. I saw the Demo and it was not like the one you described here. how can i use the one on the Demo Page?

  30. Thanks for the widget. I have applied it in my blog. I shall be grateful if you kindly give me the html code of google join this site widget.

  31. My Gosh I did it! thanks very very much Mohammad you are awesome!!

  32. Nice article ... there is a tool to create floating social media button you can create floating social media bar for free http://floatingsocialmediabuttons.com/

  33. i cant understand it wos working and now it stopped working ??
    Do you have any idea what happend??
    Cause Its still the sign of facebook but it doesnt show me who likes me

  34. that's not working for me on my hompage, i've already used the jquery for my homepage slideshow, when i copy Jquery code, my slideshow doesn't work,then if i didn't copy, my slideshow works well, but the floating facebook didn't,
    can you solve it
    please visit my blog


  35. thnx mohammed it works for me ... ;)


  36. working but edited many things :(

  37. Thanks dude its working awesome

  38. thanks buddy , nice blog for gaming

  39. Thanks for such an awesome Articles.
    I added it on my site: http://best-entertainers.com/

  40. Can we do the same this for tweeter?

  41. Assalamu'alaykum thanks for tips, I permite to copy code for my little blog. Thank's very much

  42. Assalamu'alaikum I want edit code too, because I like stream in facebook likebox, without faces photo profil (because its haram). So i permission to editing some code,Thanks

  43. Thanks for these great information.I am so glad after getting these nice information from here.

    Like: boys hairstyles

  44. thank u sooooo much.....

  45. Hi,
    I am Searching for this floating FACEBOOK LIKE box for a long time. I have read so many post in this website. I have don same work in my website http://www.studentxclusive You really explained how to install floating Facebook like box. Nice work Dude.

    Thank You very much :)

  46. simple and fast added into my blog
    check mine

  47. Can you help me with step 8? I am a beginner and can´t seem to find "head" :/