I've just finished using JS-Kit to add comments and ratings to my site. It's a great tool--simple, straightforward, and fits into my world rather than demanding that I fit into its world. Just what I like.

JS-Kit works pretty much as advertised: paste in a few lines of HTML, and you have comments or ratings. For example, here's the code I use to display ratings on every post:

<div class="js-kit-rating" title="$title" path="$path/$fn.html" permalink="$url$path/$fn.html"></div>
<script src="http://js-kit.com/ratings.js" type="text/javascript"></script>

("$title" and similar variables are part of the template engine I use for this site.)

The <div> determines where the rating or comments show up in your HTML. It's optional--if you don't put in the <div>, the rating/comments appear at the point that you load the script. If you leave it out, it will show up wherever you load the js-kit script. This caused me a few problems, as I'll explain.

That's the basics. I wanted a bit more, and some of it took a little figuring out. None of it's rocket science, but I thought I'd put up what I learned in case it's helpful to someone else down the road:

Display a "Loading" Message

You can put whatever you want in the <div> and it will be erased when the comments are loaded. I use it to show a "loading" spinner, just in case the user's network connection is slow or the JS-Kit service goes down.

<div class="js-kit-comments" path="$path/$fn.html" permalink="$url$path/$fn.html">
  <p style="font-variant: small-caps">Loading comments...</p>
  <p><img src="/images/spinner.gif" alt="" /></p>
</div>

Hide Bogus Comments and Ratings

If you put the JS-Kit scripts in the footer of every page (as I do), a page with no comments will have a spurious "leave a comment" link at the bottom of the page. That's because you won't have any JS-Kit <div> in the rest of the page, so JS-Kit (in an attempt to be a little too easy to use) will place the comment, or rating, at the location that you load the script.

This made me scratch my head a bit until I realized what was going on. Once I understood the problem, it was easy to solve. I just put the scripts in my own <div> and gave it the style display: none in my CSS. I also made sure that the extra comment box linked to a non-existant comment path.

HTML:

<div id="js-kit-loader">
  <div class="js-kit-comments" path="/null"></div>
  <script src="http://js-kit.com/comments.js" type="text/javascript"></script>
  <script src="http://js-kit.com/comments-count.js" type="text/javascript"></script>
  <script src="http://js-kit.com/ratings.js" type="text/javascript"></script>
</div>

CSS:

#js-kit-loader {
  display: none;
}

Liquid Comment Box

The default comment box is small. For me, small comment boxes make it hard for me to write thoughtful comments. I want my readers to be able to create masterworks--or at least, be comfortable writing more than a few lines. A big-ass text entry box was essential.

This was the hardest thing to figure out. The JS-Kit FAQ describes how to make the text box bigger, but code they provided only works for hard-coded sizes. I wanted the text box to be "liquid:" to grow and shrink with the size of the browser window. I eventually figured it out by looking at the default comment template in the JS-Kit customization documentation. The final fix only required a few lines of CSS.

.js-CreateCommentBg {
  width: 100%;
}

.js-CreateComment textarea {
  width: 100%;
  height: 20em;
}

I've only been using JS-Kit for a few days, but so far I'm quite happy with it. There's a bit of risk associated with letting another site control all of the comments on this site, but for my purposes, that's acceptable. If you can accept that risk and you're looking for a nice easy way to include comments and/or ratings on your site, I recommend it.