Normally the facebook social likebox created using facebook developer site will have a grey border. In this we are going to see how to remove those grey border and make it look more professional to meet your template design.
<center>
<style type="text/css">
.facebookouterborder {
background-color:#ffffff;
width:238px;
padding:0px 0 0px
0px;
height:250px;
border:1px solid
#ffffff;
}
.facebookinnerborder {
height:250px;
overflow:hidden;
}
</style>
<div class="facebookouterborder">
<div
class="facebookinnerborder">
<div
class="fb-like-box"
data-width="238" data-height="290"
data-href="https://www.facebook.com/learnfromnet.in"
data-border-color="#ffffff"
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>
</center>
Copy and paste the above code in to your website where you want your facebook likebox to appear.
For Blogger: Add new Html/Javascript widget and place the code.
For Wordpress: Add new Text widget and place the code.
You can customize the color of the background and border of your facebook likebox in the code CSS.
Note: Don't forget to change the https://www.facebook.com/learnfromnet.in with your facebook page address.
This is Kishore Siluvaikan K. Evergreen learner, I like to blog on the things which I learn from my everyday life. Human by Birth - Blogger by Interest...!
Sharing is caring - Sharing my knowledge here...!