Customize the Design of Your AddThis  Widget

I love the ease of use and rich feature set of the AddThis social media service. However, due to it’s popularity the design has become overused and mundane. I decided to see if I could customize it to match the overall experience of kevinleary.net.

The results came out pretty nice in my opinion. I may eventually swap out the [ + ] icon in the future, but for now I think it works. I’m always a bit hesitant to re-design consistencies.

Widget Code (trimmed)

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

<!-- AddThis Button BEGIN -->
<a href="https://apitracker.io/a/addthis" class="addthis_button_compact"></a>
<!-- AddThis Button END -->

Note that kevinlearynet is my AddThis username, so you’ll need to change this if you plan on using this for your website.

I also wanted to remove the “Bookmark & Share” message 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!