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 »

12/14/2011 ,

55 comments

PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with 'Links' will be deleted immediately upon our review.
  1. AnonymousDec 14, 2011, 12:07:00 AM

    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. UnknownDec 14, 2011, 12:19:00 AM

    doesn't work brother
    thnx any way

    ReplyDelete
  3. wildrankDec 14, 2011, 12:18:00 PM

    Awesome dude...............


    Hack and Crack IDM

    ReplyDelete
  4. UnknownDec 14, 2011, 5:59:00 PM

    Got It!

    ReplyDelete
  5. wildrankDec 14, 2011, 6:23:00 PM

    @علي

    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
  6. Mohammad Mustafa AhmedzaiDec 15, 2011, 12:33:00 AM

    @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
  7. AnonymousDec 15, 2011, 1:40:00 AM

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

    ReplyDelete
  8. sauravDec 15, 2011, 11:51:00 AM

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

    ReplyDelete
  9. Hemant VermaDec 15, 2011, 11:56:00 AM

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

    ReplyDelete
  10. The MastahDec 15, 2011, 7:27:00 PM

    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
  11. Guppu BossDec 15, 2011, 8:33:00 PM

    This widget is orignally belongs to way2blogging.org
    HIDDEN

    ReplyDelete
  12. elviraDec 16, 2011, 6:44:00 AM

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

    ReplyDelete
  13. raviDec 16, 2011, 10:12:00 AM

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

    ReplyDelete
  14. Sushil KumarDec 16, 2011, 10:44:00 AM

    thanks sir..

    ReplyDelete
  15. Mohammad Samiul IslamDec 16, 2011, 1:34:00 PM

    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
  16. Guppu BossDec 17, 2011, 1:33:00 PM

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

    ReplyDelete
  17. Mohammad Mustafa AhmedzaiDec 17, 2011, 5:30:00 PM

    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
  18. D MindFreak MasumDec 20, 2011, 12:28:00 PM

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

    http://mediafiremovieloverz.blogspot.com/

    ReplyDelete
  19. UnknownDec 24, 2011, 10:17:00 PM

    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
  20. Shubham JainDec 29, 2011, 12:19:00 PM

    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
  21. Md Shadab AnsariJan 1, 2012, 5:53:00 PM

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

    Shadab

    ReplyDelete
  22. DannyJan 3, 2012, 2:56:00 PM

    @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
  23. VishuJan 5, 2012, 11:24:00 AM

    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
  24. Aguinaldo Gravidez lllJan 8, 2012, 6:47:00 PM

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

    ReplyDelete
  25. DNTJan 18, 2012, 7:29:00 PM

    how can I add this to phpbb3 forum

    ReplyDelete
  26. Mary Grace GloriaJan 19, 2012, 8:53:00 AM

    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
  27. AnonymousJan 30, 2012, 8:30:00 AM

    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
  28. Mack MichaelsFeb 4, 2012, 6:45:00 PM

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

    ReplyDelete
  29. mobil and pcFeb 17, 2012, 12:40:00 AM

    thanks

    ReplyDelete
  30. mobil and pcFeb 17, 2012, 12:43:00 AM

    This comment has been removed by the author.

    ReplyDelete
  31. Hindi Lyrics for BollywoodFeb 17, 2012, 4:04:00 PM

    Thanks A lot bro..

    ReplyDelete
  32. Jimmie LuthraFeb 22, 2012, 3:38:00 PM

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

    ReplyDelete
  33. AzlinaMar 8, 2012, 11:48:00 PM

    Thank a lot!

    ReplyDelete
  34. UnknownMar 9, 2012, 2:17:00 PM

    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
  35. AnonymousMar 17, 2012, 8:08:00 AM

    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
  36. MinieMar 24, 2012, 8:20:00 PM

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

    ReplyDelete
  37. YuvrajApr 6, 2012, 12:07:00 AM

    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
  38. KonstantinosMay 4, 2012, 4:45:00 AM

    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
  39. AnonymousMay 30, 2012, 7:50:00 AM

    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
  40. AnonymousJun 4, 2012, 6:06:00 AM

    thnx mohammed it works for me ... ;)

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

    ReplyDelete
  41. UnknownJun 8, 2012, 6:25:00 AM

    working but edited many things :(

    ReplyDelete
  42. UnknownJun 9, 2012, 3:30:00 PM

    i need help form u????

    ReplyDelete
  43. SABAJIJun 14, 2012, 7:40:00 PM

    Thanks dude its working awesome

    ReplyDelete
  44. UnknownJul 21, 2012, 12:56:00 PM

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

    ReplyDelete
  45. UnknownJul 23, 2012, 4:24:00 AM

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

    ReplyDelete
  46. Mr. ChetraJul 27, 2012, 7:47:00 AM

    Can we do the same this for tweeter?

    ReplyDelete
  47. YandiMar 10, 2013, 6:00:00 PM

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

    ReplyDelete
  48. YandiMar 10, 2013, 6:19:00 PM

    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
  49. beauty styles 2012Apr 8, 2013, 12:25:00 PM

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

    Like: boys hairstyles

    ReplyDelete
  50. Sonu Mirza LeoApr 15, 2013, 8:49:00 PM

    thank u sooooo much.....
    brother.............................

    ReplyDelete
  51. UnknownAug 5, 2013, 10:27:00 AM

    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
  52. Bitcoin AddictOct 6, 2013, 11:37:00 AM

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

    ReplyDelete
  53. The PhiloSo7hieNov 20, 2013, 5:08:00 AM

    it works very well, thank you bro

    ReplyDelete
  54. Karina CarlosAug 14, 2015, 10:20:00 PM

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

    ReplyDelete

Subscribe to: Post Comments ( Atom )