Have you ever seen an AddThis™ button? Apparently, it is the “#1 bookmarking and sharing service” and I’m not going to lie. I see them everywhere. It’s actually a very good idea. But what if you don’t want 50+ icons on your site? Or what if JavaScript is disabled on your visitors computer? Or you don’t want to affiliate with some of those services? You can just do it yourself!

Basically, each online service such as Technorati, Digg and del.icio.us (these are just a few examples) allow users to share content passed through a simple URL. I’m going to share just the ones that I use on this blog:

<a href="http://technorati.com/faves?add=[URL]" title="Technorati" target="_blank"><img src="./icons/technorati.png" alt="Technorati" class="shareIcon" /></a>
<a href="http://twitter.com/home?status=[TITLE]%20%2D%20[URL]" title="Twitter" target="_blank"><img src="./icons/twitter.png" alt="Twitter" class="shareIcon" /></a>
<a href="http://www.facebook.com/sharer.php?u=[URL]&t=[TITLE]" title="Facebook" target="_blank"><img src="./icons/facebook.png" alt="Facebook" class="shareIcon" /></a>
<a href="http://www.myspace.com/Modules/PostTo/Pages/?u=[URL]&t=[TITLE]" title="MySpace" target="_blank"><img src="./icons/myspace.png" alt="MySpace" class="shareIcon" /></a>
<a href="http://del.icio.us/post?url=[URL]&title=[TITLE]" title="Del.icio.us" target="_blank"><img src="./icons/delicious.png" alt="Del.icio.us" class="shareIcon" /></a>
<a href="http://www.stumbleupon.com/submit/?url=[URL]" title="StumbleUpon" target="_blank"><img src="./icons/stumbleupon.png" alt="StumbleUpon" class="shareIcon" /></a>
<a href="http://digg.com/submit?phase=2&url=[URL]" title="Digg" target="_blank"><img src="./icons/digg.png" alt="Digg" class="shareIcon" /></a>
<a href="http://www.diigo.com/post?url=[URL]&title=[TITLE]" title="diigo" target="_blank"><img src="./icons/diigo.png" alt="diigo" class="shareIcon" /></a>
<a href="https://favorites.live.com/quickadd.aspx?marklet=1&mkt=en-us&url=[URL]&title=[TITLE]&top=1" title="Windows Live" target="_blank"><img src="./icons/windows.png" alt="Windows Live" class="shareIcon" /></a>

Just paste this code into your website, upload the icons supplied with this tutorial, swap the [URL] and [TITLE] tags with your own values and you’re done! Just remember that the [URL] and [TITLE] tags must be replaced with URL-encoded values. This can be achieved easily using PHP’s built-in urlencode() function.

A full list of services, icons and URLs can be found at Xillent Studios (which I modeled this tutorial after). Click here to download the source files.

Tags: Awesome, Tutorials