Professional Magazine Blogger Templates Read More ×

Monday, May 16, 2016

Sidebar Floating Facebook Like Box For Blogger

JSC Result 2016

www.nuedubd.com/jsc16

JSC Result 2016 will publish on 31th December 2016 Under Ministry of Education, Bangladesh. Check Your JSC Exam Result 2016 FAST!
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...
SHARE THIS
Subcribe for our all latest news and updates

Subscribe Now

Previous Post
Next Post
Monetize your website traffic with yX Media
True Mag

4 comments:

  1. Replies
    1. bro, its still working. check our live demo.

      Delete
  2. 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