Customise Facebook Like Box Using CSS ~ GrowTechInfo.com

In this post I will tell you how to customize Facebook like box using CSS. First of all go to Facebook Like Box Creator Page. Than fill all field display in below image.

URL of your Facebook page.
Width 250 and height 258
Check Show faces
Select light color scheme
Uncheck Show stream
Fill border color with #f4f4f4
and uncheck Show header.

After filling all information click on Get Code. Pop up window is open which contains code. Select the IFRAME option.

Copy all code and paste in between below code.


<div style="-moz-box-shadow: 0px 15px 20px 0px #777777; -webkit-box-shadow: 0px 15px 20px 0px #777777; background-color: #f4f4f4; border-radius: 15px; border: 1px solid #CCCCCC; box-shadow: 0px 15px 20px 0px #777777; height: 270px; margin: 30px; padding: 10px 0 10px 10px; width: 250px;">
<div style="height: 250px; overflow: hidden;">
<!-- Paste Facebook Likebox IFRAME Code Here-->
</div>
</div>

After copy code look like this


<div style="-moz-box-shadow: 0px 15px 20px 0px #777777; -webkit-box-shadow: 0px 15px 20px 0px #777777; background-color: #f4f4f4; border-radius: 15px; border: 1px solid #CCCCCC; box-shadow: 0px 15px 20px 0px #777777; height: 270px; margin: 30px; padding: 10px 0 10px 10px; width: 250px;">
<div style="height: 250px; overflow: hidden;">
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FGrowtechinfocom%2F523818640976777&amp;width=250&amp;height=258&amp;show_faces=true&amp;colorscheme=light&amp;stream=false&amp;border_color=%23f4f4f4&amp;header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:258px;" allowTransparency="true"></iframe>
</div>
</div>

If copied does not contain http: then add you own otherwise you get an error.
If you get any error feel free to ask.