Adding a 'digg it' link to your blogger blog

I started out with the intention of filling in the url, title and content in Digg. Frankly, this turned out to be a pain in the neck. All I was able to achieve was to fill in the link in digg - I couldn't get it to automatically fill in the title and contents. Perhaps some day soon, when I learn javascript better and it isn't 4:30 in the morning. It's the nested ' and " symbols in the title and content that messed everything up I suspect - though it could be something more sinister...
At least my sample complies with the rules specified by Digg, like the 250 char limit and the URI encoding.
Here's the javascript, for what it's worth.
Drop this snippet in right before the span marked with the comment <!-- backlinks -->


<!-- Digg it -->
<span expr:id='"digg-link-"+data:post.id' class='post-comment-link'>
</span>
<script type="text/javascript">
var linkholder = document.getElementById('digg-link-"<data:post.id/>');
var childNode = document.createElement('a');
var contentText = encodeURIComponent('<data:post.url/>');
var diggUrl = "http://digg.com/submit?phase=2&amp;url=" + encodeURIComponent('<data:post.url/>').slice(0,250) + "&amp;title=&bodytext=&amp;topic=programming";
childNode.appendChild(document.createTextNode('Digg this!'));
childNode.setAttribute('href',diggUrl);
childNode.setAttribute('target','blank');
linkHolder.appendChild(childNode);
</script>



Update: 20061127, 0100
I found that the code snippet keeps losing it's formatting and the code tags which wrap it and degenerates into an unreadable muddle. I've stuck it into a pair of pre tags now. Hopefully that will keep it in its place.

Update: 20061127, 0130
I humbly apologise for the crap code in the sample. I don't know what I was thinking. I've refined it so it doesn't repeat itself all over the place; here it is:
Drop the following in right after the opening <body> tag and before the div which is the outer-wrapper:


<body>
<script type='text/javascript'>
var addDiggItLinkTo = function(postId, postUrl){
var linkHolder = document.getElementById('digg-link-'+postId);
var childNode = document.createElement('a');
var contentText = encodeURIComponent(postUrl);
var diggUrl = "http://digg.com/submit?phase=2&amp;url=" + encodeURIComponent(postUrl).slice(0,250) + "&amp;title=&amp;bodytext=&amp;topic=programming";
childNode.appendChild(document.createTextNode('Digg this!'));
childNode.setAttribute('href',diggUrl);
childNode.setAttribute('target','blank');
linkHolder.appendChild(childNode);
}
</script>
<div id='outer-wrapper'>


This bit is what repeats after every post - as you can see, it's much shorter now. Drop it in right before the <!-- backlinks --> comment:


<!-- Digg it -->
<span class='post-comment-link' expr:id='"digg-link-"+data:post.id'>
</span>
<script type='text/javascript'>
addDiggItLinkTo('<data:post.id/>', '<data:post.url/>');
</script>


Update: 20061127, 01:45
Someone on Digg had a 'Dzone this!' request after reading this. It's simple. First replace all mentions of 'Digg' in the sample above with 'Dzone' (match the existing casing - 'digg' is 'dzone'). Then replace the line

var diggUrl = "http://digg.com/submit?phase=2&amp;url=" + encodeURIComponent(postUrl).slice(0,250) + "&amp;title=&bodytext=&amp;topic=programming";

with

var dzoneUrl = "http://www.dzone.com/links/add.html?url=" + encodeURIComponent(postUrl) + "&amp;title=";

and you're done. If you wan't both Digg and Dzone on you blog, do the Digg sample twice and change the second one to Dzone ;-)
Thanks to Marc Chung.

Update: 20061203, 0310
Thanks to Michael's comment, I realised that all the ampersands (&) in the url strings in my post which should have been escaped to read as &amp; were actually being rendered as &. Now fixed. My apologies for the oversight.
Post a Comment