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.


<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="http://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 http://www.facebook.com/learnfromnet.in with your facebook page address.


Previous
Next Post »