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?

Possibly related posts: (automatically generated)