How To Remove The Border From Facebook and YouTube Widgets

Facebook and YouTube have neat little widgets to help your website visitors easily subscribe to your videos and like your facebook page. The only problem is they both went ahead and put dog ugly borders around their widgets which you can't style using css because it's all in an iframe. Fortunately, we can still style our own content and here is a little trick you can use to hide those pesky borders.

It works by simply tucking the iframe under a div on your site. The markup and css looks like this:

<div style="overflow: hidden; width: 248px; height: 450px;">
  <iframe src="http://www.facebook.com/plugins/likebox.php?href=xxx"/>
          scrolling="no" frameborder="0" allowTransparency="true" 
          style="margin: -1px; width: 250px; height: 475px;">
  </iframe>
</div>

Do the maths on those widths and margins, and you'll see that the iframe is two pixels wider than the div with a -1 pixel margin on each side. Goodbye borders! Note the wrapping div is 25px shorter than the iframe to hide the Facebook Like Box developer link. You could always change that if you wanted.

Same deal with the YouTube widget, just experiment with the dimensions until you're happy.

Hope that helps.

About Roger Keays

Roger Keays is an artist, an engineer, and a student of life. He has no fixed address and has left footprints on 40-something different countries around the world. Roger is addicted to surfing. His other interests are music, psychology, languages, the proper use of semicolons, and finding good food.