How to Create a Custom ShareThis Icon
Forget custom APIs. It’s quite simple to create a custom ShareThis button for your site. And now that I’ve figured it out, I realize that the answer was on Webmonkey all along.
So for those of us who don’t want to fool with the ShareThis API or Javascript, here are simple instructions for adding a custom ShareThis button using only CSS:
- Follow the standard instructions to add ShareThis to your site.
- Create your custom button. Personally, I downloaded the Share Icon set and used Illustrator to edit the colors of the .ai file, and then sized the image down to the default 16px X 16px, and saved it as a .png.
- Upload your custom ShareThis icon to your site.
- Add the following code to your page header, just before the </head> tag.
<style type=”text/css”>.stico_default{background:url(INSERT FULL URL TO ICON) no-repeat scroll 0 0!important;background:url(INSERT FULL URL TO ICON) no-repeat scroll 0 0;}</style>
- You’re done!
How does this work? The ShareThis Javascript code pulls in a CSS file to add the button to your site. Because embedded styles override external styles, your newly added style will take precedent over the default ShareThis style.
Normally, I wouldn’t embed styles, but with WordPress’s PHP files, I know that the code will populate on every page.
So now write your posts and don’t worry about ShareThis. It will do it’s thing like normal, just with your custom button!
NOTE: Please read ShareThis Icon Usage Guidelines before you replace the icon with daggers, hearts, balloons, or anything else that would diminish the ShareThis brand. And yes, I do feel a little weird for changing their green to blue, but I think my visitors will still recognize the button, especially because it’s the only button there and it is clearly labeled.
Leave a Comment
