Digg is Hiring LAMP Programmers

From Joe’s shout:

It’s 6PM on a Thursday night and I’m about ready to head over to the Open Web Awards presented by Mashables.com to celebrate Digg’s wins with a few of my fellow Diggers. The only downer is that we don’t have more Diggers to share the fruits of our labor with.

I went to San Francisco last June to meet with the Digg team, and I can certify that if you have the skills, already live in the area or are willing to move there, you MUST apply. It’s not just for show, this team really rocks!

Unfortunately (arguably), I can’t move to SF, family and all, so this one’s not for me.

Digg Images and New Categories Launch Tonight

From Digg the Blog: Images and new categories launch tonight:

Hey everyone. Believe it or not, the dedicated images section you’ve been waiting for finally goes live later tonight. Lots of changes in this release: New universal taxonomy, new images cawler, sorting and duplicate image detection, etc.

I know someone who worked hard on this one, and must be happy to see it go out the door. Nervous, but happy.

We Should Not Bite the Hand that Diggs

I’ve been noticing that Digg has been getting a substantial amount of cr*p about things they’ve done on and with the site recently. Nothing new or exceptional, as every popular Web outfit gets the community treatment once in a while, but now that the dust settled a bit, I just wanted to express the following thoughts.

I had the pleasure to meet with some of the Digg crew in San Francisco last month, coincidentally hours before they released their new commenting system. What I saw was a group of people who, on top of being passionate about their respective vocations, actually believe in the product they bring us. This is a relatively rare and precious thing, and I think that as a community, we should nurture it as much as we can.

I’m definitely not saying we should just fall into blind fanboy-ism and idolize their every actions, but I do think that there’s a [not so] fine line between constructive criticism, which is usually welcomed by any self-respecting professional, and plain old bashing, which can be the most depressing aspect of public releases. And it’s not like they’re not listening (1, 2).

Yes, I do think that a balance between surprise releases and usability testing could gain to be developed. And yes, I do understand that sudden changes to something you enjoy can be offsetting for users. But I also know that they’re cultivating a tight-group/almost-family-like atmosphere amongst their ranks, and that the last thing I want is for the people behind the code to be nudged anywhere close to just being yet another bunch of salary makers, in yet another faceless corporation.

So I say, keep on guys, and thanks for your efforts. I’ll happily keep on digging and watching the site evolve.

And no, I’m not going to submit my own post to Digg. ;)

Web 2.0 Expo and Conference

The O’Reilly Web 2.0 Expo is just finishing up, and my co-worker and I had a blast with most of it. Working in the academic sphere, it really feels great to get first hand confirmation that we are perfectly on track with the rest of the industry with our vision of what is to come. Now, if only we were given the means to do it all as fast as we can dream it, which is always a challenge in a large public institution. But we’re working on that. :)

One of the highlights of the conference for me, was to find out (confirm) how close the Digg architecture is to the one that we’ve been developing for our university for many years now: LAMP (though we use PostgreSQL), memcache, Linux, clustering, etc. They actually seem to be facing some challenges that we’ve already tamed in the last year and a half. They’re hiring, by the way.

On the other hand, it was my first time in San Francisco (about time…), and I won’t lie: it’s even better than I imagined it would be! Truly a fantastic city, populated with wonderful people. First time, but definitely not the last one, especially given that I just don’t have the time to stay a few extra days to visit Berkeley, Oakland, San Jose, Santa Cruz, Cupertino, Mountain View, etc. Next time!

On this, I’m going to go and enjoy the city before I have to leave tomorrow morning.

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.

Integrating the Digg Box in your Blogger Posts

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

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>