facebook button colorizer

Fork me on GitHub

Colorize your Facebook button

Use the slider, pick one of the presets, or play with the filter code yourself.





fbc 0
fbc 30
fbc 60
fbc 90
fbc 120
fbc 150
fbc 180
fbc 210
fbc 240
fbc 270
fbc 300
fbc 330



Copy-paste this code

Paste this code near the facebook button in your site's HTML.

<svg height="0" width="0">
  <filter id="fb-filter">
    <feColorMatrix type="hueRotate" values="0"/>
  </filter>
</svg>
<style>
  .fb-like, .fb-send, .fb-share-button {
    -webkit-filter: url(#fb-filter); 
    filter: url(#fb-filter);
  }
</style>

Your button will look like this

Live preview. Press it to like my blog post about this tool.

Waiting for button to load...

Change the preview button

Create the button on Facebook and paste the button code here.





Browser support


Share alike!

facebook button colorizer, or fb-colorize for short, is Open Source software, distributed under the Creative Commons Attribution 3.0 license. This means you are free to adapt this program to fit your needs and that you are free to share those changes with others as long as you give appropriate credit, provide a link to the license, and indicate what changes were made. You may not impose any additional restrictions on the people you share your changes with.

Because this is free software there is NO WARRANTY whatsoever. Use at your own risk.

You can download the fb-colorize source code from GitHub. You can also report any issues you may find there or make suggestions and feature requests. For more general feedback, please refer to my blog post on this topic.

I'd like to thank

Stackoverflow, for being a big help every day.

Ole Schmitt for inspiring me to build this tool.

Twitter Bootstrap for their lay-out tool.

jQuery, for bringing it to life.

GitHub, for hosting the code.

WordPress, for hosting my blog.

Facebook, for being an awesome social network.