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);});
//-->
</script>
<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>


http://www.Facebook.com/Blogger-Tricks/981736126312983612

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 »

56 comments

PLEASE NOTE:
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...

    ReplyDelete
  2. doesn't work brother
    thnx any way

    ReplyDelete
  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

    ReplyDelete
  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. :)

    ReplyDelete
  5. thnx I Love You Mustafa ++
    http://hackinghumans.blogspot.com

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

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

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

    http://www.way2blogging.org/2011/06/add-static-facebook-pop-out-like-box.html

    ReplyDelete
  9. This widget is orignally belongs to way2blogging.org
    HIDDEN

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

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

    ReplyDelete
  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

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

    ReplyDelete
  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

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

    http://mediafiremovieloverz.blogspot.com/

    ReplyDelete
  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
    rahul

    ReplyDelete
  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/

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

    Shadab

    ReplyDelete
  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
    http://green-tv.blogspot.com

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

    ReplyDelete
  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

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

    ReplyDelete
  23. how can I add this to phpbb3 forum

    ReplyDelete
  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

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

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

    ReplyDelete
  27. This comment has been removed by the author.

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

    ReplyDelete
  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?

    ReplyDelete
  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.
    partha

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

    ReplyDelete
  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/

    ReplyDelete
  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

    ReplyDelete
  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

    zulkhamsyahmh.blogspot.com

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

    http://3alam-1.blogspot.com/

    ReplyDelete
  36. working but edited many things :(

    ReplyDelete
  37. Thanks dude its working awesome

    ReplyDelete
  38. thanks buddy , nice blog for gaming
    http://jtggames1.blogspot.in/

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

    ReplyDelete
  40. Can we do the same this for tweeter?

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

    ReplyDelete
  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
    how-to-o.com

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

    Like: boys hairstyles

    ReplyDelete
  44. thank u sooooo much.....
    brother.............................

    ReplyDelete
  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 :)


    ReplyDelete
  46. simple and fast added into my blog
    check mine
    http://fullyworkingtricks.blogspot.com

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

    ReplyDelete