Search code examples
htmlcssfacebookfacebook-iframe

Styling a facebook iframe on website


I've embedded a facebook page on my site :

 <iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FIACTTV&width=1200&colorscheme=light&show_faces=true&border_color&stream=true&header=true&height=635" scrolling="yes" style="border:none; overflow:hidden; width:1200px; height:930px; background: white;" allowtransparency="true" frameborder="0">
</iframe>

The box is showing up at 500px width and I can't seem to get the content to be 1200px. Anyone have experience styling a likebox iframe?

I've tried:

iframe #u_0_0 div {
    width: 1200px !important;
}

Solution

  • Facebook only allows for a max-width of 500px for plugins it seems.

    From the Facebook developer docs:

    width - The pixel width of the plugin. Min. is 180 & Max. is 500

    see here