Floating Facebook Like Box Widget For Blogger
Today in this tutorial, I will show you how to add a Floating Facebook Like Box on your blogger.
Facebook like box widget will allow a user to like your Facebook fan page easily and you can increase your follower on Facebook page. It’s also help to increase traffic on your site because when you will publish any post then you post reached to your fans.
This is a simple floating Facebook like box widget for blogger which will expand on mouse hover. You can float this like box on the left or right side of your blogger blog. This is a great way to highlight your Facebook fan page and increase Facebook like.
This small snippet will not only work on blogger even you can use this for your WordPress blog too. We know that Facebook is the most popular social networking site. Every day million of people visit Facebook. After adding a Facebook like box widget on your blog, your Facebook presence will improve than before.
Adding Floating Facebook Like Box Widget For Blogger
Before adding the floating Facbook like box widget on your blog, you must have check that your blog is jquery enabled or not. so follow the below step to check jquery enabled or not.
Step 1. Log in to you Blogger account, go to “Theme” option and Click on “Edit HTML” button.
Step 2. Press (CTRL+F) button from keyboard and type < /head > in the search box and press “Enter Key” as shown in figure.
Step 3. Copy Below “Code” and Paste Above the” < /head >” tag.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'/>
Step 4. Now click on “save theme”
Step 5. Go to “Layout” option then click on “Add a Gadget” After then click on “HTML/Java Scrip” and Paste below code in that Box.
Left Floating Facebook Like Box Widget Code
<script>
/*<![CDATA[*/
jQuery(document).ready(function() {jQuery(".bofblikebox").hover(function() {jQuery(this).stop().animate({left: "0"}, "medium");}, function() {jQuery(this).stop().animate({left: "-250"}, "medium");}, 500);});
/*]]>*/
</script>
<style type="text/css">
.bofblikebox{background: url("https://3.bp.blogspot.com/-DsrAs5TBmo0/XKeQEEOwtnI/AAAAAAAAB1k/_RkvBH8YJmUuyk1B5oaIQN01MP8xakGOACLcBGAs/s1600/fb-left.png") no-repeat scroll right center transparent !important;width:245px;height:225px;float:left;position:fixed;padding: 0 46px 0 5px;z-index:99999;top:30%;left:-250px;}
.bofblikebox div{background:#fafafa;margin-left:-8px;padding:0;border:4px solid #3b5998;}
}
</style>
<div class="bofblikebox">
<div>
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2Fkeytosuccessbyrajeev&width=245&colorscheme=light&show_faces=true&border_color=white&connections=9&stream=false&header=false&height=270" scrolling="no" frameborder="0" style="border: white; overflow: hidden; height: 215px; width: 245px;background:#fafafa;"></iframe>
</div>
</div>
Right Floating Facebook Like Box Widget Code
<script>
/*<![CDATA[*/
jQuery(document).ready(function() {jQuery(".bofblikebox").hover(function() {jQuery(this).stop().animate({right: "0"}, "medium");}, function() {jQuery(this).stop().animate({right: "-250"}, "medium");}, 500);});
/*]]>*/
</script>
<style type="text/css">
.bofblikebox{background: url("https://1.bp.blogspot.com/-QAR2Vd9AqIM/XKeRTN6bjvI/AAAAAAAAB1w/iuYw3hGTzYQAtLZHdQIS7-4oRXg41ndPACLcBGAs/s1600/fb-right.png") no-repeat scroll left center transparent !important;width:245px;height:225px;float:right;position:fixed;padding: 0 5px 0 46px;z-index:99999;top:30%;right:-250px;}
.bofblikebox div{background:#fafafa;margin-right:-8px;padding:0;border:4px solid #3b5998;}
}
</style>
<div class="bofblikebox">
<div>
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2Fkeytosuccessbyrajeev&width=245&colorscheme=light&show_faces=true&border_color=white&connections=9&stream=false&header=false&height=270" scrolling="no" frameborder="0" style="border: white; overflow: hidden; height: 215px; width: 245px;background:#fafafa;"></iframe>
</div>
</div>
Note: Replace the highlighted name “keytosuccessbyrajeev” with your own Facebook page name or ID.
Related
Conclusion
I think you have chosen your desired floating Facebook like box widget for blogger. Adding this widget is easy way. I hope this widget is working properly on your blog. If not then please leave a comment with you issue. I will get back to you very soon. If you like this floating Facebook like box then please share this.