Integrating the Digg Box in your Blogger Posts

Update: 2007-02-06: I have posted another how-to to showcase the easiest way to integrate with the newly upgraded Digg tools. On the other end, the following content has also been updated with the new tools' URLs and illustrates another take on integration allowing for more flexibility for content publishers.

Update: 2006-12-19: the new Blogger is out of beta. :) The template hack below is now more valid than ever.

I've been wanting to embed the iconic Digg Story Button in my pages, but unfortunately, the API requires Javascript and tekArtist is currently (2006-12-17) running on the (update: now out of) beta of the Blogger service, which does not allow the <script> tag to be used in blog posts.

Another challenge is that the API expects you to set a variable holding the reference URL on digg.com (urlOfStory above). This means that I also somehow needed to store this URL for each of my dugg posts for the tool to work. Again, easy enough if I could use JS in my blog posts, but not so since I can't here.

In most contexts, the Digg code is fairly simple to embed:

<script>
  digg_url = 'urlOfStory';
</script>
<script src="http://digg.com/tools/diggthis.js"></script>

One thing I did find was a way to add Del.icio.us and Digg hotlinks to your Blogger Beta posts by editing your template, and using widget tags for layout. Javascript is allowed at the template level in Blogger, but since you only have one such template (for the index, posts, listings, etc), flexibility is provided through their custom template markup, which will be important in this context.

I was still short of a place to store the Digg URL at the post level when I remembered that Blogger will let you activate a link field in your blog posts, for people who mainly point to other sites through their post's title (coincidentally, like Digg does too). I primarily use my blog to write original content, so I link my titles to each post's permalink, which let's me use that data field to store, say, a Digg URL. :)

The requirements are met: Javascript support, and a convenient way to store and manage the stories URL on Digg.

Now, will this hack actually work for you?

Are you using Blogger Beta? (update: now out of beta, hack more valid than ever)
If you're not using Blogger, this article will only satisfy your curiousity. If you're using Blogger and haven't converted you blog to the beta version yet, better hurry because you will have to soon.

Is your blog set to save post pages?
This is actually more of a Digg (and other social sites) requirement, since we need different URLs to submit. To verify this in the new Blogger, go to your Blogger Dashboard » Settings » Archiving » Enable Post Pages? Be sure to select yes.

Are you pointing to external URLs through your post titles?
To verify, go to your Blogger Dashboard » New Post. If you see and use a Link text field under the Title field, then this hack might not be for you, since we use the field to store the Digg data. If the feature is off, and you want to use this trick, go to your Blogger Dashboard » Settings » Formatting » Show Link Field. Be sure to select yes.

Are you comfortable editing the raw XML of your Blogger template?
Enough said. If you're still reading at this point, I'll just assume you are.

Are you willing to showcase the fact that you're not Digg-worthy?
;) If you're not into showing how some your posts aren't getting dugg enough (see above?), delete the URL from the Link field, and the box will forever disappear in the swarm's abyss. :)

And now finally, on to the code! Go to your Blogger Dashboard » Layout » Edit HTML. Be sure to check the Expand Widget Templates checkbox.

First locate the following markup:

<h3 class='post-title'>

Remove the code around it involving data:post.link:

<b:if cond='data:post.link'>
...

This ensure we do not have a conflict with the default template behaviour for the link data. Namely, to use the link, when set, instead of permalink as post titles destination (see update below for more details).

Then locate the following markup:

<p><data:post.body/></p>

And replace it with:

<p>
  <b:if cond='data:post.link'>
    <span style="margin: 0px 10px 0px 0px; float: left;">
      <script>
        digg_url = '<data:post.link/>';
      </script>
      <script src="http://digg.com/tools/diggthis.js"> </script>
    </span>
    <data:post.body/>
  <b:else/>
    <data:post.body/>
  </b:if>
</p>

Voilà!

In short: if a link (Digg URL) is set for this post, set the digg_url to the latter and call the Digg API Javascript, with a left floating span so your content wraps neatly around the generated iframe. Else, just show show the post.

For extra Karma, here is also the code for the Add to bar I have at the end of each post. The Digg button will disappear if your are using the above trick, so people do not try to resubmit the post more than once (and since they can Digg it using the box).

Locate the following markup:

<p class='post-footer-line post-footer-line-3'/>

After it, add the following:

<p class='post-footer-line post-footer-addtolinks'>
  Add to:
  <b:if cond='data:post.link == ""'>
    <a expr:href='"http://digg.com/submit?phase=2&amp;url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank' title='Add to Digg'><img align='absmiddle' alt='Digg. ' border='0' height='16' hspace='0' src='http://img2.imagepile.net/images/ycc2106/61822091.png' style='border:none;' vspace='0' width='16'/></a>
  </b:if>
  <a expr:href='" http://www.netscape.com/submit/?U=" + data:post.url + "&amp;T=" + data:post.title' target='_blank' title='Add to Netscape'><img align='absmiddle' alt='Netscape. ' border='0' height='16' hspace='0' src='http://img2.imagepile.net/images/ycc2106/subfolders/icons//99985netscape.png' style='border:none;' vspace='0' width='16'/></a>
  <a expr:href='" http://www.google.com/bookmarks/mark?op=edit&amp;output=popup&amp;bkmk=" + data:post.url + "&amp;title=" + data:post.title' target='_blank' title='Add to Google Bookmarks'><img align='absmiddle' alt='Google Bookmarks. ' border='0' height='16' hspace='0' src='http://img2.imagepile.net/images/ycc2106/35814433.png' style='border:none;' vspace='0' width='16'/></a>
  <a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank' title='Add to Del.icio.us'><img align='absmiddle' alt='Del.icio.us. ' border='0' height='16' hspace='0' src='http://img2.imagepile.net/images/ycc2106/65682475.png' style='border:none;' vspace='0' width='16'/></a>
  <a expr:href='"http://reddit.com/submit?url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank' title='Add to Reddit'><img align='absmiddle' alt='Reddit. ' border='0' height='18' hspace='0' src='http://img2.imagepile.net/images/ycc2106/16304077.gif' style='border:none;' vspace='0' width='18'/></a>
</p>

I'll still keep an eye out for other implementations, but as of now, I'm quite satisfied with the way I found. Hoping it might help others out there.

Now if only I could write diggable content... ;p

Update: 2007-01-18:

People have been asking for more details about the <h3> manipulation for post titles. I had kept the above explanation very generic, because the code I had to change in the template I started from (Tic-Tac) might not be the same than in other templates, but I'll be more specific below.

The code I originally had to generate the post titles was:

<b:if cond='data:post.title'>
  <h3 class='post-title'>
    <b:if cond='data:post.link'>
      <a expr:href='data:post.link'><data:post.title/></a>
    <b:else/>
      <b:if cond='data:post.url'>
        <a expr:href='data:post.url'><data:post.title/></a>
      <b:else/>
        <data:post.title/>
      </b:if>
    </b:if>
  </h3>
</b:if>

Which I replaced with:

<b:if cond='data:post.title'>
  <h3 class='post-title'>
    <b:if cond='data:post.url'>
      <a expr:href='data:post.url'><data:post.title/></a>
    <b:else/>
      <data:post.title/>
    </b:if>
  </h3>
</b:if>