A Cleaner AddThis Design
- Share /
- CSS, Social Media, Widgets, Wordpress / 6.30.09 / 2 Comments / /
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="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 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!
Jeff Wong / 2.9.10 / 9:36 PM
Heya, I'm one of the designers at AddThis. Thanks for writing the blog post about our product. We're in the process of simplifying the menu. What you've mocked up is the direction that we're heading—we're hoping to subtract a couple of the same elements that you've mentioned. This is a great post, and I've shared it with my team. Keep up the great work!
kevinlearynet / 2.9.10 / 10:31 PM
Thanks Jeff!
I love the product, and I saw that you guys recently opened up an API to the public for your analytics which is very cool. It could make for a fun WordPress dashboard plugin, showing analytical AddThis social stats for that site.