There are three main steps to creating a customized share button. 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 probably the last piece of code. This means it won’t be loading until everything else is done. You can read detailed explanation 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 various stats AddThis provides, you’ll need to provide your username. This is done with the “addthis_config” variable. So for example, 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 regular link, but with certain href target, class and a couple of special addthis attributes. You can style it anyway 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 username here]” is the url the link should be pointing to. It must have the “addthis_button” class, otherwise AddThis js won’t recognize it, and then the addthis:url and addthis:title attributes. These attributes are self explanatory, just remember to use PHP so that they are assigned dynamic values. If you have any code, or plugins, that insert tags with attributes 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()” function, instead of the typical “the_title()”. It strips the tags and escapes any problematic characters.

CSS

This is really all up to you, depending on how you want to style the button and the tooltips with the various sites. By default the AddThis scripts provides 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 generated code for them and the styles used by default, and figure out which ones you want to change. (You can check out my styles to see how I gave it a dark theme by switching a few colors.)

If you like optimizing 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 actually quite hefty. There are, however, two reasons to keep, instead of removing it.
First of all, by removing it, you will have to provide all the styles to AddThis widget from scratch, as it were, including all those icons for the various services, which are backgrounds of the links, not image tags in the HTML. It’s certainly doable but it’s a hastle that might be not worth it at the end (depending on how anal you are about optimizing your code). The other reason is that, because AddThis is a fairly popular widget, many of your users are likely to have already downloaded that css file when they encountered the AddThis button on other sites. This means it’s cached in the browser and takes little to no time to download.

Now, as for that FB “like” button, looks like it might be tricky…

The idea is to set up tabs for Gmail and Google reader that will always be open, but with a few extensions will have minimal impact on the interface while providing the information relevant to each app (site). For a full guide see the link at the bottom, but here’s the gist of it.
Using the Better Gmail 2 add-on turn on unread count display in the favicon. Then get the Faviconize Tab and the PermaTabs Mod add-ons. The Faviconize add-on will add an option in the right-click menu of the tab to “Faviconize” it, i.e. remove the text and only leave the favicon visible. The PermaTab add-on gives you an option (right-click tab) to make a tab permanent. This will prevent it from accidently closing and will leave it on even after Firefox is closed (to close the tab you’ll need to “un-perma” it). And apparently permatabs don’t load their content until they’re first selected, in other words, this setup will not cause Firefox to load up 2 extra tabs every time you open it.

This is extremely useful. I check both gmail and reader multiple times a day but don’t like leaving them open all the time because the tabs take space, but with this I can have the best of both worlds.

[Original Lifehacker Post]