Facebook-Like-Box-IFrame-fix

Posted 2021-02-25

The IFramed Like Box widget that Facebook supplies automatically puts on a recessed border which seemingly cannot be removed by the usual 'border=0' or 'border:none'. This is not noticeable on the 'light' version but definitely on the 'dark' version. To solve this we first need to wrap the IFrame in a DIV 3px narrower and 2px shorter than the iframe (size of the border widths) making sure to set any overflow to hidden. Then set the position of the iframe to 'relative' and nudge it 2px to the left and up.

CSS
 
#fbcontainer{
overflow:hidden; 
width:289px; 
height:425px
}
 
#fbiframe{
border:none; 
overflow:hidden; 
width:292px; 
height:427px; 
position:relative; 
margin-left:-2px; 
margin-top:-2px;
}
 
 
 
html
 
<div id=fbcontainer>
 
<iframe id=fbiframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fplatform&amp;width=292&amp;colorscheme=dark&amp;show_faces=true&amp;stream=true&amp;header=true&amp;height=427" scrolling="no" frameborder="0" 
allowTransparency="true"></iframe>
 
</div>