How to optimize the AddThis social bookmarking widget

Do you have web pages — not blog pages — that you want to encourage visitors to share on social bookmarking sites?

If so, the AddThis widget to be the best choice for non-blog pages. The reason: its menu opens up when the user hovers. No click needed. ShareThis, on the other hand, requires the user to click. Seems like a minor detail, but hovers are about 5x more common than clicks. That means a potentially 500% better view-to-share conversion ratio.

The problem is, AddThis shows a number of bookmarking services that are irrelevant, based on this report, and will only distract users. To keep the user focused and maximize conversions, use the following customization for AddThis. The extra line I added is in red.

<!– AddThis Button BEGIN –>
<script type=”text/javascript”>
var addthis_pub=”your_addthis_userid”;
var addthis_options = ‘email, facebook, myspace, digg, twitter, stumbleupon, more’;
</script>

<a href=”http://www.addthis.com/bookmark.php?v=20″
onmouseover=”return addthis_open(this, ”, ‘[URL]‘, ‘[TITLE]‘)”
onmouseout=”addthis_close()”
onclick=”return addthis_sendto()”>

<img src=”http://s7.addthis.com/static/btn/lg-share-en.gif”
width=”125″ height=”16″ alt=”Bookmark and Share” style=”border:0″/>
</a>

<script type=”text/javascript”
src=”http://s7.addthis.com/js/200/addthis_widget.js”>
</script>
<!– AddThis Button END –>

This will show only the most relevant services on the main display for the widget: Email, Facebook, MySpace, Digg, Twitter, and StumbleUpon. A More link lets users access other services.

A further customization would be to display logos with better brand recognition — Facebook, MySpace, Twitter, etc. — similar to what Sociable does for WordPress blog posts. AddThis allows this customization. But that is a tutorial for a later date.

Update: I added to the tutorial. Here goes:

To display an image with better brand recognition, change the src parameter in the img tag code above…

<img src=”http://s7.addthis.com/static/btn/lg-share-en.gif“
width=”125″ height=”16″ alt=”Bookmark and Share” style=”border:0″/>

…so that it uses your own custom image. For example:

<img src=“http://alsargent.com/addthis.png”
alt=“Bookmark and Share” style=“vertical-align:middle; border:0″/>

This displays the logos of Facebook, MySpace, Digg, StumbleUpon, and Twitter. You can see this in action on the bottom of my personal web site, alsargent.com. (WordPress.com strips out <script> tags from postings; otherwise I would have just shown the example on this page.) Feel free to use this addthis.png on your own site, if you like.

Another little tweak to help the conversion rates is to add a bit of CSS to the img tag…

<img src=“http://alsargent.com/addthis.png”
alt=“Bookmark and Share” style=“vertical-align:middle; border:0″/>

… so that it vertically aligns with the text prompt, Share this using:, which helps the user understand what the widget does. Summing up, here’s the modified code, with all changes marked in red:

<!– AddThis Button BEGIN –>
<script type=”text/javascript”>
var addthis_pub=”alsargent”;
var addthis_options = ‘email, facebook, myspace, digg, twitter, stumbleupon, more’;
</script>

Share this using:
<a href=”http://www.addthis.com/bookmark.php?v=20″
style=”border-bottom-style:none;” onmouseover=”return addthis_open(this, ”, ‘[URL]‘, ‘[TITLE]‘)”
onmouseout=”addthis_close()” onclick=”return addthis_sendto()”>

<img src=”http://alsargent.com/addthis.png“
alt=”Bookmark and Share” style=”vertical-align:middle; border:0″/></a>

<script type=”text/javascript”
src=”http://s7.addthis.com/js/200/addthis_widget.js”></script>
<!– AddThis Button END –>

I know, this is quite a bit to optimize a small widget. But remember, attention to the details is important. This steps can increase the number of people who post your page to social media sites, and in turn can drive more traffic to your site.

Your turn

What do you think? Do you prefer something other than the AddThis widget? What customizations have you found useful?

Focus social bookmarking on Email, Facebook, MySpace, and Digg

Social bookmarking widgets have appeared on many blog posts and other web pages. It’s understandable why: they drive traffic to your site, and they increase inbound links and thus PageRank.

But which social media sites should your social bookmarking widget include?

After all, there are dozens of options for sharing. In fact, Sociable supports over 100 social media sites.

It’s a dilemma for online marketers: present too few choices, and you risk missing a popular bookmarking service. Provide too many, and you will confuse your visitors.

ShareThis just shed a bunch of light on this question with this report. The highlight is this breakdown of social media services by popularity:

ShareThis breakdown of social bookmarking popularity

The most popular social media services are:

1. Good ol’ email, with a whopping 57% of usage.
2. Facebook, with 21% share — and the fastest growing service
3. MySpace, with 5% share but declining
4. Digg, with 2% share
5. StumbleUpon, Twitter and Technorati all have <1% share

(Update: turns out that AIM was not in the top five, based on corrected information from ShareThis. So I’ve removed them from the list above.)

This data is surprising. First, where’s LinkedIn? (Perhaps people don’t want to share interesting articles on a site used primarily for professional networking.) Why is Twitter so low in the rankings? (For all Twitter’s press, it’s important to note that its traffic is still well below that of Facebook.) And MySpace is hanging in there quite well.

So, when you set up your social bookmarking widget, focus on the most popular services: Email, Facebook, MySpace, (maybe) AIM, Digg, StumbleUpon, Twitter, and Technorati. Of course, this breakdown won’t work for all types of visitors. For instance, technical audiences would probably want to post to Slashdot and Reddit.

What do you think? Is the ShareThis data valid in your opinion? Do you track which bookmarking services your visitors use?

Four essential online marketing resources

Today, I shared the links below with a friend who’s starting a business. In the spirit of helpfulness, I’m republishing them below.

Granted, these won’t be new to anyone reads the major social marketing / Web 2.0 blogs out there. Nonetheless, these are solid resources for online marketing that might not be known to mainstream business folks.

• Presentation design: http://www.presentationzen.com/
• Inspirational presentations often have minimal words and great pictures. Here’s where to find the latter: http://flickr.com/ (tip: sort pictures by “Most Interesting”)
• Social marketing is a very capital efficient way to market. This guy’s a master: http://www.chrisbrogan.com/
• Screencasts on your web site — of you talking about your service, or better yet, one of your customers talking about it — are very effective. Here’s a very easy way to create them: http://www.jingproject.com/ Then upload to YouTube — lots of traffic there, and thus people who could potentially find your service useful.