What would be the benefits of standardising our comment markup? Well, that all depends on who you are. With the advent of comment crawling services a standard markup would really help them do their job. If your blogging platform offers no syndication options a standard comment markup could allow you to generate comment feeds yourself (using Blogger Recent Comments or similar). A standard markup about which we can make certain assuptions would also help the less technically inclined with implementing comment-centric hacks.
So, the natural first place to look is microformats.org. Nada, yet. Falling back to my own work with XOXO I have encapsulated comments as part of the XOXO Blog Format. Testing that with a comment crawler I find that it recognises the data ‘as is’ just fine. If you mix it with hAtom it is recognised by Blogger Recent Comments (more on this in a later post). It also provides many of the things we hackers like in comment hacks — an item surrounding the whole comment and the comment text, and a way of identifying some of the meta-type links.
Thus this proposed ‘standard’ is both based on microformats (XOXO) and fits the three major reasons we would even want any sort of structure to our comment markup. The markup should be on the main page for crawlers et al, but need not be visible. Now to how to add it to your blog. Advanced users can probably figure it out from teh XOXO Blog Format, for others here are simple instructions for both Blogger and WordPress:
Blogger
Go to your blog template and find the section that begins with <BlogItemComments> and ends with </BlogItemComments>. Replace it with this code:
//<![CDATA[
posturl = “<$BlogItemPermalinkUrl$>”;
//]]>
</script>
<ul class=”xoxo comments”>
<BlogItemComments>
<li id=”c<$BlogCommentNumber$>” class=”commentelem”>Comment at <a href=”#c<$BlogCommentNumber$>” title=”<$BlogCommentNumber$>0″><$BlogCommentDateTime$></a> by
<$BlogCommentAuthor$>
<a name=”<$BlogCommentNumber$>”> </a>
<!– JS HERE –>
<dl>
<dt class=”body”>body</dt>
<dd class=”body”><$BlogCommentBody$></dd>
</dl>
<$BlogCommentDeleteIcon$>
<br />
</li>
</BlogItemComments>
</ul>
If you are going to be visibly displaying comments on your main page it is reccomended you replace the <!– JS HERE –> in the above with:
//<![CDATA[
commentlink = xget(‘//li[@id=”c<$BlogCommentNumber$>”]//a’);
if(commentlink) {
fragment = commentlink.href.split(‘#’)[1];
commentlink.href = posturl+’#’+fragment;
}//end if commentlink
//]]>
</script>
And add the following to your <head> section:
//<![CDATA[
function xget(xpathSelector) {
var it = document.evaluate( xpathSelector, document, null,
XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null );
if(it.snapshotLength)
return it.snapshotItem(0);
return ”;
}//end function xget
//]]>
</script>
Now to style this to look like we are used to having comments look. Skip past WordPress to Styling.
WordPress
To use this code on WordPress blogs, edit your theme and go to the ‘comments.php’ file. Find the section that starts <ol> and ends </ol>. Replace it with:
<?php foreach ($comments as $comment) : ?>
<li class=”commentelem <?php echo $oddcomment; ?>” id=”comment-<?php comment_ID() ?>”>
<?php if ($comment->comment_approved == ‘0’) : ?>
<em>Your comment is awaiting moderation.</em>
<?php endif; ?>
Comment at <a href=”<?php the_permalink() ?>#comment-<?php comment_ID() ?>” title=”<?php echo strtotime(get_comment_date().’ ‘.get_comment_time()); ?>”><?php comment_date(‘F jS, Y’) ?> <?php comment_time() ?></a>
by <?php comment_author_link() ?>
<br /><?php edit_comment_link(‘e’,”,”); ?>
<dl>
<dt class=”body”>body</dt>
<dd class=”body”><?php comment_text() ?></dd>
</dl>
</li>
<?php /* Changes every other comment to a different class */
if (‘alt’ == $oddcomment) $oddcomment = ”;
else $oddcomment = ‘alt’;
?>
<?php endforeach; /* end for each comment */ ?>
</ol>
This code seems to work with the most common themes. Now to styling so that we get back our old look:
Styling
Add this code to your <head> section:
.comments {
list-style-type: none;
margin-left: 0px;
margin-top: 0.5em;
}
.comments li {
display: block;
margin-left: 0px;
margin-bottom: 1em;
}
.comments dl {
display: inline;
}
.comments dd {
margin-left: 0px;
}
.comments dt {
display: none;
}
.comments dd.author {
display: inline;
font-size: 1em;
}
.comments dd.body {
display: block;
margin-top: 0.5em;
}
</style>