HOWTO: Make Your Own AddThis Social Bookmarking Sharing Widget (Sharing URLs)

This not a beginners tutorial.  You should be somewhat familiar with CSS and JavaScript to understand what I'm doing below.

First you'll need a list of all social bookmarking sharing URL's.  These are the URL's your visitors will be redirected to when sharing a page.  Using a few hacks, I snagged a list of all sharing service URL's from AddThis.com.  Here are a few examples of social bookmarking URL's:

http://www.stumbleupon.com/submit?url={url}&title={title}
http://friendfeed.com/share?url={url}&title={title}
http://technorati.com/faves/?add={url}
http://twitter.com/home?status={url}

Note that our JavaScript will have to replace {title} and {url} with the current page title and page URL.  Now, you'll need a nice set of icons for each of these sharing services.  You can use my default icon set here.  This is a sprite, and we'll need to use CSS to split the image up into individual icons.  You can find my sharing sprite CSS here.  Here are the CSS classes that define my sharing widget sprite:

div.sharewith { width: 148px; height: auto; }
p.shareitem { background:url(sharing-sprite.png) no-repeat;
                 padding:0 0 0 22px; height: 16px; }

p.backflip { background-position: 0px -64px; }
p.blinklist { background-position: 0px -112px; }
p.blogmarks { background-position: 0px -128px; }
p.delicious { background-position: 0px -176px; }
p.digg { background-position: 0px -192px; }
p.facebook { background-position: 0px -240px; }
p.fark { background-position: 0px -256px; }
p.faves{ background-position: 0px -144px; }
p.friendfeed { background-position: 0px -304px; }
p.furl { background-position: 0px -320px; }
p.google { background-position: 0px -336px; }
p.linkagogo { background-position: 0px -384px; }
p.linkedin { background-position: 0px -400px; }
p.magnolia{ background-position: 0px -432px; }
p.mixx { background-position: 0px -464px; }
p.myspace { background-position: 0px -496px; }
p.netvouz { background-position: 0px -528px; }
p.newsvine { background-position: 0px -544px; }
p.pownce { background-position: 0px -560px; }
p.propeller { background-position: 0px -576px; }
p.reddit { background-position: 0px -592px; }
p.slashdot { background-position: 0px -672px; }
p.stumbleupon { background-position: 0px -704px; }
p.technorati { background-position: 0px -752px; }
p.twitter { background-position: 0px -784px; }
p.yahoo { background-position: 0px -512px; }

Note that my "Share With" widget does not show every sharing service.  I'm only showing the services that I care about; you might want to show more.  If that's the case, then you'll need to adjust the CSS accordingly by adding a few new CSS classes.

On each anchor in my sharing widget, I've added a sharewith attribute.  This attribute defines the sharing service URL that the user will be forwarded to when sharing a page from my blog.  Here's an example for StumbleUpon:

<p class="shareitem stumbleupon">
  <a href="http://www.stumbleupon.com/submit"
   sharewith="http://www.stumbleupon.com/submit?url={url}&title={title}">
     Stumble Upon
  </a>
</p>

Now, for the fun part: jQuery.  You'll need to write a tiny event handler that will bind to each sharing link.  Specifically, a click event handler that is bound to each link with a sharewith attribute.  This handler should go in the $(document).ready function of your jQuery code:

$("a[sharewith]").click(function(ev){
   var rel = $(this).attr("sharewith");
   var url = encodeURIComponent(self.location.href);
   var title = encodeURIComponent($("title:first").html());
   rel = rel.replace("{url}",url);
   rel = rel.replace("{title}",title);
   self.location.href = rel;
   return false;
});

Note we get the current page URL (the URL of the page the user wants to share) by escaping self.location.href.  We get the title by reading the <title> tag of the document.  And finally, we get the sharing service URL by reading the sharewith attribute on the clicked link.  Once we get the sharewith attribute, we have to replace {title} and {url} with the page title, and the current page URL.  Once all of the pieces are filled-in, we can redirect the user by setting self.location.href.

Enjoy.
  

FOLLOWUP 4/25/09:

I recently found out that Ma.gnolia is no longer in service.  When making your own widget, be sure to avoid Ma.gnolia.


FOLLOWUP 6/23/09:

Aerial Perspective, a web and graphic design firm, recently published a nice blog post on using the code and tools included on this page to make your own social bookmark sharing widget.  The source code for their sharing widget can be downloaded here.  Their web-site appears to be having some trouble last I checked; their source code for this widget is unavaialble as of 11/14/09.