Tuesday, 7 February 2017

4 Best Facebook Like Box For bloggers

Facebook is one of the largest social media platforms in this recent internet world, and it has been maintaining the leads for the past couple years, especially when it comes to rating the best social platform that drive you not ordinary but also targeted traffics for both blog and website's owners, and even not limited to many companies that grow their brands via internet.

As a blogger, facebook can take your brand to a whole different level in terms of unlimited targeted and stable traffic, and also rapid sales of your products, if only you know how to use it effectively, and these are the major reasons why we bloggers love to engage and promote our new and updated contents on facebook.

In this tutorial I will be providing 4 different facebook widgets that can increase your popularity on the web.

1. Normal Sidebar Facebook like widget.

This widget is suitable for all position on your blog, but most preferably on your sidebar. The widget will look like this:

Configuration: Now go to your dashboard (blogger dashboard) and click layout >> add widget >> HTML/Javascript.

Inside that html/java script, copy and paste below code and hit save. and you are done.

Note: You should change my facebook ID to your own by changing the color green text in the code, then, you can also change the widget size by editing the yellow text in the code. Enjoy your like box widget!

<iframe src="//www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/bloggerwallet&amp;width=470&amp;height=250&amp;amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=false&amp;" style="border: none; height: 250px;overflow: hidden; width: 290px;"></iframe>

2. Floating Sidebar Facebook Widget.

This widget is a floating sidebar facebook like box in which when you move mouse or cursor on it, it is going to display your facebook page for like, it is very perfect and also fit all design. the widget looks like this:

Configuration: Go to your dashboard and click layout >> add widget >> html/javasript, then copy and paste below code inside it and hit save button and you are done. dont forget to change my facebok ID highlited in green color to yours.

<script type="text/javascript"> /*<![CDATA[*/ jQuery(document).ready(function() {jQuery(".theblogwidgets").hover(function() {jQuery(this).stop().animate({right: "0"}, "medium");}, function() {jQuery(this).stop().animate({right: "-250"}, "medium");}, 500);}); /*]]>*/ </script> <style type="text/css"> .theblogwidgets{background: url("http://3.bp.blogspot.com/-TaZRLv66f8g/UoMnTyTbF6I/AAAAAAAAAGY/U4qcf-SP6d0/TheBlogWidgets_facebook_widget.png") no-repeat scroll left center transparent !important; float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;} .theblogwidgets div{ padding: 0; margin-right:-8px; border:4px solid #3b5998; background:#fafafa;} .theblogwidgets span{bottom: 4px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;} .theblogwidgets span a{color: gray;text-decoration:none;} .theblogwidgets span a:hover{text-decoration:underline;} } </style><div class="theblogwidgets" style=""><div> <iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2Fbloggerwallet&width=245&colorscheme=light&show_faces=true&border_color=white&connections=9&stream=false&header=false&height=270" scrolling="no" frameborder="0" scrolling="no" style="border: white; overflow: hidden; height: 270px; width: 245px;background:#fafafa;color:000;"></iframe><span><center></span></div></div>

3. Pop Up facebook Like Button Widget.

This widget is an amazing facebook like widget that encourages your blog user to like your page, you can call it call to action. it pops up whenever somebody visit your site and it is very portable and easier to close. the widget is going to look like this:

Configuration: Go to your blog dashboard and click layout >> add widget >> html/javascript, then copy and paste below code inside html/javascript box then hit save and that's all. do change my facebook ID with yours

<!-- Widget by www.bloggerwallet.com start --><link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /><script src="http://code.jquery.com/jquery-1.9.1.js"></script><script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script><link rel="stylesheet" href="/resources/demos/style.css" /><script>$(function() { $( "#dialog" ).dialog(); }); </script> <div id="dialog" title="Get updates via Facebook"> <center> <iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fbloggerwallet&width=292&height=258&show_faces=true&colorscheme=light&stream=false&show_border=true&header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:285px; height:258px;" allowtransparency="true"></iframe></center> <center style="float:right; margin-right:10px;"> <!-- Please don't remove credit --><span style="font-size:xx-small; color:#000; text-decoration:none;">Get this gadget at</span> <a target='_blank' style="font-size:xx-small; color:#3B78CD; text-decoration:none;" href="" rel="nofollow">facebook popup like box</a></center> </div> <!-- Widget by www.bloggerwallet.blogspot.com End -->

4. Bottom Floating Facebook Like widget.

Lastly, this widget is small but mighty, it is very effective as readers can like your page with one single click, it doesn't distract your blog design. this widget is going to look like this:

Configuration: Go to your blog dashboard and click TEMPLATE >> EDIT TEMPLATE , then search for </style> in your template and paste below code just above it.

#open-fb{background-color: #FFFFFF; border: 4px solid rgb(210, 210, 210); bottom: 0; border-bottom: 0; float:left; height: auto; margin-bottom: 0; margin-right: 5px; position: fixed; right: 0; width: auto; z-index: 10;} .close-fb{color: #333!important; position: absolute; top: 1px; right: 1px; width: 20px; height: 20px; line-height: 20px; text-align: center; font-size: 11px;} .slideUp{ animation-name: slideUp; -webkit-animation-name: slideUp; animation-duration: 1s; -webkit-animation-duration: 1s; animation-timing-function: ease; -webkit-animation-timing-function: ease; visibility: visible !important; } @keyframes slideUp { 0% { transform: translateY(100%); } 50%{ transform: translateY(-8%); } 65%{ transform: translateY(4%); } 80%{ transform: translateY(-4%); } 95%{ transform: translateY(2%); } 100% { transform: translateY(0%); } } @-webkit-keyframes slideUp { 0% { -webkit-transform: translateY(100%); } 50%{ -webkit-transform: translateY(-8%); } 65%{ -webkit-transform: translateY(4%); } 80%{ -webkit-transform: translateY(-4%); } 95%{ -webkit-transform: translateY(2%); } 100% { -webkit-transform: translateY(0%); } }

copy and paste below code just above </body> in your template and hit save. and that's all.

<div class='slideUp' id='open-fb'> <a class='close-fb' href='#close-fb-like-box' onclick='hide(&apos;open-fb&apos;)' title='Close'><i class='fa fa-times'/></a> <div class='fb-like-box ' data-header='false' data-height='62' data-href='https://www.facebook.com/bloggerwallet' data-show-faces='true' data-stream='false' data-width='187'><span style='height: 62px; width: 187px; '><iframe allowTransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fbloggerwallet&amp;width=187&amp;height=62&amp;show_faces=false&amp;colorscheme=light&amp;stream=false&amp;border_color&amp;header=true' style='border:none; overflow:hidden; width:187px; height:62px;'/> </span></div></div> <script type='text/javascript'> function show(target) { document.getElementById(target).style.display = &#39;block&#39;; } function hide(target) { document.getElementById(target).style.display = &#39;none&#39;; } </script>

Thank you for reading this tutorial, i hope you are going to enjoy all the widgets, if you need my help when setting it up, just let me know in the comment box and if you have done it successfully, you should also let us know your experience with these widgets.

Do like and share this tutorial with friends that might need something like this.

Previous Post
Next Post

Authored by:

Hey! I'm Abdulrazaq Olatunji, CEO and content editor at this blog, I always derived much pleasure in paving beginner's way. I writes based on topics related to SEO, tutorial for both wordpress and blogspot, blogging motivational articles and all other blogging tips and trick such as practical guides on how to make money blogging. I'd love to see you some other times.