Digg.com released a worthy upgrade to their site integration tools today, with such neat new features as combining the submission process and Digg box, etc. Since I have previously published a method of integrating the first incarnation of the Digg tools in your [new] Blogger posts, it is now time to post an update to take the new features in consideration.
Before you start, make sure that your blog is set to save post pages. This is a Digg (and other social sites) requirement, since we need unique URLs to submit. To verify, go to your Blogger Dashboard » Settings » Archiving » Enable Post Pages? Select yes and save.
Then go to your Blogger Dashboard » Layout » Edit HTML. Be sure to check the Expand Widget Templates checkbox.
Locate the following code in the template’s XML:
<p><data:post.body/></p>
And replace it with:
<p>
<span style="margin-right: 10px; float: left;">
<script>
digg_url = '<data:post.url/>';
</script>
<script src="http://digg.com/tools/diggthis.js"> </script>
</span>
<data:post.body/>
</p>
You’re done! It’s now as simple as this.
You can also try the new, more discreet, compact mode:
<p>
<data:post.body/>
<span style="margin-top: 5px; float: right;">
<script>
digg_url = '<data:post.url/>';
digg_skin = 'compact';
</script>
<script src="http://digg.com/tools/diggthis.js"> </script>
</span>
</p>
Personally though, I’m not too keen on displaying Digg boxes showing 0 diggs when the content has not been submitted yet, nor am I interested in showing the digg box on all my posts. So I’m still going to use my original solution and just update the URL of the Digg javascript from /api/ to /tools/ in my template. Overall, it is a more involved option, but I’d rather have flexibility than ease of use.
Ultimately, I’d like to see another mode (digg_skin variable) where unsubmitted content sports a simple button (like the Digg Guy), and the box only starts to show if and after the content has been submitted.
As a side note, it’s probably going to get fixed quickly, but the compact mode of the new tool had a bug with url targeting that made the submit form show in the tiny iframe the Digg javascript outputs.
Update: 2007-07-26: Updated formatting after import from Blogger.com.
hi,I want to add these ‘Add to'(digg etc. i mean) links at the post bottom in my new blogger template.can u provide me the code?Cheers, Rohit
LikeLike
@Rohit: The code for the “Add to” bar is in the previous article.
LikeLike
Great stuff, but sometimes the first line of text wraps over the top of the Digg button. Have any ideas why that happens?
LikeLike
@Zigurd: The CSS on the parent div only has a right-side margin in the example. You could add a top-side one to cope. eg: margin-top: 5px;
LikeLike
thanks, that was really helpful!
LikeLike
@gotaku: happy to be of help. :)
LikeLike
Amazing thanks![… I give it a try just a few minutes ago and came out with this amazing post where Steph explains how to do it quite simple …] Ping back from Samiq Bits
LikeLike
thanks so much….now if i could change the colors since my blog is black and having that white stick out like that makes it kinda ugly…ohwell it works for now THANKS!!!
LikeLike
@Darkmaer: you could try overwriting the white bg through CSS, but I’m not sure how effective it would end up being (rounded corner, etc). Might have to do the same myself in the next interface I’m working on (black bg too).
LikeLike
wow! thank! i’m not really good at new blogger template, so i’m wonder how to change URLpermalink of each post!thank!
LikeLike