Facebook Social Like Box Without Border...!

Facebook No border

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.

<style type="text/css">
 .facebookouterborder {
    padding:0px 0 0px 0px;
    border:1px solid #ffffff;
 .facebookinnerborder {

<div class="facebookouterborder">
 <div class="facebookinnerborder">
  <div class="fb-like-box"
      data-width="238" data-height="290"
      data-border-color="#ffffff" data-show-faces="true"
      data-stream="false" data-header="false">
<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'));

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.

Next Post »