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.

8 comments:

Anonymous said...

I'm having two problems. This first, I don't have a BACKLINKS comment in my template, so I added the link snippet after :

div class='post-footer'

Second, the XML won't parse. I get the error:

Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The reference to entity "url" must end with the ';' delimiter.

Any ideas? My template is Thisaway (Blue).

Thanks,
Michael

Sidu said...

Michael,
For your first problem:
You can also drop it in after
>span class='post-comment-link'<
> some stuff we don't care about <
...
>/span<
>!-- Digg it --<
>span class='post-comment-link' expr:id='"digg-link-"+data:post.id'<
>/span<

For your second problem:
My bad. I've added an update apologising for the screw-up. I forgot to compensate for blogger rendering any escaped HTML I typed back into HTML. The error you got was because there's an & in the string instead of &amp; - I'd typed &amp; in my post and failed to notice in the preview that blogger was rendering it back as &. Bottom line - all urls should only contain escaped HTML.

HTH,
Sid.

Sidu said...

PS: I'm afraid I haven't actually tested this, Michael, since it's past 3 am and I have to present at Barcamp in a few hours and need to prepare for that.
Please do let me know if this fixes your problems.

Artie said...

I got this working quite well on my own blog, thanks so much!

WizardMan said...

Hey,

Thanks for the super article it worked like a bomb first time. What I wanted to ask was how do I change the font colour of that link now. I'm sorry my coding knowledge is SHODDY!

WizardMan

Sidu said...

wizardman,
The simplest thing you can do is to tweak the colours through Blogger (go to your Blogger dashboard -> click 'Layout' -> click 'Fonts and Colours'). Unfortunately the principle of Tanstaafl still applies - the price you pay for this convenience is that you will be changing the colour of all links on your blog. Do let me know if this isn't sufficient for your needs and I'll dig into the CSS and try to figure something out :-).

WizardMan said...

ok...I've got it working. How do I replace the "digg this" text link with the DIGG THIS graphic i.e. img alt='Digg!' height='20' src='http://digg.com/img/badges/100x20-digg-button.gif' width='100'/

Thanks

Jordan Retro 5 said...
This comment has been removed by a blog administrator.