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

It's in an iframe, so you cannot change the color of the text.

Answer 2

What I did, cause I just had the same issue, is I changed the background color from dark gray to white (which I isolated the like button with the title of the page) So I changed the color of the title, the background to white and now you can see the dark lettering. It's the best I could do cause I can't change the font color.

Answer 3

It is in an iframe element on a different domain; you can not change it.

You can choose from light or dark theme.

Answer 4

All incarnations of the "Like" button are iframes, so you can't change them yourself.

As far as I can see, "light" and "dark" are the only customization options that Facebook offers.

Somewhat understandable from Facebook's point of view - they have a brand to protect. But sad for the site owner, of course.

Answer 5

You can change the colour theme of the whole button to either light or dark, but those are the only options allowed. See their brand guidelines:

While you may scale the size to suit your needs, you may not modify the Like button in any other way (such as by changing the design).

Answer 6

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:

<svg>
    <filter id="fb-filter">
        <feColorMatrix type="hueRotate" values="120"/>
    </filter>
</svg>

Internal SVG fragment

page.html

<div class="fb-like" data-href="http://facebook.com"
    data-layout="button_count" data-action="like" 
    data-show-faces="false" data-share="false"></div>

<svg height="0" width="0">
    <filter id="fb-filter">
        <feColorMatrix type="hueRotate" values="120"/>
    </filter>
</svg>

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.