Sidebar Floating Facebook Like Box For Blogger

Sidebar Floating Facebook Like Box For Blogger

Sidebar Floating Facebook Like Box For Blogger

Sidebar Floating Facebook Like Box For Blogger - is a widget for adding a like box on blogger in sidebar. Facebook like box for website or blogspot is a important widget to increase fan page like. You can easily grow up your facebook fan page like using facebook like box. Today i am share awesome and beautiful facebook like box for website. This a sidebar floating facebook like box. When visitors mouse hover in facebook icon, then it Floating and open a like box from sidebar. This script i founded around internet. But i customize this script with CSS and get up an awesome look. You can add this code also any wordpress blog.

Also Read: Flat Popup Facebook Like Box Widget for Blogger

Facebook like box widget pay an important role on every blog. We know, facebook is the largest social networks. You may get a huge number of traffic form facebook if you have a big number of fan. Facebook like box for blogger is the easiest way to promote your fan page with your visitors.

Floating Facebook Box for Blogs

In this tutorial i will show you, how to add facebook like box to blogger. Every one looking for different and attractive widget for his/her blog. You may find different type of facebook like box widget for blogger. example: Popup facebook like box ( if you interested to add popup facebook like box to blogger then check out this widget: Flat Popup Facebook Like Box Widget for Blogger ). From my opinion sidebar floating facebook like box for blogger is the best widget.

MS Design BD always published different and attractive blogger widgets for blogspot. We always share customized attractive and beautiful blogger widgets for blogspot blogger. So, floating facebook like is also a different type of blogger widget. This widget is totally customized facebook like box with css.


Sidebar Floating Facebook Like box for Blogspot

To add this beautiful facebook like box for blogger, at first your have to need add jQuery in your blog (if already added, then ignore it). Now go to Blogger Dashboard > Template > Edit HTML find and past below code before </head>
 <script src='//code.jquery.com/jquery-1.10.2.min.js' type='text/javascript'/> 

Now Save Template

Below steps are adding floating facebook like for website or your blogspot blog. Add below codes on widget.

Step1: Go to your blogger dashboard Layout > Add a Gadget and find HTML/Javascipt
Step2: Copy the below codes and past on HTML/Javascipt
 <script type="text/javascript"> 
//<!-- 
$(document).ready(function() {$(".msfslikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);}); 
//--> 
</script> 
<style type="text/css"> 
.msfslikebox{background: url("http://i.imgur.com/pQGrWuH.png") 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%;} 
.msfslikebox div{border:none;position:relative;display:block;} 
.msfslikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;} 
.msfslikebox span a{color: #808080;text-decoration:none;} 
.msfslikebox span a:hover{text-decoration:underline;} 
</style><div class="msfslikebox"><div>
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2Fmsdesign.rtml&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"  style="border:4px solid rgb(53, 102, 203); overflow: hidden; height: 266px; width: 240px;background:#fff;"></iframe></div></div> 


Note: msdesign.rtml change it with your facebook page user name.

After adding above codes, if this widget does not work, then make your that did you have in your template fb-root. If not, then add fbAsyncInit right after <body> from below.
 <div id='fb-root'/>
<script type='text/javascript'>
//<![CDATA[
window.fbAsyncInit = function() {
FB.init({
appId : '878599892159456', // replace with your app id
status : true, // check login status
cookie : true, // enable cookies 
xfbml : true // parse XFBML
});
};
(function() {
var e = document.createElement('script');
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
//]]>
</script> 
Save Template and now see result.

If you found any problem then obviously inform me on comment section. Happy blogging and keep sharing my posts. Thanks...
Previous Post
Next Post

post written by:

TemplateMark better known as Template Market provides High quality free and premium Blogger templates. If you running a blog with Blogspot platform, then you can choose more than 20+ free blogger templates for your blog. TemplateMark provides free version of every template. You can highly choice TemplateMark for your digital blog.

5 comments:

  1. It's working. But, dont you think it against adsense rule, because sometimes when you scroll its on top of the ad. Check it out on http://www.jobinformant.com/.

    Please also reply my mail

    ReplyDelete
  2. It's work! thanks so much :) if the color of the box can be a little bit darker blue will be perfect! because the color is not the same as FB's blue.

    Anyway good job already, thanks :D

    ReplyDelete