Add Floating Facebook Like Box to Blogger

Hello Everyone,I hope all of you fine and leading a good life.Today I tell you how we add Floating Facebook Like box to blogger. Everyone know that Facebook is most used social media Platform.Facebook Has more 6 Billion User across the Global. It is very large amount of users.If you have a good amount of Your Facebook Page followers then it generates handsome visitors for you.

Live Demo

20 Different Styles Of Facebook fan box for Blogger.

Add Popup Facebook Like box to Blogger.

Add simple Facebook like box to blogger.

Add socialization widget to Blogger below post content.

Steps of Installation

Step 1 : Adding Jquery JavaScript Plugin(If you already add it then ignore it)

• Go to Blogger Dashboard >> Template  >> Edit Template
• Find the below code by Pressing CTRL+F

</head>

Paste below code above find code </head>

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

Step 2 : Adding Widget Code

• Go To Blogger Dashboard >> Layout >> Add a gadget
• Select HTML/JavaScript and Paste the below code in HTML/JavaScript Box

<script type="text/javascript"> //<!-- $(document).ready(function() {$(".w2bslikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);}); //--> </script> <style type="text/css"> .w2bslikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjohN54aVnWYls5okjdnXlUMK6DFNhoQo8EliT6AztC5iVfICrGTnqvzgYs9tJFKRi3HQB5X5WWz22QpkkxH_0gKRPslcnfzgYKvshMg6lK_EMvJJhD9ftEcQN1YovhOLkEVIcVBD-n6f-F/s150/w2b_facebookbadge.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%;} .w2bslikebox div{border:none;position:relative;display:block;} .w2bslikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;} .w2bslikebox span a{color: #808080;text-decoration:none;} .w2bslikebox span a:hover{text-decoration:underline;} </style><div class="w2bslikebox" style=""><div><iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2Fmybloggingacademy&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" scrolling="no" style="border: medium none; overflow: hidden; height: 270px; width: 245px;background:#fff;"></iframe><span>By <a href="http://mybloggersacademy.blogspot.com/">Blogging Academy</a> / <a href=" http://mybloggersacademy.blogspot.com"> Get This!</a></span></div></div>

• Replace "mybloggingacademy" with your page username
• Save and Your mission is complete.

If you have any Problem Please comment below or send us messages through contact us page.Your comments and Messages are appreciable for Us.Happy Blogging