BOOM! 1000th post

This GitHub/CoderDojo announcement was my 1000th post on tekArtist. :)

It’s been a wild ride since my first post under that name online in 2006, originally on Blogger, but promptly followed by a move to WordPress in 2007. It ultimately led to me getting the best job of my life at Automattic, wrangling up the most-awesomest-est WordPress.com code everyday, just for you. Turns out happiness is a blog… err, site.

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.

The New Blogger.com Is Live and Out of Beta

The new Blogger service is coming out of beta as I’m writing this (2006-12-19, between 8:30 and 8:45 PM EST), and you’ll notice that everything that was going to beta.blogger.com before is now being handled by www2.blogger.com. This post is actually being served by the new Blogger environment.

Here are screenshots of what we were faced with for a few minutes.



All seems to now be back online, since I can post this, and you can read it. :)
A bit sluggish right now (still caching?), but back and kicking nonetheless.

The reason I found out was that I was writing another post when I noticed a most likely AJAX activated box, under the editing area, that was warning me that the app could not connect to the db for saving. Advanced warning? Very nice feature in and of itself, if true, since I don’t remember clicking the save or publish buttons. Would be interesting to implement if not. Might have been the live preview though, but I didn’t think the view switch required a remote connection. Might be iframe-based. Argh, now I’m curious and I’ve got to look into this… ;)

So big thanks, congratulations, and keep up the great work Blogger devs!

Considering the service was down for the public for what I estimate to be around 15 minutes, that was one smooth upgrade, especially considering the scale. I deal with systems that have thousands of concurrent signed-in sessions, and I know what that means, so I can only imagine what they are facing…

Now this puts a whole new spin on a previous post I wrote just a few days ago. The subject might just become a lot more interesting to a lot more people who now have to switch their accounts and blogs to the new platform. See Integrating the Digg Box in your Blogger Beta Posts.

Update: 2006-12-19 ~ 9:10 PM:

It’s confirmed. From the Blogger homepage: We’re out of beta and ready to go.

Also, note the new no beta logo, once logged in:

This post, as it turns out, is truly an homage to what Blogger is all about to me: a publishing tool for life, as it happens, in real time.

Update: 2006-12-20 ~ 8:15 AM:

Wow, the speed improvements are considerable! :)

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>

First post

Well, I’ll stick with tradition for my first post, and go for the classic Hello World!

I dropped off the blogosphere a couple of years ago because my custom-built solution bogged down when I had to quickly move away from a bankrupt web host to a new provider. Family life and professional commitments taking priority over my toy projects, I never really had a chance to pick up where I had left.

But thanks to new features my team and I are looking forward to implement in the CMS we develop and run for McGill University, I’m now provided with the opportunity to do so with a hint of productivity in mind. Let’s call it, uh… research! Yeah, that’s it, research! ;)

So there you have it, let’s roll. But please bare with me, as I’m just starting to get cozy in Blogger’s cribs.