Wednesday, December 15, 2010

How to Remove the Facebook Likebox Border

Facebook provides a nifty little likebox widget that can be customized to display your facebook pages current fans (or likers), but the widget comes with an ugly blue border that cannot be overridden with css because it is in a facebook iframe.

The Solution: Wrap the likebox in an extra div (with a border color set to your pages background color, and position the wrapper to overlap the likebox). Code below.

The HTML


create a div with id as "likebox-frame">
your iframe here
div closes here


The CSS

#likebox-frame{
border:2px solid #F0F9F4;
width:894px;
z-index:10;
height: 156px;
overflow: hidden;
position:relative;
top:-1px;
left:-2px;
}
#likebox-frame iframe{
left:-5px;
overflow:hidden;
position:relative;
top:-1px;
}