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&url=" + encodeURIComponent('<data:post.url/>').slice(0,250) + "&title=&bodytext=&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&url=" + encodeURIComponent(postUrl).slice(0,250) + "&title=&bodytext=&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&url=" + encodeURIComponent(postUrl).slice(0,250) + "&title=&bodytext=&topic=programming";
with
var dzoneUrl = "http://www.dzone.com/links/add.html?url=" + encodeURIComponent(postUrl) + "&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 & were actually being rendered as &. Now fixed. My apologies for the oversight.
8 comments:
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
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 & - I'd typed & 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.
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.
I got this working quite well on my own blog, thanks so much!
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
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 :-).
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
Post a Comment