Keep it simple: Use basic links
Most social services support direct linking to share forms, which can be populated using a proper request. This means the URL of the target content (and sometimes title) must be passed in the query string (e.g. "?url=http://stritar.net"). In case you require a simple solution that doesn't require a lot of space, or you would like to style your share buttons on your own, this could be what you're looking for.
Facebook: http://facebook.com/sharer.php?u=<%=contentUrl%>
Twitter: http://twitter.com/?status=<%=contentTitle%> <%=contentUrl%>
Reddit: http://reddit.com/submit?url=<%=contentUrl%>&title=<%=contentTitle%>
Digg: http://digg.com/submit?url=<%=contentUrl%>
Delicious: http://delicious.com/post?url=<%=contentUrl%>&title=<%=contentTitle%>
StumbleUpon: http://stumbleupon.com/submit?url=<%=contentUrl%>&title=<%=contentTitle%>
Keep it simpler: Use AddThis
If you're not a demanding users and you're OK with a plain solution, the service AddThis may be just what you need. Set the parameters and you're good to go, and the number of supported services is really huge (and you also get the Print button).
<div class="addthis_toolbox addthis_default_style">
<a class="addthis_button_facebook_like" addthis:url="<%=contentUrl%>"></a>
<a class="addthis_button_tweet" addthis:url="<%=contentUrl%>"></a>
<a class="addthis_counter addthis_pill_style" addthis:url="<%=contentUrl%>"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js"></script>
Possible modifications: too many to mention
More info: http://www.addthis.com/
Facebook
So, you'll rather go for the real thing? Let's begin with Facebook. If you're trying to get the code for the Like button and it says you have to be a registered developer, don't worry, just logout and everything will be great. After that you will be offered with two sets of code, both of them work. I used the second one, which also support "Send to".
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<fb:like href="<%=contentUrl%>" send="false" layout="button_count" width="130" show_faces="false" action="like" font=""></fb:like>
Possible modifications: layout (standard, button_count, box_count), colorscheme (light, dark), action (like, recommend), show_faces, font, width, send (add send button), etc.
More info: http://developers.facebook.com/docs/reference/plugins/like/
Twitter
Since Twitter introduced the new Tweet button, the original TweetMeme button started to behave strangely (sometimes it doesn't count tweets correctly). On the other hand, the official Tweet button doesn't count the tweets for older posts, so all your viral posts from the past will show 0 tweets (and I was so proud one of my posts got more than 100 retweets!). Your choice, I've decided to go for the new one.
<a href="http://twitter.com/share" class="twitter-share-button" data-url="<%=contentUrl%>" data-count="horizontal">Tweet</a>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
Possible modifications: data-count (vertical, horizontal, none), which modifies the layout. You can also set the default text and specify @via, etc.
More info: http://twitter.com/goodies/tweetbutton
Reddit
Reddit is a great community that can get you quite a bit of traffic if your topic is more on the geeky side.
<script type="text/javascript">
reddit_url='<%=contentUrl%>';
</script>
<script type="text/javascript" src="http://reddit.com/static/button/button1.js"></script>
Possible modifications: tens of different layouts
More info: http://www.reddit.com/buttons/
Digg
Since Digg's last upgrade, I haven't been seeing any traffic from it, but it's nice to dream about the old times. Not working properly on FF2.
<script type="text/javascript">
(function() {
var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0];
s.type = 'text/javascript';
s.async = true;
s.src = 'http://widgets.digg.com/buttons.js';
s1.parentNode.insertBefore(s, s1);
})();
</script>
<a class="DiggThisButton DiggCompact" href="http://digg.com/submit?url=<%=contentUrl%>"></a>
Possible modifications: class (DiggWide, DiggMedium, DiggCompact, DiggIcon), which modifies the layout.
More info: http://about.digg.com/downloads/button/smart
Delicious
We'll probably be seing a new version of Delicious button soon, but for now, you can either put a simple link without the count to your blog or some hacking is required. You practically have to make your own button that retrieves the data from Delicious and puts it into correct HTML tags. For advanced users only.
<span id="deliciouscount" style="font-size: 12px; font-weight: bold;"></span>
<a id="deliciouslink" style="font-size: 12px; font-weight: bold; text-decoration: none;" target="_blank" title="View details"></a>
<script type='text/javascript'>
function displayURL(data) {
var urlinfo = data[0];
if (urlinfo == null) {
document.getElementById('deliciouscount').innerHTML = "Bookmarks: 0";
return;
}
else {
document.getElementById('deliciouslink').innerHTML = "Bookmarks: " + urlinfo.total_posts;
document.getElementById('deliciouslink').href = 'http://delicious.com/url/' + urlinfo.hash;
}
}
</script>
<script src="http://badges.del.icio.us/feeds/json/url/data?url=<%=contentUrl%>&callback=displayURL" ></script>
Possible modifications: the world is not enough
More info: contact me
StumbleUpon
I'm not sure if I'm using StumbleUpon properly, but I haven't managed to get a single stumble since I started blogging, so I temporarily removed it from my blog (due to lack of space).
<script src="http://www.stumbleupon.com/hostedbadge.php?s=2&r=<%=contentUrl%>"></script>
Possible modifications: many different layouts
More info: http://www.stumbleupon.com/badges/
Google +1
It's too soon to say if +1 button will be a game changer, or it's just too lame, too late, like other Google's social services. We'll see. Not working properly on FF2, FF3.5 and IE7.
<script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script>
<g:plusone size="medium" href="<%=contentUrl%>"></g:plusone>
Possible modifications: size (small, standard, medium, tall)
More info: http://www.google.com/webmasters/+1/button/index.html
LinkedIn (Update 28.11.2011)
LinkedIn may not be your dynamic social platform, but perhaps you may still find use for it.
<script src="http://platform.linkedin.com/in.js" type="text/javascript"></script>
<script type="IN/Share" data-url="<%=contentUrl%>" data-counter="right"></script>
Possible modifications: layour (vertical, horizontal, nocount)
More info: https://developer.linkedin.com/plugins/share-button
Special: Like Facebook page and follow on Twitter
If you have a Facebook page, all you need to do is point the Like button to the URL of the page, and people will automatically become "fans". Similarly, you can implement the new Twitter Follow button and hopefully get new followers.
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<fb:like href="http://facebook.com/neolab.si" send="false" layout="button_count" width="130" show_faces="false" action="likel" font=""></fb:like>
<a href="http://twitter.com/gstritar" class="twitter-follow-button" data-show-count="false" >Follow @gstritar</a>
<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>
Other platforms
All of these buttons can be modified to some extent, and most of them will work without the specified URL. But you'll probably need to set it anyways so they will also work on your homepage with many posts.
The cases presented were made for asp.net, but they can be modified for other platforms such as WordPress or Blogger by replacing the <%=contentUrl%> with something like <?php the_permalink() ?> or data:post.url (sorry, no experience). But if you managed to get the Facebook Like button to work, you will surely be able to modify others too.
There you go, time to share.