How to add like box

Customize the Facebook Like Box with CSS

Facebook offers a simple Like Box plugin that you can easily integrate into your website using either JavaScript or IFRAME. You can customize the border color, the height and the width of the Like Box but, officially, nothing more.

That said, if you would like to add a background color to the Like Box to better match your site’s color theme or if you would like to completely remove the Facebook logo and other branding from the box to make it less crowded (see demo), you can easily do that with the help of CSS.

To get started, copy the code below and paste it anywhere inside your website template. Change the URL in Line19 to point to your own Facebook page and you’re done.

<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/digital.inspiration" 
      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 the boring technical stuff.

The default background color of our Facebook Like box is #F4F4F4 but you can use any other web color (change values in Line 03 and Line 20). Similarly, if you want to have a more wider or taller Like box for your website, you can need to change the width and height values defined in lines 4, 6, 10 and 18.

The above example uses the JavaScript version of the Facebook Like box though the same can be applied to the IFRAME version as well. In that case, you need to replace Line # 17-21 with the IFRAME tag.

Home — How-to Guides — Code — Facebook