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:

1

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

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

1

<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:

1

<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):

1
2

<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:

1
2

<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:

1
2

<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.

Enjoy!

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

Scroll to top

Related posts:

1. JS-Kit Comments: Correct Usage of the ‘Permalink’ and ‘Path’ Attributes Scroll to comments It took me awhile to understand what the ‘path’ attribute was for, and the differences between it and the ‘permalink’ attribute. I couldn’t find a clear explanation that explained the differences, and how one should use these attributes. I’ll explain the differences and how I use the attributes here. Both attributes should [...]...
2. JS-Kit Comments + Greybox on Any Page I realised that I didn’t want comments to be visible on the page in case one set of photos became wildly popular (yeah, right); which would result in a page of comments with a few photos, instead of a page of photos with maybe one or two comments. For some reason, Greybox popped into my head, and wouldn’t leave. A...
3. Styling JS-Kit Comments Styling JS-Comments is really quite straightforward. I strongly recommend you read this post before moving on, as it contains tips on resizing JS-Kit elements, such as the width/height of comments, among other things....
4. Fancy Footer So I created a PHP script that is included in the "Prefix" of my blog pages. It consists of one function that is passed a few pieces of information, and spits out a nicely formatted footer section....
5. JS-Kit Recent Comments PHP Script This script reads recent posts from your site's comment rss feed and prints n comments out in a nicely formatted div. Using it is as simple as changing one line, uploading the file, and pasting some code wherever you want the recent comments to be displayed....

Tags: Javascript, Rapidweaver, RW Tutorial - RW教程, Tutorial - 教程