Create stylish and cute facebook like box for Blogger/WordPress

All we need to place a beautiful facebook like box in our blog so that one can easily like the page and get connected with your blog posts. Recently i have posted an article regarding how to add facebook official like box in Blogger. Although this widget is widely used and also its an official like box so many of bloggers recommend it. But some times it does not suit with the template and we need a good looking widget which can enhance the overall Blog beauty.

facebook like box for blogger
stylish facebook likebox for Blogger

Why to choose this widget ?

  • Simple coding with better Look.
  • Flexible in size, means one can easily customize the size by increasing or decreasing length and width.
  • Easy installation process

How to Install :

  • Go to Blogger Dashboard
  • Click on Layout
  • Click on Add a Gadget
  • Select Html/Javascript
  • Place the following code and then after click on save
<style>
.facebookOuter {
width: 270px;
height: 150px;
border-radius: 3px;
position: relative;
background-color:#f4f4f4;
padding:5px 10px 15px 0;
}
.facebookOuter, .facebookOuter:before, .facebookOuter:after {
background: #f4f4f4;
border: 1px solid #ccc;
}
.facebookOuter:before, .facebookOuter:after {
content: “”;
position: absolute;
bottom: -3px;
left: 2px;
right: 2px;
height: 1px;
border-top: none;
}
.facebookOuter:after {
left: 4px;
right: 4px;
bottom: -5px;
box-shadow: 0 0 2px #ccc;
}
.facebookInner {
height:155px;
overflow:hidden;
}
</style>

<div class=”facebookOuter” style=”float:left;”>
<div class=”facebookInner”>
<div class=”fb-like-box”
data-width=”300″ data-height=”179″
data-href=”http://www.facebook.com/a1bloggerseo
data-border-color=”#F4F4F4″ data-show-faces=”true”
data-stream=”false” data-header=”false”>
</div>
</div>
</div>
<div id=”fb-root”></div>
<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_US/all.js#xfbml=1”;
fjs.parentNode.insertBefore(js, fjs);
}(document, ‘script’, ‘facebook-jssdk’));
</script>

  • Change http://www.facebook.com/a1bloggerseo with your facebook page url.
  • You are done . Feel free to drop a comment if you like this widget or you having any issue.

Know How to install this Facebook widget in wordpress.

Comments

  1. says

    This is really something! Nice idea! Thanks a lot sharing these easy steps for creating one and I will install it in mine blogs too one of these days. 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *