Transparent Facebook XFBML “Like” button


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.


Use CSS to make the iframe’s background transparent.


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="" send="true" layout="button_count" width="90" show_faces="false"></fb:like>

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

Before (note ugly white-background)

After (transparent background)