Check out the full tutorial at net.tutsplus.com.

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…

I recently had a few projects that needed this functionality, and while some of them had email, password and other fields that required validation, one needed just very simple text fields with placeholder text. So I wrote this very simple javascript function, using jQuery, to do just that (I’m using jQuery 1.4.2 here).

function setupPlaceholder(inputid) {
	if ($.browser.webkit) return false;

	var target = $('#'+inputid);
	if (target.length==0) {
		target = $('input[type="text"], input[type="email"], input[type="search"]');
	}

	target.each( function(i, el) {
		el = $(el);
		var ph = el.attr('placeholder');
		if (!ph) return true;

		el.addClass('placeholder');
		el.attr('value', ph);

		el.focus( function(e) {
			if( el.val()==ph ) {
				el.removeClass('placeholder');
				el.attr('value', '');
			}
		});

		el.blur( function(e) {
			if( $.trim(el.val())=='' ) {
				el.addClass('placeholder');
				el.attr('value', ph);
			}
		});
	});
}

The code is very straightforward. For one it checks that this is not a webkit browser, if it is I assume it supports placeholder attribute and so doesn’t need the code. Then it checks if an ID for the input was provided, just in case I wanted to do this on one field only. If there is no ID, or if it wasn’t found, it’ll simply apply to all inputs of type text, email or search (HTML5 input types).

When combined with some styles you end up with a nice input field with some “help” text, like this.

The one “catch” with this script is that I don’t check the case where a user would put the same text in as the placeholder text. If the user does this, then when they focus on the field again, the text will be erased (’cause the script thought it’s the placeholder text). To fix that you can add a flag that keeps track of whether the user has edited the field or not.