I love the ease of use and rich fea­ture set of the AddThis social media ser­vice. How­ever, due to it’s pop­u­lar­ity the design has become overused and mun­dane. I decided to see if I could cus­tomize it to match the over­all expe­ri­ence of kevinleary.net.

The results came out pretty nice in my opin­ion. I may even­tu­ally swap out the [ + ] icon in the future, but for now I think it works. I’m always a bit hes­i­tant to re-design con­sis­ten­cies.

Wid­get Code (trimmed)

Here’s the trimmed down XHTML/JavaScript I’ve used for kevinleary.net:

<!-- AddThis Button BEGIN -->
<a href="http://www.addthis.com/bookmark.php?v=250&pub=kevinlearynet" class="addthis_button_compact"></a>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js?pub=kevinlearynet"></script>
<!-- AddThis Button END -->

Note that kevin­learynet is my AddThis user­name, so you’ll need to change this if you plan on using this for your website.

I also wanted to remove the “Book­mark & Share” mes­sage at the top of the rollover window/tooltip, so I’ve used CSS to hide it. I’ve also used CSS to hide the footer as well.

CSS for the The Rollover Window

body #at15s_head,
body #at16pf
{
	display:none;
}

That’s it!