Customize Facebook Like Box With CSS

The Facebook Like box placed on your website /blog is probably the easiest way to attract new fans to your Facebook page.But the default Facebook like box is not having good look at all.Its very ugly many of my fans told me to customize Facebook like box with the help of css.I find a way by which we can make facebook like box look good and attractive you don't need to do any think you only need to copy and paste the code.

To get started, copy the code below and paste it in html/javascript which you will find in layout.

<style type="text/css">
 .facebookOuter {
    background-color:#F4F4F4;
    width:250px;
    padding:10px 0 10px 10px;
    height:250px;
    border:1px solid #CCCCCC;
  }
 .facebookInner {
    height:250px;
    overflow:hidden;
  }
</style>

<div class="facebookOuter">
 <div class="facebookInner">
  <div class="fb-like-box"
      data-width="245" data-height="290"
      data-href="http://www.facebook.com/lordhtml"
      data-border-color="#F4F4F4" 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>

Now You Need To Replace Your Facebook page Url with http://www.facebook.com/lordhtml which you will find in 19 line of code.


If you are facing any problem regarding to this post then comment below :)