JS-Kit Comments: Correct Usage of the ‘Permalink’ and ‘Path’ Attributes

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 be used for the ratings and comments widgets.

The ‘permalink’ attribute should be the full URL linking to the page that this widget mostly relates to. For this post:


JS-Kit will use this attribute to link back to the page the widget mostly relates to, both in that page and elsewhere. In emails alerting people that their comment has a reply, in a page’s comment rss feed, in the most recent JS-Kit comments script, or anywhere else a link to the most relevant page is required.

The ‘path’ attribute is a different story. This attribute must start with ‘/’. This is because the ‘path’ attribute is appended to a site’s comment rss URL to give that widget’s comment rss – to view the comments rss for the whole site, go to the base comment rss URL. If a character other than ‘/’ is used, the comment rss for that page won’t work – see this example.

The ‘path’ attribute needs to be unique to the site. This means that no widgets should accidentally share the same ‘path’ attribute. If one wants a widget to be displayed elsewhere on the site, that widget’s ‘path’ attribute should be used. For example:


<div style="text-align:center;">
	<a href="http://pagesofinterest.net/code-of-interest/">Slider's</a> User Rating:	
	<br />
	<br />
	<div style="text-align:center" class="js-kit-rating" title="Slider" view="split" starColor="Golden" permalink="http://pagesofinterest.net/code/of_interest.php" path="http://pagesofinterest.net/code/of_interest.php/slider">


Slider’s User Rating:

The ‘path’ attribute is what JS-Kit uses to differentiate between a site’s different widgets – if there was no way for JS-Kit to do this, then each widget on a site would always show the same data! The ‘path’ attribute for this page’s comments/ratings widget:


Correct use of these attributes allows one to display different widgets, with their own comment/rating information on the same page.

To display one JS-Kit Comments/Ratings widget in each blog post, one could do the following:

At the base of each post:

<div view='split' class='js-kit-rating' title='Title of Post' permalink='http://the-path-to-this/posts/permalink.html' path='/unique_path' starColor='Golden'></div>
<div class='js-kit-comments' path='/unique_path' permalink='http://the-path-to-this/posts/permalink.html'></div>

Note the ‘path’ for the comments and ratings widget are identical.

And once per page (Rapid Weaver users can paste this into the custom footer field):

<script src='http://js-kit.com/comments.js' type='text/javascript'>
</script><script src='http://js-kit.com/ratings.js' type='text/javascript'></script>

As long as you’ve used different paths, the comments/ratings should display correctly. Because of the path attribute, you’ll be able to change the permalink at any time, and the comments/ratings will remain the same (as long as you don’t change the path). I’ve done this for every blog post!

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

JS-Kit Comments + Greybox on Any Page
Fancy Footer
JS-Kit Comments for Each Blog Entry
JS-Kit Recent Comments PHP Script
Styling JS-Kit Comments

*Please forgive my lazy use of the center tag.

Comments (6) | Trackback

Shadowbox rel=’shadowbox’ Doesn’t Work? Here’s a Workaround

Yesterday I was trying to implement a Shadowbox contact form in the Bay of Islands SPCA site, but I just couldn’t get it to work.

No comments | Trackback

Fancy Footer Update

I’ve updated the Fancy Footer snippet, now Trackbacks/Pingbacks will be able to find your posts – the previous version’s implementation was … lacking.

No comments | Trackback

Search Box Above Nav Menu with Rapidsearch 2.0

This is a short tutorial that aims to explain how to place a search box at the top of the sidebar, above the navigation menu. This will require some fiddling with code – don’t be afraid! I’ll do my best to walk you through it.

No comments | Trackback

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.

Comments (1) | Trackback