how to change color of facebook like button

Question

using the guide at http://developers.facebook.com/docs/reference/plugins/like

I am trying to put a like button on my web page. How can i change the color of text [Be

Answer 1

YES it can be done

NO Facebook's brand guidelines don't seem to allow it

See below for technical details or try out the Facebook Button Colorizer tool I built.

---

Turning the button red (Chrome, Firefox, Safari, Opera)

It is possible to change the color of the button through CSS/SVG filters. These can influence the appearance of the contents of the iframe. Thanks to OleSchmitt for putting me on this track.

Webkit

With this code I am currently able to make the color of the button red on Webkit-based browsers:

stylesheet.css:

.fb-like {
    -webkit-filter: hue-rotate(120deg);
}

Only tested on Chrome, but as it is a Webkit feature, should also work on Safari and Opera as these are also both Webkit-based.

Firefox

Firefox doesn't support the CSS equivalents of the SVG filters yet, but you can get hue-rotate to work by linking to an .svg filter. Create an svg filter (either external or internal) and refer to that in your css:

External SVG file

filters.svg:

Internal SVG fragment

page.html

stylesheet.css:

.fb-like {
    /* simplest way, but currently only supported by webkit */
    /* -webkit-filter: hue-rotate(120deg); */

    /* Internal svg filter */
    -webkit-filter: url(#fb-filter);
    filter: url(#fb-filter);

    /* External svg filter */
    -webkit-filter: url(filters.svg#fb-filter);
    filter: url(filters.svg#fb-filter); 
}

Only one svg reference is needed, either to an external file or to an inline svg fragment. Not both at the same time.

Tested on Chrome, Firefox and Opera, should also work on Safari. Have a look at this jsFiddle.

UPDATE: It seems Chrome and Firefox treat the URL passed to the (-webkit-)filter rule slightly different. One browser is resolving it against the stylesheet the rule is in, the other against the html document. I had the strange situation that internal filters were working for Chrome but not Firefox and external filters were working for Firefox but not Chrome. So if it's not working for you, have a very close look at the URL. In the end I just placed the style rule that ties the SVG fragment to the fb-like button inline as well. That works on both browsers.

What about Internet Explorer?

IE is lagging behind on CSS support, but they wil get there eventually no doubt. Until then I welcome any suggestions for dealing with IE.