Customize the Design of Your AddThis  Widget

AddThis Re-designI 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:




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!

Meet the Author

Kevin Leary, WordPress Consultant

I'm a freelance web developer and WordPress consultant in Boston, MA with 17 years of experience building websites and applications. View a portfolio of my work or request an estimate for your next project.