I am sure anyone that lives on the web are familiar with AddThis. Basically, AddThis is a neat little tool embedded into a webpage to make bookmarking and link sharing easier, more interactive and not to mention, cooler too. Another reason to simply love this widget is it offers great customizability in terms of visual appearance as well as functionality.

In one of my recent WordPress project I had a chance to mingle around with the functionality customization of AddThis. The client needed to add a SHARE link on each post item displayed on the post listing page like the category and the archive page. This means every SHARE links has its own designated URL and title to be used as bookmark. The customization needed is actually quite simple. The code snapshot below was taken from the WordPress’ The Loop.

<?php while (have_posts()) : the_post(); ?>
    //
    //Some other stuff here
    //
    <p><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">CONTINUE READING</a>
	 <a class="addthis_button" href="http://www.addthis.com/bookmark.php?username=yourusername" addthis:title="<?php echo urlencode(get_the_title()); ?>" addthis:url="<?php echo urlencode(get_permalink()); ?>">SHARE</a></p>

<?php endwhile; ?>

That’s pretty much it. The only issue with this customization is it causes the page to fail validation if you’re using an XHTML doctype. The workaround for this would be to use Javascript to inject the extra addthis: attributes into the link tag. I chose to use jQuery to handle this. First, some minor change on the HTML:

<?php while (have_posts()) : the_post(); ?>
    //
    // Some other stuff here
    //
    <p><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">CONTINUE READING</a>
    <a class="addthis_button" href="http://api.addthis.com/oexchange/0.8/offer?username=yourusername&amp;title=<?php echo urlencode(get_the_title()); ?>&amp;url=<?php echo urlencode(get_permalink()); ?>">SHARE</a></p>

<?php endwhile; ?>

As you can see, I have changed the URL to point to a different endpoint. This is to compensate browsers without JS support to still be able to use AddThis. Now for the JS itself:

$(document).ready(function () {
    var post_url, post_title;
    $('.addthis_button').each(function (i) {
        post_url = $(this).prev().attr('href');
        post_title = $(this).prev().attr('title');
        $(this).attr("addthis:url", post_url);
        $(this).attr("addthis:title", post_title);
    });
});

The manipulation is pretty straightforward. It loops over every SHARE links, then reads the URL and title attribute of the CONTINUE READING links adjacent to it and finally applies the necessary attributes into the SHARE links. And now we have code that validates and degrades gracefully on browsers without JS.

Before I end, just another cool little feature that I found useful when you want to launch any of the AddThis services on one-click bypassing the initial popup window. My favorite is the e-mail service.

<a href="http://www.addthis.com/bookmark.php?username=yourusername" target="_blank">EMAIL TO FRIEND</a>

Short and sweet! Just append the word _email to the class name and you’re good to go. Refer to this page for a complete list of service codes.

AddThis is simple but very powerful. Feel free to share if you have more cool ideas on using this great tool. Have a nice day!