Yes, it can be done!

Changing the color of Facebook’s Like and Share buttons is something that web page designers wish for, but up untill the rise of HTML5 was practically impossible. But today, thanks to SVG filters, it can be done. It’s still not very easy and, as usual, Internet Explorer is lacking support, but it is definitely possible.

Impatient? Just do it

For the impatient, check out the facebook button colorizer tool I built. You just copy-paste your button code, fiddle with the controls keeping an eye on the live preview until you like the result and then just copy and paste the colorizer code to your website. Couldn’t be easier.

So what’s the big deal?

The Facebook buttons are hard to style, because they are inside an iframe on another domain. Browsers won’t let us ‘see’ into the iframe element so we cannot style or script it’s contents, because of what is commonly known as the Same-origin policy. This prevents one website abusing the visitor’s session on another website, to post in his name for example. But is leaves us with very little styling options making contents of an iframe on another domain very hard to style.

Hard, but not impossible

One hint lies in the CSS property opacity which does work as expected when applied to the iframe element: it’s contents become (partly) transparent. The reason this works is because opacity filters the element’s content as if it was an image, thus there is no need for access to the iframe’s content. As it turns out, HTML5 brings with it an advanced version of such a filtering technique in the new property filter. And with it, we can change the color of the Facebook buttons.

How it’s done

We use the filter hueRotate. Getting it to work was tricky. Chrome worked right away, but Firefox resisted. It would not play ball with the CSS filter property set to hueRotate. It’s resistance was of course futile as there was a second route: SVG. Both Chrome and Firefox offer SVG support and what’s even better, even Internet Explorer has partial support now. That last step was one too many I suppose as I never got it to work in IE. If anyone knows a way how let me know.

Disclaimer
I am in no way, shape or form associated with, or endorsed by, Facebook corporation. Changing the Facebook buttons may be against teir brand guidelines. I built the tool just for fun and educational purposes. Use at your own risk.