There are lot’s of persons are creating website then they will create Facebook fan page for its users. But facebook page like box plugin provide us a facility by which we can add this own Facbook like box  in our website. But it has only a single CSS style which look is very common as like other FB like box. But the good news is that you’ll change this by the help of your CSS code.. Here i am creating a 3D box design . Let see how we can do this….

Customize Facebook Like Box With 3D Responsive CSS style

Facebook offers a simple Like Box plugin that you can easily integrate into your website using either JavaScript or IFRAME. You can remove border and also you can customize the height and the width of the Like Box …

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

.fblikebox{
 width:100%;
 height:150px;
 border-radius:3px;
 position:relative;
 background:#F2F2F2;
 padding:0px 10px 15px 0;
 text-align:center;
 }
.fblikebox,.fblikebox:before,.fblikebox:after{
 background:#F2F2F2;
 border:1px solid #CFCFCF
 }
.fblikebox:before,.fblikebox:after{position:absolute;
 content:"";
 bottom:-3px;
 left:2px;right:2px;
 height:1px;
 border-top:none
 }
.fblikebox:after{
 left:4px;
 right:4px;
 bottom:-5px;
 box-shadow:0 0 2px #CFCFCF
 }

<div class="fblikebox">
<div style="height: 155px; overflow: hidden;">
<iframe style="border: none; overflow: hidden; height: 200px;" src="http://www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fosdevpage&amp;width&amp;height=200&amp;colorscheme=light&amp;show_faces=true&amp;header=false&amp;stream=false&amp;show_border=false" width="300" height="150" frameborder="0" scrolling="no"></iframe></div>

LIVE DEMO

See the Pen pvJmoE by Ajay Kumar Maheshwari (@devakm95) on CodePen.