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:

permalink='http://pagesofinterest.net/blog/2009/03/js-kit-comments-correct-usage-of-the-permalink-and-path-attributes/'

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:

Code*:

1
2
3
4
5
6
7
8
9
<div style="text-align:center;">
	<a href="http://pagesofinterest.net/code-of-interest/">Slider's</a> User Rating:	
	<br />
	<br />
</div>
<center>
	<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">
	</div>
</center>

Result:

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:

path='/js-kit-comments-correct-usage-of-the-permalink-and-path-attributes'

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:

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

1
2
<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

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.

Comments (4) | 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

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 few hours later, this happened: Hangzhou Day 1.

No comments | Trackback