Tuesday, February 06, 2007

Integrating the Upgraded Digg Tools in Blogger

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.

16 comments:

rohit malik said...

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

stephdau said...

@Rohit: The code for the "Add to" bar is in the previous article.

Zigurd said...

Great stuff, but sometimes the first line of text wraps over the top of the Digg button. Have any ideas why that happens?

stephdau said...

@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;

Girl Otaku said...

thanks, that was really helpful!

stephdau said...

@gotaku: happy to be of help. :)

samiq said...

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

Darkmaer said...

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!!!

stephdau said...

@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).

Anonymous said...

wow! thank! i'm not really good at new blogger template,
so i'm wonder how to change URLpermalink of each post!
thank!

stephdau said...

@snydez: The Blogger permalink is stored in the data:post.url template tag. You can't change the value of the variable, but you can replace it by whatever URL you might want wherever it's called in your template.

Unknown said...

I', getting this error
------------------------------------
We're sorry, but we were unable to complete your request.

When reporting this error to Blogger Support or on the Blogger Help Group, please:

* Describe what you were doing when you got this error.
* Provide the following error code and additional information.

bX-m2rvww
---------------------------------

James Powell said...

Thanks that was great. You can check it out on my blog The Powell Blog

Anonymous said...

GREAT! thank you, i posted it on my daily photo blog. thank you again.

peace!

codespin said...

This looks like a great solution; I was previously putting the digg script tags in my posts. This was working, but I'd much rather have my template include them automatically.

I've implemented the solution as described in this article, but it's showing my digg count as 0 for both of the stories in my new blog. I know I have 5 diggs for the earliest story. As of now, the 0 is correct for the second story.

Any suggestions on what could be causing this?

Codespin Blog

Mike Richard said...

Great and easy solution to implement on any blog.

Thanks for the quality information.

Mike