Add Floating Facebook Like Box For Your Blog

Add Floating Facebook Like Box For Your Blog

Comments: 4
facebook like box

Floating Facebook Like Box is now old concept. Just for completeness of a Tutorial blog site I am sharing this trick. Usually we place a Facebook Like Box at the sidebar or in template’s footer. Its aims to be a blog or website make well-known and ultimately it will help to increase traffic. However, if we just mouse over on widget then it will be visible, when we will take away then it won’t be visible. If help for those website who has insufficient space in sidebar or footer. Another features of this floating Facebook like box that you can change any background you like.  Just  follow the below steps to make Floating Facebook Like Box in your Blog Template.

Jquery Plugin For Floating Facebook Like Box

Step 1 Log in to your Blogger Account and Go to your Blogger Dashboard

Step 2 Now click on -> Template -> Edit HTML

Step 3 Now Find this code </Head> by pressing Ctrl + F

Step 4 Copy the below code and Paste it Before/above </Head>

<script type="text/javascript"> src=""

Note: Skip This step if you have already installed Jquery Plugin in your template.

HTML Code For Floating Facebook Like Box

Step 1 Go to your Layout tab.

Step 2 Click on "Add a Gadget" then select "HTML/JavaScript" Gadget.

Step 3 Now Copy the below code and paste it in "HTML/JavaScript" Gadget and Save it.

<script type="text/javascript">
$(document).ready(function() {$(".floatinglikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});
<style type="text/css">
.floatinglikebox{background: url("") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 40px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}
.floatinglikebox div{border:none;position:relative;display:block;}
.floatinglikebox span{bottom: 10px;font: 10px tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
.floatinglikebox span a{color: #000000;text-decoration:none;}
.floatinglikebox span a:hover{text-decoration:underline;}
</style><div class="floatinglikebox" style=""><div><iframe src="//;width=251&amp;height=270&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23cccccc&amp;stream=false&amp;header=false&amp;appId=159468740772399" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:251px; height:270px; background:#FEFEFE;" allowtransparency="true"></iframe><span><a href="" target="_blank">+Get This!</a></span></div></div>


  • Change BloggerSpice with your Facebook Id
  • Change FEFEFE for background color. You can select color code from Here.

Related Post

Speak Your Mind

Manabadi Resultt says: 4/09/2013

brother its not working on my blogger blog my url is

Mohammad Fazle Rabbi says: 4/10/2013

I just tried to visit your site but can't enter. Anyway if you have the below code 2 times in your template then it won't work.

so try to find out duplicate one. Hope it will work. Any further problem feel free to leave comment.

juboraj nowfel says: 7/19/2013

It's working bro..

bhoot ahmed bhoott says: 7/02/2014

Facebook Group Community Code ConverterHide Code Converter Show EmoticonHide Emoticon

If you Got questions? Ask ’em below! While we’re here, you might like to leave a comment and let me know if you have any stories or questions.

Make sure you tick the Notify Me box below the comment form to be notified of follow up comments and replies. Thank you for commenting

Contact Form


Email *

Message *