Add Rounded Facebook Like Box

Every blog have their own facebook like page, and they put Like box in their blog/website also. Like box Shows face of people who liked your blog and recent stream with like counter, so everyone loves to display it in their page. Now a day's social media plays greater role to promote your blog/website or business. There are several plugin by facebook. Like box, Recomandation box, Recent activity box, like button, send button and etc. By default facebook Like box comes with normal design and including Link text to facebook plugin page, but we can design it using some css tricks. In our Previous post we already talked about advance facebook like box and Floatingfacebook like box. In this post I'll tell you how to add rounded facebook like box to your blog. 

Demo

See the demo of rounded facebook likebox Click Here. Do you Hit like there? :)

How to add?

Its simple to add this widget. Go to your Dashboard >> Design / Layout >> Add New widget does not matter any place you can choose and choose html/javascript copy the code from below and paste.

<style type="text/css">
.facebookOuter {
width:248px;
padding:10px 0px 10px 10px;
height:230px;
border-top:5px solid #CCCCCC;
border-right:5px solid tomato;
border-bottom:5px solid #cccccc;
border-left:5px solid tomato;
border-radius: 0px 30px 0px 0px;
background: url('http://i48.tinypic.com/2w5iwbl.jpg');
overflow:hidden;
border-radius: 120px;
}
.facebookInner {
height:250px;
width: 238px;
border-radius: 0px 13px 0px 0px;
overflow: hidden;
}
</style>
<div class="facebookOuter">
<div class="facebookInner">
<div class="fb-like-box"
data-width="270" data-height="300"
data-href="http://www.facebook.com/pokharatech"   
data-border-color="wheat"  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>

Costomization

Customization is simple for rounded facebook like box, Simply Replace pokharatech with your facebook username. All done !

From the Editor's Desk

How is this widget? is there any thing to improve? i would like to hear from you,  i will be here with many other usefull stuff, till then stay blessed, Peace and Happy blogging.