The new AddThis.com homepage

Yesterday my team relaunched AddThis.com, consolidated our brand, and launched a bunch of cool new features. One of my favorite parts is the map on the homepage which shows real-time shares as they are happening.

The map on the AddThis homepage showing real time sharing data

The map was interesting to build. We wanted it to be fast, look good on all browsers (including mobile and tablets) and communicate the reach we have being on 14 million websites and reaching 1.3 billion (yes, with a B) users every month. To do this, I looked at options using Canvas and SVG, but ultimately decided that good old-fashioned HTML and JavaScript would do the job best. We do use SVG and Canvas for it though, just not in the traditional in browser way.

The map itself is built using Protovis which while no longer actively developed, includes multiple map projections out of the box. We then use PhantomJS to create a png from the SVG that Protovis spits out. The share icons are built in a similar manner. They are canvas circles that we build into a sprite and then use PhantomJS for the actual sprite construction. By scripting the generating of these two key images, we were able to tweak and play with colors simply and with real data. No need for our design team to fire up photoshop and send over an image. Change some CSS or JS, run the build script and everything is ready to go.

Take a look at the rest of the site. Our entire team did a killer job with these new features and styling. Will, Foo, Jeff, and Jim all wrote up other pieces of this launch. Greg also highlighted how to user the new Trending Content Tool in WordPress. Exciting times here at AddThis.

Real Time Search and Social Analytics

Over at AddThis, we just released an expanded version of our Live View Analytics. We now are bringing together what was multiple screens of live data in to a single live view.

This was a pretty fun project. The server generates a stream of data that we then use client side to render all of the content. Of all the new features we added, the one I would recommend checking out is single URL view. Click on any url to get a single URL view that includes a moving bar graph (that fills in with data as it happens) along with the search terms and copied terms for that specific page.

Read more about it on the AddThis Blog and then go log in and start seeing how people are using your site right now.

Thoughts on Post Meta Boxes in WordPress

I’m generally of the opinion that the screen for adding content should be as simple as possible in a CMS.  It’s one of the reasons I really like the new Distraction Free Writing in WordPress 3.2 (sneak peek if case you haven’t seen it).  It’s why I was a huge fan of WordPress reducing the number of default metabox in 3.1.

This is why in the recently updated AddThis WordPress plugin, the meta box to disable AddThis on a post by post basis is disabled by default.  While it was a feature that users requested, it wasn’t something that people were beating down the door to enable.  I decided that thus for the majority of users, no reason to make the display show more than they need.

It was super simple code wise. All of this code sits inside of a class that controls all of the post meta box:

[php]
// These two lines are inside a function the hooks into init. $screen equals post and page
add_meta_box(‘addthis’, ‘AddThis’, array($this, ‘post_metabox’), $screen, ‘side’, ‘default’ );
add_filter(‘default_hidden_meta_boxes’, array($this, ‘default_hidden_meta_boxes’ ) );

function default_hidden_meta_boxes($hidden)
{
$hidden[] = ‘addthis’;
return $hidden;
}
[/php]

Now the addthis metabox will be hidden by default. Next time you add a post meta box to WordPress inside a plugin, ask your self if it’s one that all of your plugin users will need.

Learn more about AddThis for WordPress 2.1

Get AddThis Refresh


We just launched an updated process for getting AddThis. We took a multipage process that wasn’t always clear and condensed it down to one page. Together with my talented coworkers, we created what I think is a much simpler way to go from wanting sharing tools on your site to putting them there.

Head on over to Get AddThis and then let me know what you think?

Bonus:  Our creative director, Jeff Wong, talks a bit about the overall refresh on his site.