How To Add A Stylish Floating/Scrolling Facebook Like Box To Blogger With Customizations?

Hi friends, Today there are many stylish social widgets are available which help you to connect your blog or website to social media and one of these social widget is "Scrolling Facebook Like box ". Facebook scrolling like box is a great widget to increase your blog traffic.

This widget does not consumes any space in your blog, it only appears whenever a visitor touches the Facebook badge, this Facebook like box widget is easy to install and customize, so you can make it perfect for your blog by little efforts. This Facebook scrolling like box is surrounded by blue border which makes it different from other scrolling widgets. This widget looks like the Wordpress scrolling Facebook plugin which is also an amazing widget, this widget gives the same feeling like Wordpress plugin. The widget is perfectly working, i have tested it on some different templates but the results was same for every template i.e. working.

In this tutorial i am going to show you how to add this widget to your blog and also i will show you some customizations so that you can change this widget as per your requirements.

Also Read: Facebook Pop up like box widget for Blogger.

                                                              Live Demo

You can add this widget to your blog in following simple steps :

• Log in to your Blogger Account.
• Go to Dashboard >> Template >> Edit HTML.

• Now, Search for this code:

</head>

• And Paste this J- Query code just above it and click on the "Save Template" tab as shown in screenshot.

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

To Enlarge the images please click on them.

Note: You can leave the above steps if you have already installed the script.

•  Now again go to Dashboard >> Layout >> Add a gadget.

• Then select "HTML/JAVASCRIPT" and paste the below code in it as shown in screenshot.

<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/AVvXsEiHC7wjL4yov3wR9RQH0CkIwoJFi_GEyHcibtEMlljsx321-ZxLU7AFDbtE_Ae7VHPH7FhJlkC_6f7y7llS7Mlr7DnkZhyphenhyphenl1y1XdB5DlPS3id0jV5UiPXX4cvzbUrsp13w0aZaiNefz6WE/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%2FBlogGenes&amp;width=245&amp;colorscheme=light&amp;show_faces=true&amp;border_color=white&amp;connections=9&amp;stream=false&amp;header=false&amp;height=270" scrolling="no" frameborder="0" scrolling="no" style="border: white; overflow: hidden; height: 270px; width: 245px;background:#fafafa;"></iframe><span><a href="http://www.bloggenes.com/2013/07/how-to-add-stylish-floatingscrolling.html" target="_blank">Get This!</a></span></div></div>
     </div>
</div>

• Now save it and you are done.

Customizations:

• Replace the Name in red   with your Facebook fan page name.

Note: You have to use your Facebook fan page name as shown in your Facebook fan page URL. See screenshot below.

To Enlarge the images Please click on them.

• Replace the image URL shown in green   above if you want to add your own Facebook logo. 

 Note: If you want to use the logo shown in screenshot use this url :

"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjU2UXu2Zpe334pyN9vHI5lfzcVIftZ2Stswxl7Dw2WlXTK80962G_AnkGSzDIkyMwObsIXKYj3UPC1IQPXqsHT5WJxkveCob_s-vZJWF_kW-QDrHVtEOcCdbBo1LjGr9DgmdENxUM2BHw/s50/113543-facebook-facebook-logo-purple.jpg"

• Replace the HTML color code shown in pink   with your own color code or default color name to change the border color.

• To change the border width replace the pixels value shown in blue   color.

• To change the background color of the widget change the HTML color code in purple   .

Also Read:

• Floating Twitter follow us badge widget for Blogger.
• Do you like this article updated subscription and follow widget for Blogger.