Add Labnol.org style Facebook Like Box to Blogger

Facebook is now a part of our life. There are million of peoples who addicted with it, and they can't live without opening Facebook. Facebook has number of disadvantages and advantages that we all know so, let's look into just advantages of Facebook and get benefit from it. You can be benefited by Facebook if you are a blogger. Just create a fan page of your blog on Facebook and increase likes. and then share the stuff you write on your blog with your fans.

Labnol.org style Facebook Like Box Widget for Blogger

One of the fastest way of increasing your Facebook likes is that you have to put a like box widget to your blog. Facebook like box widget will help you to convert your blog visitors into your fans at same time it will be useful to make your one time reader to returning readers of your blog.

Generally, you can find Facebook like box widget from Facebook that officially provides codding for it. but it looks very simple that most of the blogger are not satisfied with it and uses modified with CSS facebook like box to their blogs. You may noticed 3D style facebook like box on Labnol.org ? it looks beautiful and stylish, i just love it, and also i am using the same Facebook like box on this blog that you can see at the top on sidebar of this blog.

Also see : Add Floating Social Sharing Buttons Below Blogger Post Titles

If you would like to have the same Facebook like box on your blog as well then follow the simple and easy steps given below :

How to Add This to Blogger?

Go to Blogger Dashboard > Layout > Add a Gadget > Choose HTML/Javascript from the list
Copy and paste below code into it

<style>.mdFB{
width:320px;height:150px;border-radius:3px;position:relative;background-color:#f4f4f4;padding:5px 10px 15px 0;max-width:96%}.mdFB,.mdFB:before,.mdFB:after{background:#f4f4f4;border:1px solid #ccc}.mdFB:before,.mdFB:after{content:"";position:absolute;bottom:-3px;left:2px;right:2px;height:1px;border-top:none}.mdFB:after{left:4px;right:4px;bottom:-5px;box-shadow:0 0 2px #ccc}
</style><div class="mdFB"> <div style="height:160px;overflow:hidden"> <fb:like-box href="https://www.facebook.com/bloggerwidgetgenerators" data-width="340" data-height="189" data-show-faces="true" data-show-border="false" data-stream="false" data-header="false"></fb:like-box> </div></div><div id="fb-root"></div><span style='font-size:11px;position:absolute;'><a href='http://www.bloggerwidgetgenerators.com/' target='_blank' title='Blogger Widget by Blogger Widget Generators'>Blogger Widgets</a></span>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1&appId=549510788403215";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>


Now, Replace my Facebook fan page URL with yours and Finally, Save your widget

That's it !!

0 comments:

Post a Comment