Transparent Facebook XFBML “Like” button

Problem:

You want to add a Facebook “Like” button to your website via XFBML, but you use non-white background. Maybe a particular colour, or an image that repeats itself.
By default, the “Like” button is rendered in an iframe with a white background.

Solution:

Use CSS to make the iframe’s background transparent.

Code:

XFBML “Like” button.
NOTE: I enclosed the XFBML in my own div that I will apply my custom style to.

<div class="fb-like">
    <fb:like href="http://ronnaraeleonard.ca" send="true" layout="button_count" width="90" show_faces="false"></fb:like>
</div>

CSS to set the transparency of the iframe:

.fb-like iframe {
    background: transparent;
}

Bam! Sexy-looking Facebook XFBML Like button that doesn’t break my site’s layout.

Check it out in action at http://ronnaraeleonard.ca/news

Before (note ugly white-background)

After (transparent background)