Set Background Of Body To Transparent In Fbml Iframe

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

Solution 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.

Solution 2:

You can make the background in the iframe transparent by using

colorscheme=transparent

instead of dark or light :)

Solution 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_badgeiframe {
   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.

Solution 4:

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:

<iframesrc="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/

Solution 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.