Add a Facebook Page widget Pop Out in Blogger

Facebook is one of the most popular way to get traffic to your blog. You can place a pop out on your blog and get likes to your Facebook page. This is an easy way to get page likes as well as traffic from your Facebook page to your blog. Here is an attractive Facebook widget that pops out when any user drag the mouse cursor on it. When widget pop-out, the blog reader can LIKE your facebook page.

Add a Facebook Page widget Pop Out in Blogger

To enable this widget on your blog, you first need to have a jQuery plugin script in your blog template. To add a jQuery plugin;

1. Go to Blogger > Template > HTML > Proceed and check Expand Widget Templates
2. Search for this code
</head>
3. Add this code BEFORE it
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
4. SAVE your template
5. Go to Blogger > Layout > Add a widget and select HTML/Javascript widget
6. Copy-paste this code there
<style type="text/css">
/*<![CDATA[*/
#fbplikebox{display: block;padding: 0;z-index: 99999;position: fixed;} .fbplbadge {background-color:#3B5998;display: block;height: 150px;top: 50%;margin-top: -75px;position: absolute;right: -47px;width: 47px;background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8uMBQZBAE0QUT-ubogN-10rtTtrKTtmIVQ1OcOywYa05wgLBQirK4jcphfG3WNra5BNUSYefPcVbJ1MsnVzGjkU4xGux45p1woaj_Rvxwo6emIRjGpKyFJVZhKQHW55U2nNu-OMrzfFP4/s1600/w2b_vertical-left.png");background-repeat: no-repeat;overflow: hidden;-webkit-border-top-right-radius: 8px;-webkit-border-bottom-right-radius: 8px;-moz-border-radius-topright: 8px;-moz-border-radius-bottomright: 8px;border-top-right-radius: 8px;border-bottom-right-radius: 8px;} /*]]>*/
</style>
<script type="text/javascript">
/*<![CDATA[*/
(function(w2b){
w2b(document).ready(function(){
var $dur = "medium"; // Duration of Animation
w2b("#fbplikebox").css({left: -250, "top" : 100 })
w2b("#fbplikebox").hover(function () {
w2b(this).stop().animate({
left: 0
}, $dur);
}, function () { w2b(this).stop().animate({
left: -250
}, $dur);
});
w2b("#fbplikebox").show();
});
})(jQuery);
/*]]>*/
</script>
<div id="fbplikebox" style="display:none;"> <div class="fbplbadge"></div> <iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2FFOLSOL&width=250&height=250&colorscheme=light&show_faces=true&border_color=%23C4C4C4&stream=false&header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:250px;background:#F5EBF5;" allowtransparency="true"></iframe> </div>

1. Change the bold part with your Facebook username
2. Thats it!