Ilia Draznin Online

I wanted to have an AddThis share but­ton that would fit bet­ter with the site’s design, and if you’re read­ing this post on its own page you can scroll down and see what I mean. While AddThis pro­vides plenty of ways to cus­tomize their but­tons, there is no way to assign your own image to the icon, which means doing it the hard way… well, rel­a­tively speak­ing of course.

There are three main steps to cre­at­ing a cus­tomized share but­ton. There’s some javascript to include in the footer.php, few lines of html to add at the end of your posts, and of course some styles and the icon itself.

JavaScript

You’ll want to add this js code in the footer file as prob­a­bly the last piece of code. This means it won’t be load­ing until every­thing else is done. You can read detailed expla­na­tion of what you can do on AddThis’ API page but the short of it is — include this script file “http://s7.addthis.com/js/250/addthis_widget.js”. If you want to keep track of var­i­ous stats AddThis pro­vides, you’ll need to pro­vide your user­name. This is done with the “addthis_config” vari­able. So for exam­ple, what I have is

<script type="text/javascript">
var addthis_config = { username:"2late2die", data_track_clickback:true };
</script>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js"></script>

HTML

The HTML is pretty much just a reg­u­lar link, but with cer­tain href tar­get, class and a cou­ple of spe­cial addthis attrib­utes. You can style it any­way you want, as you would any other link. Here’s how said link might look

<a href="http://www.addthis.com/bookmark.php?v=250&amp;username=[username]"
  class="addthis_button" addthis:url="<?php the_permalink() ?>"
  addthis:title="<?php the_title_attribute() ?>">Share</a>

“http://www.addthis.com/bookmark.php?v=250&username=[your user­name here]” is the url the link should be point­ing to. It must have the “addthis_button” class, oth­er­wise AddThis js won’t rec­og­nize it, and then the addthis:url and addthis:title attrib­utes. These attrib­utes are self explana­tory, just remem­ber to use PHP so that they are assigned dynamic val­ues. If you have any code, or plu­g­ins, that insert tags with attrib­utes or class names into the title (like in my case, wp-typography, which puts <span class="caps"> around any caps-only words, like acronyms and such) then use the “the_title_attribute()” func­tion, instead of the typ­i­cal “the_title()”. It strips the tags and escapes any prob­lem­atic characters.

CSS

This is really all up to you, depend­ing on how you want to style the but­ton and the tooltips with the var­i­ous sites. By default the AddThis scripts pro­vides its own style, so if you don’t mind the white tooltip box, all you’ll need to style is the link itself. If you want to style the tooltips as well, then you’ll need to dig into the gen­er­ated code for them and the styles used by default, and fig­ure out which ones you want to change. (You can check out my styles to see how I gave it a dark theme by switch­ing a few colors.)

If you like opti­miz­ing your code you might decide to not include the AddThis styles file at all. You can do this by adding “ui_use_css:false” to “addthis_config”, i.e.

var addthis_config = { ui_use_css:false };

That CSS file weighs in at about 52k, which is actu­ally quite hefty. There are, how­ever, two rea­sons to keep, instead of remov­ing it.
First of all, by remov­ing it, you will have to pro­vide all the styles to AddThis wid­get from scratch, as it were, includ­ing all those icons for the var­i­ous ser­vices, which are back­grounds of the links, not image tags in the HTML. It’s cer­tainly doable but it’s a has­tle that might be not worth it at the end (depend­ing on how anal you are about opti­miz­ing your code). The other rea­son is that, because AddThis is a fairly pop­u­lar wid­get, many of your users are likely to have already down­loaded that css file when they encoun­tered the AddThis but­ton on other sites. This means it’s cached in the browser and takes lit­tle to no time to download.

Now, as for that FB “like” but­ton, looks like it might be tricky…