« How To: Display Excerpts Rather Than Full Posts on Your Blog's Archive Pages | Main | Live SpellCheck in TypePad's Compose Window with Firefox 2.0 »

John T. Unger

Build Community with a Custom Comment Archive Page for Your TypePad Blog

John T. Unger November 16, 2006

Debra Hamel who provided an excellent hack the other day (How To: Display Excerpts Rather Than Full Posts on Your Blog's Archive Pages) has sent me two more cool hacks! Debra rocks!

Today I'll show you how to create a page which displays an archive of comments on your blog. The comments include a link to the original post and an automatically generated link that allows others to respond to any comment. To see an example of how it looks, check out my nifty new Comment Archive Page.   Take a look at Debra's Comment Archive also, to see how it looks in a different context.

I find this hack to be more exciting than it appears at first glance for a number of reasons:

  1. You can use this hack to increase reader participation by providing a specific place that is designed for them to leave their thoughts… put a link to your comment archive in your sidebar to create an easy "reader feedback" page. Or link to it in a post when you really want to get a lively conversation going. Or use it to refernce "what people are saying about…" and so on. There's more than one way to incorporate this as a useful feature of your blog!
  2. Making it easy to read and respond to comments without having to search through posts should encourage more readers to leave their own thoughts, as well as fostering dialogue between readers. A comments archive page can function not unlike a web bulletin board, making it simpler to throw a question out to the extended audience and get an answer.
  3. As most of you know, I like to respond to comments as much as possible… Having them collected in one place with a link to the post where they were left will make this easier. It's long frustrated me that when I use the List Comments feature in TypePad's application, the links go to the Edit This Post page instead of to the page where the comment was left. (In an ideal world, I'd have a choice of links to either one. Oh wait, now I do! Heh. Maybe this is an ideal world).
  4. Another improvement this offers over the List Comments feature is that I can view as many comments as I want per page and read the entire comment without having to click on an excerpt.
  5. The archive page makes it easy to search comments using your browser's "find in page" search. Or you could include a Google search box at the top of the page which searchs only that page (although the lag between Google's indexing of the page and the speed at which comment are left probably makes the borwser's search more effective).
  6. You can use this hack to create an export of all your comments separate from the posts. Why would you want to do that? Well, say you want to create a list of the nicest things people have said about your blog to put on your about page. Or what if you're looking for paid work as a blogger and you'd like to show your prospective clients how you handle community building, or how you reply to negative comments, or again, what kind of value people have found in the work you've done. This is a handy way to do that.

As I was creating my archive, it occured to me that I could combine this hack with the customized sidebar hack described in Keep Readers Happy With a Fast-Loading Blog, Part Two to create kind of a community center for this blog. I don't want a ton of widgets on the main index or individual post pages because they slow page loads considerably. But there are a lot of cool social widgets that make more sense in a specific context. By creating a custom sidebar for the Comments Archive, I was able to add some widgets that I think are valuable tools without having them load on every page of the blog.

So now you can check out who else has been reading by looking at the MyBlogLog community widget that displays profiles of recent readers. Or you can check out my del.icio.us links to see what I've bookmarked for upcoming posts. Or you can read comments I've left on other blogs via the cocomment widget. Etc. Although it had already occurred to me that widgets can be embedded in specific posts, or could be relegated to a particular page, it was just as I was building the example for this tutorial that I realized just how powerful that idea is. 

I'm sure there are other benefits but I'm already sold on the idea, so lets cut to the chase and learn how to build it already! To create a customized Comment Archive Page, follow the steps in the extended post. You must have a TypePad Pro account and be using advanced templates in order to use this Hack.

bbb

  1. Go to the Design tab for your blog.
  2. Click on the link for your Main Index Template and copy the code. Return to your Design tab.
  3. Click on Create new index template.

    There are three fields for you to work with. The Template Body field is where you will put your code. The Template Name can be anything that helps you remember which template it is, such as Recent Comments. The Output File is the name of the file that will be created. The output file name is used in the URL for the page: if you name it comment_archive.html it will generate a page with the URL http://example.typepad.com/weblog/comment_archive.html. You must remember to include the file extension (.html).
  4. Paste the code you copied from your Main Index Template into the Template Body field.
  5. Scroll down to the title tag and change it to read [Your blogs name]: Comment Archive or whatever you would like the page to display in the top of the browser.
  6. Scroll down until you see the line that brings in your posts:

    <$MTInclude module="entry-list"$>

    Replace this line with the following code:

    <h3 class="entry-header">Comment Archives</h3>
    <p>The 100 most recent comments, in reverse chronological order.</p>

    <MTComments lastn="100" sort_order="descend">
    <MTCommentEntry>
    <table cellpadding="5" cellspacing="0" border="0" style="background-color:#FFFFFF;margin-bottom:5px;" width="100%"><tr><td valign="top" width="25">
    <b><$MTCommentOrderNumber$></b></MTCommentEntry>
    </td><td style="border-bottom:1px solid #CCCCCC;">
    <b><$MTCommentDate$></b><br />
    <MTCommentEntry>
    <b><$MTCommentAuthor$> <$MTTrans phrase="on"$> <a href="<$MTEntryPermalink$>"><$MTEntryTitle generate="1"$></a></b>
    <br />
    <$MTCommentBody$>
    <div align="center">[<a href="<$MTEntryPermalink$>#comments">Post a Reply</a>]</div></td></tr></table>
    </MTCommentEntry>
    </MTComments>
  7. Click Save. Click Publish.
  8. Place a link to the page in one of your Typelists so that people can find it.

Options:

There are a number of variables you can change to customize this hack to meet your needs.

  • You can change the message in the first two lines of code above to read however you would like. Debra's example read like this:

    <div align="center"><b>Below is a list of the 100 most recent comments, in reverse chronological order.</b></div><br />

    I changed her HTML to use the same tag I use for my post headlines to make it consistent with other pages. You could apply CSS styles or any basic HTML to this portion of the code.
  • You can change the number of comments displayed by altering lastn="100" to another number.
  • You can change the sort order to "ascend" if you want comments to appear in chronological order.
  • Using the code above, comments are numbered 1-100 in the display. This comment numbering can be removed. Just remove the first table cell:

    <td valign="top" width="25">
    <b><$MTCommentOrderNumber$></b></MTCommentEntry>
    </td>
  • To remove the Post a Reply link, delete the following line of code:

    <div align="center">[<a href="<$MTEntryPermalink$>#comments">Post a Reply</a>]</div>

More Like This: Advanced Templates , Blog Tools , Community , Dialogue , Hacks for Comments , Hacks for Layout + Design , Widgets

Tags: , , , , , , ,

Comments

nichole says:

Fabulous! Thank you!

john t unger says:

Glad you liked it Nicole! And pretty quick work implementing it on your blog, too!

Debra Hamel says:

Having updated the look of my comments archive page the other day, I decided just now to actually add a link to it in my post footers. I've had a link in the sidebar with my recent comment list, but I'm not sure how many people have discovered it. At any rate I now have a second line in my footer mentioning the page. I think it looks nice, and it may prompt further participation in ongoing conversations at the blog.

john t unger says:

Hey Deb,

Wow, that's a really brilliant idea. It puts the link much closer to the action… I probably won't do it here just because between the regular footer links, the FeedFlare and the Technorati tags I already feel like there might be too much going on down there.

But I do really dig what you've done there. It's a great example of design for usability. Let me know if it does in fact increase your comment count. I'm curious!

Debra Hamel says:

I understand! The footer area can get awfully crowded. I've tried to break it up a bit at my blog by using different colors for the feedflare links and so on. I don't know if I'll be able to tell if there's a difference in comments, but if there's anything obvious I'll let you know!

Tom says:

Hi John:

Something seems to be wrong with these instructions since it only shows my last 28 comments on my blog and your own comment archive page only shows 27 comments (not 100). Debra's seems to be working so not sure what she did differently?

Tom

john t unger says:

Hi Tom,

If you read the little intro at the top of my comment archive, you'll see that it says:

"Comments displayed are limited to the last 30 days, but will always remain accessible on the individual entries where they were posted."

The code will display *up to* 100 comments from the last 30 days. There isn't a function in TypePad to automatically display older comments. So you see, the instructions are fine, Debra just has a livelier conversation going on at her blog than you or I.

Tom says:

ahhh, thanks john, gotchya. thanks for all the tips on this blog. i just added the top nav bar and it looks great! i hope good karma comes your way for helping people make the most of their blogs!

yoichi says:

Hi John,

Could you teach me how to designate the number of comments you can show?
For instance, 1-100, 101-200, ... or Jul 2006 - Dec 2006, Jan 2007 - Jun 2007, ...
Thanks for your help in advance.
Cheers,
yoichi

Coursework says:

http://www.masterpapers.com/coursework.php
Frequently the reason behind the desire to write this type of paper remains unclear. However, once the events are recounted and recorded, it becomes clear that the writer is striving to find the universal truth. href="http://www.masterpapers.com/coursework.php">Coursework

Sunny says:

I tried to create a comments archive using your instruction. However, when I checked the "<$MTInclude module="entry-list"$>" in the new index template I created, which I copied from the main index template, I didn't see the line "<$MTInclude module="entry-list"$>" that you said should be replaced with the following code:

Comment Archives

HELP!

Rob says:

hey john thanks for the tips they are really usefull! :)

The comments to this entry are closed.

TrackBack

TrackBack URL for this entry:
https://www.typepad.com/services/trackback/6a00d8341c4fdf53ef00d83452f43869e2

Listed below are links to weblogs that reference Build Community with a Custom Comment Archive Page for Your TypePad Blog:

typepad hacks is a typepad featured weblog typepad hacks is listed on Alltop social media

Subscribe

Email RSS Comments  
Subscribe to TypePad Hacks with email Read TypePad Hacks posts via RSS Join the conversation at TypePad Hacks via RSS (comments feed) subscriber count

Search

Socialize

Twitter Logo
    follow typepadhacks on twitter

    Read and reply to the 100 most recent comments at the TypePad Hacks Community Page


    Grazr

    Colophon

    Powered by TypePad
    Member since 03/2005

    TypePad Status

    Creative Commons License