Set background of body to transparent in fbml iframe

Question

I'm looking for a workaround that would allow me to remove the background from a body tag inside an fbml iframe which gets a white background by default.

I tried different methods of accessing the fbml iframe but unfortunately facebook denies any of the attempts to put something into the frame.

The bug is reported here but not much has been moving around it: http://bugs.developers.facebook.net/show_bug.cgi?id=12621

Any clever/nasty way to fix this?

Answer 1

Unless your site is running on facebook.com, you can not access anything within that iframe (see same origin policy).

If Facebook doesn't give you an option to change it, then you can't.

Answer 2

Facebook widgets as default have transparency built in?

Hence the ARIA attribute: AllowTransparency="true",

I have a like button on my site working perfectly - it doesn't validate but validation is just a tool.

You could also use the square FB like box:

<iframe src="http://www.facebook.com/plugins/like.php?href=http://mutant-tractor.com/&amp;layout=box_count&amp;show_faces=false&amp;width=65&amp;action=like&amp;font=segoe+ui&amp;colorscheme=light&amp;height=65" scrolling="no" frameborder="0" style="border:none;overflow:hidden;width:55px;height:60px;" allowtransparency="true"></iframe>

FBML Like button: http://www.shinyface.com/2010/08/16/adding-facebook-like-buttons-to-your-website/

Answer 3

I had the opposite issue for one of the Facebook widgets I used on a project (the background was transparent and I needed a colored one). What I did was have the widget wrapped in a container div that I classed "facebook_badge", then accessed it, and the iframe via CSS like so:

.facebook_badge iframe {
   background: #fff;
}

From the sound of it, they're not real consistent with their widgets and whatnot, but it might be worth trying and playing around with (theoretically, you could access the body with iframe body, but I haven't tested it). You might be able to at least get it to a solid color that matches your background via the iframe itself.

Answer 4

You can make the background in the iframe transparent by using

colorscheme=transparent

instead of dark or light :)

Answer 5

There is a similar bug in Recommendations plugin. You can vote on it here: http://bugs.developers.facebook.net/show_bug.cgi?id=19459

Meanwhile, you can use Activity plugin, which has a transparent background.