17 January 2013

Facebook Floating Like Box for Blogger


facebook boxAdding some awesome widget including social widget give your blog some extra preference.So,today we're going to share the  slideout/floating Facebook like box for blogger blogs which is very easy to use and can be useful for those who want to make their blog more attractive by adding different social media widgets to different parts of their blogs. This widget is very unique one and can be found on many websites and blogs on the web. It only appears when someone will hovers it. Otherwise, it will be shrinking it right/left side of your blog's body. You can change it's position Right side to left side as well. But keeping it on right side is better for human eyes. 

This widget has already been shared by many bloggers, but we're just re-sharing it with you for expanding it to more users. This widget is built within JavaScript, CSS, HTML and JQuery. It can be more useful for you if you've a decent amount of Facebook likes for your blog i.e more than 1000. Now let's start adding it to blogger.How to Add Floating Facebook Like box to blog?Follow simple steps below and add this widget.

 Must Read : Customize Blogger GFC Widget

Add Floating Facebook Like Box on blogger

  • Navigate to Blogger >> Layout >> Add a Gadget >> Select HTML/JavaScript Gadget
  • Add an HTML/JavaScript Widget and paste below code tag within that

<script type="text/javascript"> //<!-- $(document).ready(function() {$(".tthlikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);}); //--> </script> <style type="text/css"> .tthlikebox{background: url("http://1.bp.blogspot.com/--tscpVzcBjo/TdUarKtcAlI/AAAAAAAAA3I/qVkypiYO9rc/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%;} .tthlikebox div{border:none;position:relative;display:block;} .tthlikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;} .tthlikebox span a{color: #808080;text-decoration:none;} .tthlikebox span a:hover{text-decoration:underline;} </style><div class="tthlikebox" style=""><div> <iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2FTechTrickHome&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></div></div>

  • Now save the widget and you're almost done.

After adding the above code now search(ctrl+f) for this tag </head> in your Template  and above it paste the below code.

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


There are two customization you can do with this widget, the first one is changing TechTrickHome  with your Facebook's page user name and the second is float:right; if you wish that widget to appear at left side then change the property right to left like float:left; 

 Must Read : Advance Mashable Box Blogger

That's all.You're all done.Now just go to your blog and see that newly made widget.Don't forget to share your view about that widget. 

Articles You May Like

14 comments: Leave Your Comments

  1. This is actually really nifty... Hmmm, I'm thinking of putting it up, but I guess I got a lot of widgets already floating around.But this could come in handy! Thank you! :)

  2. I do search such stuffs, and hopefully if I'd be changing my blog's face... this will be applied. thanks for this helpful tip! :)

  3. useful widget indeed to get more fans

  4. nice post thanks for posting bro!!
    please add more likethat again!
    i love this blog!
    get 1000 facebook likes

  5. I followed everything. I changed it to my Facebook fan page name but it does not appear. Even before, TechTrickHome did not appear. Please help, thanks!

    1. Just post your facebook fan page url here and I'll try to fix the problem.

  6. THis is something that I'm not really digging. When I come across blogs that have these, I get kinda annoyed coz it's very in your face and gets in the way of browsing. :(

  7. it is not showing in left even after doing all....help

  8. Thanks.......
    Useful tutorial.

  9. looking awesome on my blog techstick.blogspot.com
    but how to get rid of the link
    Read more: http://www.techtrickhome.com/2013/01/facebbok-floating-like-box-for-blogger.html#ixzz2XXc1nndd
    shown in the widget
    thanks in advance

    1. Just checked your blog and it's working fine there,I guess you already solve it. :)

  10. 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 same work in my website www.studentxclusive.com. You really explained how to install floating Facebook like box. Nice work Dude.

    Thank You very much :)