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&#8243;
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&#8221;
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”&gt;
</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&#8221;
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&#8243;
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&gt;
<!– 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?

A simple Robots.txt file for WordPress

I like to practice what I call Lazy SEO. I am “lazy” in that I like to get my blog SEO configuration done quickly so that I can return to what matters: actually writing. I bet others that read this have a similar outlook.

With that in mind, here’s a robots.txt file that I just put together for one of my clients. It’s not the most sophisticated robots.txt out there, but it seems to get the job done for a business that’s has modest SEO needs: ensure that Google’s search results do not contain any irrelevant pages, such as admin pages.

I put this together based on what I learned recently using Google Webmaster Tools and Ask Apache. It assumes a self-hosted WordPress instance with the Google XML sitemaps plugin installed. Hope you find it useful. Here goes…

User-Agent: *

1. don’t search for files in these directories

Disallow: /_*
Disallow: /cgi-bin/
Disallow: /wp-admin/
Disallow: /wp-includes/
Disallow: /wp-content/backup*
Disallow: /wp-content/themes/
Disallow: /wp-login.php
Disallow: */trackback/

1. For Google XML sitemaps

Sitemap: http://example.com/sitemap.xml.gz

As you can see, this is pretty simple. For instance, it intentionally leaves out specific entries for different kinds of bots (Google image, Adsense, Adwords, etc.) since we don’t see those bots as critical to the needs of my client’s (simple) business.

So what do you think of this approach — good enough or woefully lacking?