Hierarchical threaded comments; How I did it.

Filed in General, Technology

(Announced in "New blog feature: Hierarchical threaded comments!")

WARNING: Lots of technical jargon!

My blog is a MovableType blog developed by Six Apart Ltd. They also have other blog systems. They're a very smart company. You can read about their products on their web site. Like many other systems, MovableType allows you to add functionality via plugins.

One such plugin designed to implement threaded comments is called MTSimplyThreaded which I installed and experimented with. It could link comments to other comments but it couldn't produce a hierarchical comment scheme so it wasn't what I wanted.

Then I was told about MTThreadedComments. I read the documentation and it seemed to be exactly what I wanted, but it was old and apparently not compatible with my version of MovableType. Not to be dissuaded too easily, I searched for tips about running MTThreadedComments with my version of MovableType on google and I came across a couple of sites; one of them in Korean; which explained what adjustments to MovableType's code needed to be done. Strangely enough, it was the Korean site that told me exactly what I needed to know. I couldn't read the Korean but their code screen shots were self explanatory.

I examined MTThreadedComments' documentation and everything I could find on the internet. I didn't like MTThreadedComments' suggested method of responding to comments. Clicking on any 'Respond' link redirected the reader to another page with a copy of the article text or the comment text that the reader was responding to along with the comment form. This is normally ok but I don't like unnecessary page loads and wanted to come up with a more ideal (in my opinion) way of doing it. I liked the way MTSimplyThreaded worked and after analysing what data MTThreadedComments needed to work, I decided to implement a simple Ajax comment system. The investigation of MTThreadedComments and the analysis of what I wanted to do and how to do it took two full days.

What started out as a simple JavaScript script turned into something much more complicated (it's always the same), and IE's many css bugs made me reconsider my plan to implement MTThreadedComments via Ajax more than once, but I eventually finished it and I'm pretty pleased with it. I just wish that IE supported opacity (without requiring ActiveX). I can fully understand now why so many web developers despise IE. Why is it that a humongous company with unlimited resources can't make a decent (standards based) browser??? All I can say is thank God for Dean Edwards and his IE7 JavaScript script.

Now for the details.

MTThreadedComments on MT 3.3: The details

MT 3.33
MTThreadedComments 0.1.1 (Date: 2003/02/19 17:18:16)

MT Code Edits

You'll need to apply the following edits to MT's code:

(Taking a cue from the Korean site, the new code is coloured red.)

File: mt/lib/MT/App/Comments.pm

Subroutine: _make_comment()


$comment->ip($app->remote_ip);
$comment->blog_id($entry->blog_id);
$comment->entry_id($entry->id);
$comment->author(remove_html($nick));
$comment->email(remove_html($email));
$comment->url(is_valid_url($url, 'stringent'));
$comment->text($text);

## MTThreadedComments patch start ##
$comment->subject($q->param('subject'));
$comment->parent_id($q->param('parent_id'));
## MTThreadedComments patch end ##

File: mt/lib/MT/App/Comments.pm

Subroutine: _send_comment_notification()


my %param = (
blog_name => $blog->name,
entry_id => $entry->id,
entry_title => $entry->title,
view_url => $comment_link,
edit_url => $base . $app->uri_params('mode' => 'view', args => { blog_id => $blog->id, '_type' => 'comment', id => $comment->id}),
ban_url => $base . $app->uri_params('mode' => 'save', args => {'_type' => 'banlist', blog_id => $blog->id, ip => $comment->ip}),
comment_ip => $comment->ip,
comment_name => $comment->author,
(is_valid_email($comment->email)?
(comment_email => $comment->email):()),
comment_url => $comment->url,

## MTThreadedComments patch start ##
comment_subject => $comment->subject,
## MTThreadedComments patch end ##

File: mt/lib/MT/App/Comments.pm

Subroutine: view()


my $ctx = MT::Template::Context->new;
$ctx->stash('entry', $entry);

## MTThreadedComments patch start ##
$ctx->stash('comment_parent_id', $q->param('parent_id'));
## MTThreadedComments patch end ##

File: mt/lib/MT/Comment.pm

Subroutine: the root (i.e., the implicit) routine, at the beginning of the file


column_defs => {
'id' => 'integer not null auto_increment',
'blog_id' => 'integer not null',
'entry_id' => 'integer not null',
'author' => 'string(100)',
'commenter_id' => 'integer',
'visible' => 'boolean',
'junk_status' => 'smallint',
'email' => 'string(75)',
'url' => 'string(255)',

## MTThreadedComments patch start ##
'subject' => 'text',
'parent_id' => 'integer',
## MTThreadedComments patch end ##

and…


indexes => {
ip => 1,
created_on => 1,
entry_id => 1,
blog_id => 1,
email => 1,
commenter_id => 1,

## MTThreadedComments patch start ##
parent_id => 1,
## MTThreadedComments patch end ##

mt_comments Table

Next, you'll need to add two columns to the mt_comments table. I used phpMyAdmin.


comment_subject (text)
comment_parent_id (int)

Implementing my Ajax comments script: The details

If you plan on using my Ajax comments script (which you can get directly from my server) or something based on it:

MT Code Edits

File: mt/lib/MT/App/Comments.pm

Subroutine: post()
at the end of the routine:



return do_preview($app, $app->{query}, '');

return $app->redirect($comment_link);

This returns the comment preview html to the Ajax script which then inserts it into the existing individual archive page.

Comment Preview Template

You will need to edit your Comment Preview Template so that it only returns the html required to preview the comment. That means no <head>, no <body>, nothing except the comment itself and any tags that you need to format it. My xhtml code looks like this:


<MTIfNonEmpty tag="CommentPreviewSubject">
<h2><$MTCommentPreviewSubject$></h2></MTIfNonEmpty>
<$MTCommentPreviewBody$>
<div class="posted">
<p>Posted by: <$MTCommentPreviewAuthorLink spam_protect="1"$> |
<$MTCommentPreviewDate format="%a, %B %e, %Y, %H:%M"$></p>
</div>

Incidentally, the MTThreadedComments plugin does not provide a MTIfCommentPreviewSubject container tag so I had to use MTIfNotEmpty provided by Brad Choate's ifempty plugin.

Comment Error Template

You will also need to edit your Comment Error Template so that it only returns the minimum html required to view it within the Comment Form Error div if an error should occur during final submission of the comment. My xhtml code (it's just 3 lines) looks like this:


<h3>Comment Submission Error</h3>
<p>Your comment submission failed for the following reasons:</p>
<$MTErrorMessage$>

Individual Entry Archive edits

You'll need to add MTThreadedComments tags and JavaScript code to your template. For example;

The code that produces the comments list:


<MTIfCommentsActive>
<div id="comments-list">
<h3 id="comments">Comments</h3>
<MTRootComments>
<div id="comment-<$MTCommentID$>-parent" class="comment-parent">
<$MTInclude module="comments nested"$>
</div><!-- comment_parent -->
</MTRootComments>
</div> <!-- comments list -->
</MTIfCommentsActive>

The code for the 'comments nested' module:


<div id="comment-<$MTCommentID$>" class="comments-body">
<MTIfCommentSubject><h2><$MTCommentSubject$></h2></MTIfCommentSubject>
<div id="comment-<$MTCommentID$>-body">
<$MTCommentBody$>
</div> <!-- comment-<$MTCommentID$>-body -->
<div class="posted">
<p>Posted by: <$MTCommentAuthorLink spam_protect="1"$> | <$MTCommentDate format="%a, %B %e, %Y, %H:%M"$>
<MTIfCommentsAccepted> | <a href="javascript:void(0);" onclick="respond(<$MTCommentID$>, '<$MTCommentSubject remove_html="1" encode_js="1"$>', '<$MTCommentAuthor remove_html="1" encode_js="1"$>')">Respond to this comment</a></MTIfCommentsAccepted></p>
</div>
</div> <!-- comment-<$MTCommentID$> comments-body -->
<MTCommentIfChildren>
<div id="comment-<$MTCommentID$>-children" class="comments-children">
<MTCommentChildren>
<div id="comment-<$MTCommentID$>-child" class="comments-child">
<$MTInclude module="comments nested"$>
</div> <!-- comment-<$MTCommentID$>-child -->
</MTCommentChildren>
</div> <!-- comment-<$MTCommentID$>-children -->
</MTCommentIfChildren>

The code in my template that produces the "Create a comment regarding this article." link at the end of the comment list:


<MTIfCommentsAccepted>
<p><a href="javascript:void(0);" onclick="respond (0, '<$MTEntryTitle remove_html="1" encode_js="1"$>', '河國榮')">
Create a comment regarding this article.</a></p>
<MTElse>
<p>Comments to this entry are no longer being accepted.</p>
</MTElse>
</MTIfCommentsAccepted>

For reference, the MTThreadedComments plugin provides the following tags:


<MTRootComments>, <MTCommentChildren>, <MTCommentIfChildren>
<MTIfCommentSubject>, <MTUnlessCommentSubject>, <$MTCommentSubject$>
<$MTCommentPreviewSubject$>, <$MTCommentResponseSubject$>
<MTCommentParent>, <$MTCommentParentID$>, <MTCommentIfParent>, <MTCommentUnlessParent>
<MTCommentPreviewParent>, <$MTCommentPreviewParentID$>, <MTCommentPreviewIfParent>, <MTCommentPreviewUnlessParent>

Optional: An improved link to the comment upon comment submission.

When you submit a comment, MT currently usually in the Comment Notification email returns a link to the Individual Entry Archive page without including the comment # anchor. You can rectify this if you wish.

File: mt/lib/MT/App/Comments.pm

Subroutine: post()
in the # Form a link to the comment section:


# $comment_link = $entry->permalink;
$comment_link = $entry->permalink . '#comment-' . $comment->id;

Note. My Individual Entry Archive template assigns ids to each of the comments
using the format id="comment-<$MTCommentID$>". Your format may and probably does differ. You will need to adjust the $comment_link code accordingly.

MT 3.34/3.35 and FastCGI

Note. This setup works with MT 3.34/3.35 and FastCGI as long as you don't use the FastCGI version of AdminScript; i.e., in the config file;


AdminScript mt.cgi
CommentScript mt-c.fcgi
TrackbackScript mt-t.fcgi
SearchScript mt-search.fcgi
ViewScript mt-view.fcgi

If you use the FastCGI version of AdminScript, building the Individual Entry Archive pages will fail; something to do with this line of code in the get_comments() subroutine of the MTThreadedComments.pl code:


my @comments = sort { $a->created_on <=> $b->created_on }

MT produces an error which begins with these three lines:


unknown column: parent_id for class MT::Comment at lib/MT/Object.pm line 283
MT::Object::AUTOLOAD('MT::Comment=HASH(0x92a1cc8)') called at /path_to_cgi-bin/mt/plugins/MTThreadedComments.pl line 123
MT::get_comments('MT::Template::Context=HASH(0x9168aa4)', 'MT::Entry=HASH(0x9175904)', 'undef') called at /path_to_cgi-bin/mt/plugins/MTThreadedComments.pl line 153

If anyone knows why this line doesn't work, please leave a comment.

Other details

You will of course need to write (or copy) the css for the form, etc. I use Dean Edwards' IE7 JavaScript script to help standardise the look of my blog on IE so don't count on my css to help you code for IE.

No support!   I can offer no support for this implementation of MTThreadedComments. If you don't understand the instructions, then it's probably too difficult for you and you shouldn't attempt it.

Above all else; and it should go without saying; back up your MT installation before you begin editing the code and templates.

That's all folks!

New blog feature: Hierarchical threaded comments!

Filed in General, Technology

After finishing "They’re Playing Our Song (2007)", I needed rest. My vocal chords needed rest. More than a week before the show began, my chords had begun to inflame. I had worked them too hard with strenuous vocal exercises in the mornings followed by rehearsals every day for 8 weeks. When my chords began to feel tight, I consulted my doctor and was informed that my chords were inflaming. I halted the morning vocal exercises but it was too late. For the entire week that we performed "They're Playing Our Song", my chords were straining through every single show. I was only able to perform successfully and get through the ordeal by not speaking between shows, taking anti-inflammatories at night before sleep and using a Japanese powder known as 龍角散 'Dragon Horn Powder' before each show. Still, my vocal chords suffered tremendously; especially during those shows when our microphones weren't working; and they needed rest. I needed to shut up.

The week after the show, I couldn't completely abstain from talking. My parents were here and I don't get many opportunities to be with them so chatting with them was a blessing not to be ignored. Only after they had left Hong Kong and returned to Australia could I really allow my vocal chords to relax; no singing and as little talking as possible.

No talking meant no going out to eat and chat with friends. It meant staying at home.

For the first three days, I spent countless tiring hours identifying and verifying the content on my backup DVDs and CDs. I have 15,000 photographs in my Aperture library and none of them are backed up. My DVD backups haven't been very reliable and backing up to normal DVDs is frankly unrealistic because of the number of discs involved (approx. 40 to back up my Aperture library) and the amount of time required (more than 24 uninterrupted hours), so I've had to consider other options for a better backup plan. I have decided to backup incrementally to an external 750G Seagate Barracuda drive which I have ordered. I am also experimenting with backing up to DVD+R DL (double layer) discs which would halve the number of disc swaps required for every backup operation. Eventually, I will investigate Blu-Ray backups. With up to 25G per disc, it would simplify backups immensely.

Then I began working on something else blog related which might or might not interest you although it will affect many of you.

I have never been satisfied with the comment system in my blog. It didn't allow people to respond to other comments and there was no comment hierarchy. I reply to quite a few comments but usually a long time after those comments have been submitted and my replies consequently get separated from the comments I'm replying to. I didn't like it so I decided to change it ;-)

For those of you not interested in the intricacies of how I did it, here is the short story. It took 7 full days of coding (perl, javascript, css and xhtml) but my blog now has full hierarchical threaded comments!!! You can now respond directly to another comment and your comment will be displayed immediately beneath that comment. My implementation is a simple version of Ajax and does not require a page reload. IE (Internet Explorer) was a terror to work with but I eventually worked out the problems so my comment system is working with IE too.

So that's it. You can now reply to each other's comments. No arguments please ;-)

Incidentally, my vocal chords are much better although not yet fully recovered. I won't be singing for at least another two weeks.

(For those of you interested in how I did it, you can find all the gory details here.