Reputation: 42524

how to change color of facebook like button

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

Upvotes: 9

Answers (9)

Mutiu O'Balogun

Reputation: 1

@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

Upvotes: 0

OleSchmitt

Reputation: 175

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

Upvotes: 12

Mohammad Samim Samimee

Reputation: 57

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

Upvotes: -1

Stijn de Witt

Reputation: 42214

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.

Upvotes: 7

graham

Reputation: 946

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

Upvotes: 12

Will

Reputation: 11

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.

Upvotes: 1