How you can make a stylish Facebook Like Box with simple CSS tricks

[adslot]

Usually most people don’t try to style up their Facebook fanpage Like Box and it often doesn’t blend with your website design. The styling of Facebook can be easily done with adding some CSS to it. As you can see our Facebook fan page Like Box is blend to the website background and here’s how you can make a stylish Facebook Like Box with simple CSS.

• Goto the Facebook developer page to create the your Like Box. (http://developers.facebook.com/docs/reference/plugins/like-box/).
• Choose dark or light color scheme based upon your website design and where your going to place the plugin.
• Make sure that you choose a border color same as the background color where you going to place your plugin. Also uncheck the Show stream and Show header options.
• Click Get Code and you will get something a plugin code similar to:

  <div data-href="[YOUR_FANPAGE_URL]" data-width="300" data-show-faces="true" data-border-color="#FFFFFF" data-stream="false" data-header="false"></div>

• Place this code in between two div containers i.e like this:

  <div class="outerbox-style"><div class="innerbox-style"> [PLACE THE PLUGIN CODE HERE]  </div></div>

• Now lets add the CSS styling. Place the below code in your CSS file or along with your plugin code.

  <style type="text/css">
   .outerbox-style {
       background-color:#FFF;
       width:250px;
       padding:10px 0 10px 10px;
       height:250px;
       border:1px solid #DDD;
   }
   .innerbox-style {
       height:230px;
       overflow:hidden;
   }
   </style>

• You can edit these CSS codes and change the background ( background-color:#FFF; ) or even make a transparent background by adding codes like background-color: transparent;So here is the final whole code for creating your custom style Facebook Like Box:

  <style type="text/css">
   .outerbox-style {
       background-color:#FFF;
       width:250px;
       padding:10px 0 10px 10px;
       height:250px;
       border:1px solid #DDD;
   }
   .innerbox-style {
       height:230px;
       overflow:hidden;
   }
   </style>
  <div class="outerbox-style">
    <div class="innerbox-style"> 
        <div data-href="[YOUR_FANPAGE_URL]" data-width="300" data-show-faces="true" data-border-color="#FFFFFF" data-stream="false" data-header="false"></div>  
    </div>
  </div>

So start styling up your Like Box now and don’t forget to Like our DigitCodes Facebook Page.