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.

Update: 2007-07-26: Updated formatting after import from Blogger.com.

Comments

12 responses to “Integrating the Upgraded Digg Tools in Blogger”

  1. Rohit Malik Avatar
    Rohit Malik

    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

  2. stephdau Avatar
    stephdau

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

  3. Zigurd Mednieks Avatar
    Zigurd Mednieks

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

  4. stephdau Avatar
    stephdau

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

  5. Gotaku Avatar
    Gotaku

    thanks, that was really helpful!

  6. stephdau Avatar
    stephdau

    @gotaku: happy to be of help. 🙂

  7. Samiq Avatar
    Samiq

    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

  8. Darkmaer Avatar
    Darkmaer

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

  9. stephdau Avatar
    stephdau

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

  10. snydez Avatar
    snydez

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

  11. stephdau Avatar
    stephdau

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

  12. gjritter Avatar

    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?

    This is a link to the article that should have 5 diggs as of now:

    http://codespin.blogspot.com/2008/01/installing-ubuntu-710-on-microsoft.html

Leave a Reply to snydez Cancel reply

Your email address will not be published. Required fields are marked *