Wednesday, October 26, 2011

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 i.e.  wrap within likebox-frame
<div id="likebox-frame">
<div data-href="https://www.facebook.com/pages/xxxxxxxxxxx></div>

</div>

 

And Add this code to your CSS
 

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

Arrange tha height & width as you need.