9

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 the first of your friends to like this.]

2

9 Answers 9

12

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

1
  • is correct. Facebook only permit minor customization to the like button. Nov 5, 2010 at 1:13
11

Yes, it can be done. I will give you the first steps (just to REMOVE COLOR), then you can do a further research on -webkit-filter: hue-rotate to change the color, if you don't want just to remove it.

First, add an #id to your FB code:

<div id="fboverlay" class="fb-like" data-href="YOURFACEBOOKADDRESS" data-width="300" data-layout="button_count" data-show-faces="false" data-send="false"></div>

You can leave your code as it is right now, just add that id="fboverlay" over there.

Then edit your css and add:

#fboverlay {
    opacity: 0.6;
    filter: alpha(opacity=60);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    filter: grayscale(100%);
}

Or whatever else you'd like. And that's it.

Surely it's using CSS3, therefore it's not 100% compatible (specially with old browsers), but you know how it is...

4
  • Is the filter applied on the background too, if the iframe is transparent?
    – Rolf
    Jan 7, 2014 at 20:46
  • Doesn't seem to take in Firefox
    – Rolf
    Jan 7, 2014 at 20:54
  • No, it doesn't affect the background, just the FB div. I'm sorry to know that it doesn't work on FF. Maybe if you tweak a little the CSS??...
    – OleSchmitt
    Jan 8, 2014 at 19:50
  • Upvoting your answer as it helped me to turn the button red (but only on Chrome up till now). Will leave my variation in anothe answer. Feb 15, 2014 at 17:16
7

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.

enter image description here

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.

0
6

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

1

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.

0

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

You can choose from light or dark theme.

0

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.

2
  • 3
    May I ask why you put iframe in a kbd element? Thanks.
    – alex
    Nov 4, 2010 at 11:10
  • 3
    @alex on a whim, nothing more to it :)
    – Pekka
    Nov 4, 2010 at 11:12
0

@Mohammad Samim Samir inspired this alternate solution... he stated .fb-like-box, it didn't work for @isherwood only because of the appended "-box", ".fb-like" on it's own with followed by "{background:#f5f5f5;}", it would have worked.

".fb-like {
    position: relative;
    top: 3px;
    left: -10px;
    background-color: white;
    width: 220px;
    height: 20px;
    color: white;
}"

What it looks like after applying the above style to stylesheet.css

-1

It is possible, just create a css class by the name of .fb-like-box { background:#f5f5f5; }

1
  • This does not change the button color.
    – isherwood
    Feb 4, 2015 at 18:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.