How To Add Floating Facebook Like box in Blogger

How To Add Floating Facebook Like box in Blogger

In this tutorial, i will show you how you can add a beautiful,stylish Facebook floating like box in Blogger. It looks beautiful and visitors can like your page simply by hovering mouse on it and click on like button.

See the live preview of Floating Facebook like box in Blogger by clicking the button below:

Live Preview

Step 1: Go To Google Blogger and log in to your Blogger Account.
Step 2: After logging in to your account go to Layout tab.

Step 3: After going in Layout Tab, Click on Add a Gadget.

Step 4: A new pop-up will open, and scroll down and choose HTML/Javascript. Click on the "+" button next to it.

Step 5: After that a new box will open, and you will see two text boxes there. One for Title and one for Content. Leave the title blank and paste the following code in Content Area.

<script type="text/javascript"> /*<![CDATA[*/ jQuery(document).ready(function() {jQuery(".abtlikebox").hover(function() {jQuery(this).stop().animate({right: "0"}, "medium");}, function() {jQuery(this).stop().animate({right: "-250"}, "medium");}, 500);}); /*]]>*/ </script> <style type="text/css"> .abtlikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiI10E2RLtJH2jEjXvcCVLjqUTC1ELWVaaFDOoNpywWAhdZtp0S0PYEx6EBBT-OWc-DiWsez7Gt55cp8DRiOvUR6qFkYjMTrTfmx2Yt31gACLZ647vh7oWNL3gKaVdd1FC-vzDYuc3Q8Ik/s320/fb1-right.png") no-repeat scroll left center transparent !important; float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;} .abtlikebox div{ padding: 0; margin-right:-8px; border:4px solid #3b5998; background:#fafafa;} .abtlikebox span{bottom: 4px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;} .abtlikebox span a{color: gray;text-decoration:none;} .abtlikebox span a:hover{text-decoration:underline;} } </style> <div class="abtlikebox" style=""> <div> <iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2FMakeYourBlogNice&width=245&colorscheme=light&show_faces=true&border_color=white&connections=9&stream=false&header=false&height=270" scrolling="no" frameborder="0" scrolling="no" style="border: white; overflow: hidden; height: 270px; width: 245px;background:#fafafa;"></iframe><span>Widget by :<a href="http://www.makeyourblognice.blogspot.com"> MYBN</a></span> </div> </div>

Step 6: Now, While copying code from here, you will see that i have highlighted an area "Make Your Blog Nice", which is actually my Facebook page username. You have to replace it, with your Facebook page username. (If you do not have any Facebook username, i will recommend you to take a username instead of doing some changing in code. Username will also help your users to know about your official page)

Step 7: Just change the username of the page with your page's username and paste it in content area and click on Save.

Step 8: Now you're almost done, but it's possible that your Floating Like box not works! This is because some blogger templates have jQuery installed and some do not have jQuery. To install jQuery in your blog template, Go To Template tab, Click on Edit HTML. Now click in the code area and press CTRL+F and a search box will come, Type </head> in the search box and press Enter, and paste this code just above the </head> and click on Save Template and you're done.

This Code:

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

If you want to do some extra changing like changing the Facebook image, you can do it very easily.

To change the image: Replace The Image URL that is highlighted in the code.