Professional facebook likebox

Facebook is a big social site.There are millions of users of Facebook .So every blog must have a facebook like box to get popularity and traffic.There are many ways to add facebook likebox in your blog.But today I am giving a facebook likebox which looks soo cool and every one likes them.

Live Demo:

Add  Professional Facebook Like Box Widget In your Blog

Adding this widget is very easy, just follow the steps below.

• Go to your Blogger Dashboard and select the blog in which you want to add this widget.

• Go to Design > Page Element.

• Add a new HTML/Javascript gadget and paste the below code in that gadget.

<style>.truebloggertricksFB {
width: 280px;
height: 150px;
border-radius: 3px;
position: relative;
background-color:#f4f4f4;
padding:5px 10px 15px 0;
}
.truebloggertricksFB, .truebloggertricksFB:before, .truebloggertricksFB:after {
background: #f4f4f4;
border: 1px solid #ccc;
}
.truebloggertricksFB:before, .truebloggertricksFB:after {
content: "";
position: absolute;
bottom: -3px;
left: 2px;
right: 2px;
height: 1px;
border-top: none;
}
.truebloggertricksFB:after {
left: 4px;
right: 4px;
bottom: -5px;
box-shadow: 0 0 2px #ccc;
}
</style>

<div class="truebloggertricksFB">
<div style="height:155px;overflow:hidden">
<fb:like-box href="http://www.facebook.com/TrueBloggerTricks" data-width="300" data-height="179" data-show-faces="true" data-border-color="#f4f4f4" data-stream="false" data-header="false" class=" fb_iframe_widget "><span><iframe id="f5741c08" name="fdd6ca2ec" scrolling="no" style="border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; overflow-x: hidden; overflow-y: hidden; height: 179px; width: 300px; " class="fb_ltr" src="http://www.facebook.com/plugins/likebox.php?border_color=%23f4f4f4&amp;channel=https%3A%2F%2Fs-static.ak.fbcdn.net%2Fconnect%2Fxd_proxy.php%23cb%3Df2babfba84%26origin%3Dhttp%253A%252F%252Fwww.btsnts.com%252Ff1ae6f85bc%26relation%3Dparent.parent%26transport%3Dpostmessage&amp;colorscheme=light&amp;header=false&amp;height=179&amp;href=https%3A%2F%2Fwww.facebook.com%2FTrueBloggerTricks&amp;locale=en_US&amp;sdk=joey&amp;show_faces=true&amp;stream=false&amp;width=300"></iframe></span></fb:like-box>
</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>

• Now replace the Facebook page URL with yours. URL is given in the code as https://www.facebook.com/TrueBloggerTricks. Paste your URL in place of Techsenser which is given two times in the code.

• Now save your gadget and view your blog.