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>
.DHIbloggerFB {
width: 280px;
height: 150px;
border-radius: 3px;
position: relative;
background-color:#f4f4f4;
padding:5px 10px 15px 0;
}
.DHIbloggerFB, .DHIbloggerFB:before, .DHIbloggerFB:after {
background: #f4f4f4;
border: 1px solid #ccc;
}
.DHIbloggerFB:before, .DHIbloggerFB:after {
content: "";
position: absolute;
bottom: -3px;
left: 2px;
right: 2px;
height: 1px;
border-top: none;
}
.DHIbloggerFB:after {
left: 4px;
right: 4px;
bottom: -5px;
box-shadow: 0 0 2px #ccc;
}
</style>
<div class="DHIbloggerFB">
<div style="height:155px;overflow:hidden">
<fb:like-box href="https://www.facebook.com/DIGITALHUBINC" 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&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&colorscheme=light&header=false&height=179&href=https%3A%2F%2Fwww.facebook.com%2FDIGITALHUBINC&locale=en_US&sdk=joey&show_faces=true&stream=false&width=300"></iframe></span></fb:like-box>
</div>
</div>
• Now replace the Facebook page URL with yours. URL is given in the code as https://www.facebook.com/DigitalHubInc . Paste your URL in place of Techsenser which is given two times in the code.
• Now save your gadget and view your blog.
