JS-Kit Comments for Each Blog Entry


This post was originally published in 2008
It may contain stale & outdated information. Or it may have grown more awesome with age, like the author.

Update I no longer use JS-Kit comments. I’ve reverted to the WordPress commenting system

In this short tutorial I will describe how to use the JS-Kit commenting system in Rapidweaver. By then end of this tutorial you will have learned how to insert the code into yor blog so that each post has its own comments – the comments will show in permalinks, category and tag versions of each post. When someone comments on a post, JS-Kit will notify you by email. Included in the email that you, and other people who comment then recieve replies are sent will be a link to the permalink entry of the post in which the comment is displayed. You will be able to use JS-Kit’s excellent moderating system to manage your comments.

I’m going to go ahead and assume you want to integrate JS-Kit’s commenting system with the JS-Kit ratings widget, like I have. If you don’t just ignore the parts of the below tutorial that mention the ratings widget.

1) Open RW, select your blog page. Open the page inspector, select the “General” tab. Under “Override Default Site Settings”, check “Footer”. Copy the following code into this field:

<script src="http://js-kit.com/comments.js"></script>

To use the ratings widget as well, you’ll want to add this code also:

<script src="http://js-kit.com/ratings.js"></script>

2) Close the page inspector – we’re done with the tricky stuff.

3) This part can be rather tiresome – it depends on how many old posts you want to add the option to comment to.

At the very bottom of each post you wish to allow users to comment on, paste* the following code:

<div class="js-kit-comments" permalink=""></div>

If you want to use the ratings widget as well, you should paste this (below includes the above code – above is for those who do not want to use ratings, below is for those who want both):

<div class="js-kit-rating" title="SOME TITLE" path="/POST_TITLE" starColor="Golden"></div>
<div class="js-kit-comments" permalink="PATH_TO_POST_PERMALINK" path="/POST_TITLE"></div>

Replace “PATH_TO_POST_PERMALINK” with … the path to that post’s permalink. Replace “/POST_TITLE” with the post’s title. Don’t use whitespaces or special characters in this attribute.* For example, this is what I have at the bottom of this post:

<div class="js-kit-rating" title="" path="http://pagesofinterest.net/mikes/blog_of_interest_files/js-kit_comments_for_each_blog_entry.php" starColor="Golden"></div>
    <div class="js-kit-comments" permalink="http://pagesofinterest.net/mikes/blog_of_interest_files/js-kit_comments_for_each_blog_entry.php" path="http://pagesofinterest.net/mikes/blog_of_interest_files/js-kit_comments_for_each_blog_entry.php"></div>

*Note that I’ve actually violated my own instructions there. It should look like this:

<div class="js-kit-rating" title="" path="/js-kit_comments_for_each_blog_entry.php" starColor="Golden"></div>
    <div class="js-kit-comments" permalink="http://pagesofinterest.net/mikes/blog_of_interest_files/js-kit_comments_for_each_blog_entry.php" path="/js-kit_comments_for_each_blog_entry.php"></div>

Luckily, JS-Kit is robust, and allows morons like me to make these mistakes. I now use the correct method, but haven’t changed my older posts. Why? Because the path attribute is the ‘directory’ in which JS-Kit stores comment/ratings information. This is how we can have two different pages with the same comments/ratings widget. This also means that we can move the widgets to different pages if/when the page is moved, without losing the important comments!

And that’s it! Comments should now be enabled for that post.

To moderate posts, you’ll need to go to the JS-Kit Settings page. If you don’t already have one, you’ll have to create an OpenID account. Choose from the list of providers listed beneath the sign-in box.

If, after logging in you don’t see your site anywhere, you’ll need to “claim” it. Just enter the url of your site in the labeled text box, and follow the instructions. They’ll send you an email, and once you’ve followed the link included you will be able to moderate your site’s comments.


If you would like to explore the options available to users of JS-Kit, head over to the website: JS-Kit.

*Remember to select the pasted code and either choose “Format > Ignore Formatting” from the RapidWeaver menu, or press “⌘ + .”

Always do this when pasting code. Always.

If you don’t do this, there is a good chance that the code will break. Always do this!

As an added precaution, open the Page Inspector, go to the “General” tab and choose “Output: Default”. This will stop RapidWeaver from inadvertently breaking PHP or HTML code.

To learn more JS-Kit tricks, read the following posts:

JS-Kit Comments + Greybox on Any Page
Fancy Footer
JS-Kit Comments: Correct Usage of the ‘Permalink’ and ‘Path’ Attributes
Recent Comments PHP Script
Styling JS-Kit Comments
JS-Kit Comments: Correct Usage of the ‘Permalink’ and ‘Path’ Attributes

Comments (5) | Trackback