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:

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.

Tags: JS-Kit, Tutorial - 教程

Jealous of people able to display their blog’s recent comments in the sidebar, I wrote this little script.

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

I tried to make a javascript version, but I the cross-domain AJAX issue thwarted my attempts. Instead I wrote it in PHP – if you don’t have PHP enabled on your hosting then you won’t be able to use this script, sorry!

To use the script, first download it.

Open the file in a text editor. Change the ‘$commentsRSS’ value to your JS-Kit Comments RSS URL. This is the line:

4

$commentsRSS = 'http://rss.pagesofinterest.net/';	//change this to your comments rss feed

To find your RSS URL, look here: Customizing JS-Kit Comments. Scroll until you see “Setting up the RSS”.

Once you’ve changed that variable, rename the file to “recent-comments.php”, and upload it to your server.

Take note of where you uploaded it to.

Paste

< ?php include('PATH_TO/recent-comments.php') ?>

wherever you want your recent comments to be displayed.
Change “PATH_TO” to the path to the file, e.g. “http://pagesofinterest.net/code/download/recent-comments.php”. Remove the whitespace between < and ?.

Save, then load the page in your browser. You should see your recent comments displayed wherever you pasted the code.

If you see a strange error message instead, try pasting the contents of the recent-comments.phps file wherever you want the recent comments to be displayed, instead of the above “include” statement.

Any problems, leave a comment and I’ll try to help.

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 Comments: Correct Usage of the ‘Permalink’ and ‘Path’ Attributes
Styling JS-Kit Comments
JS-Kit Comments: Correct Usage of the ‘Permalink’ and ‘Path’ Attributes

Tags: Comments, JS-Kit, PHP, Tutorial – 教程

This post aims to give some tips and guidance on how to style JS-Kit Comments, so they closely match your blog’s theme.

I’ve used an external CSS file to style my comments. If you’re like me, you won’t want to read the rest of this tutorial, and would rather view the stylesheet directly.

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.

Use of an external CSS sheet is advised, as it will allow the reader to apply the same styles site-wide with minimum hassle.

Stylesheets should be edited using your favourite text-editor. If you don’t have a favourite, I recommend Text Wrangler, which is an excellent (and free) editor.

I’m just going run through the stylesheet used to style my comments, as the possibilities are too numerous for me to list here. I encourage you to experiment – it is one of the best ways to learn CSS.

The relevant selectors are:

1) .js-singleComment
2) .js–comment-stripe-1
3) .js-singleCommentDepth0
4) .js-singleCommentDate
5) .js-siteAdmin

Note that the full list of selectors can be found using the FireBug addon combined with Firefox.

The first three selectors allow us to apply styling such that the first message of a thread will have style x, the next message will have style y, the next message will have style z, next style y, next z… This is not only pretty, but also makes it easier for the reader to quickly determine where a thread began, and clearly defines the boundary between each comment.

Here is the styling that I have applied to selector #1:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

.js-singleComment {
-webkit-border-bottom-left-radius: 7px;
-moz-border-radius-bottomleft: 7px;
background: #ECF4FF;
background-image: url('http://pagesofinterest.net/images/transparent_shadow.png');
background-repeat: repeat-x;
background-position: top;
border: none;
border-left: 1px solid #ccc;
border-bottom: 1px solid #ccc;
border-right: 1px solid #ccc;
padding-left: 5px;
padding-top: 5px;
}

This selector styles all comments that are: not the first comment of a thread, even numbered.

The first two lines give rounded corners in Safari 3 and Firefox 3.

The four lines below that control the background colour and the image that gives the shadow effect, implying that the comment is ‘œbelow’ the previous comment.

The next four lines control the borders – note the lack of a top border, which is taken care of by the image I’ve used.

Finally, the comment has some padding applied to it. I did this as the rounded corner combined with the top shadow image made text difficult to read in some places.

The styling I have applied to selector #2 is:

1
2
3
4
5
6
7
8
9
10
11
12

.js-comment-stripe-1 {
background: #E4EDF2;
background-image: url('http://pagesofinterest.net/images/transparent_shadow.png');
background-repeat: repeat-x;
background-position: top;
border: none;
border-left: 1px solid #ccc;
border-bottom: 1px solid #ccc;
border-right: 1px solid #ccc;
padding-left: 5px;
padding-top: 5px;
}

This selector styles comments that are: not the first comment of a thread, are odd.

The styling format is identical, I’ve just used different images and colours.

The styling I have applied to selector #3 is:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

.js-singleCommentDepth0 {
-webkit-border-top-left-radius: 7px;
-moz-border-radius-topleft: 7px;
-webkit-border-bottom-left-radius: 11px;
-moz-border-radius-bottomleft: 11px;
background: #fff;
background-image: url('http://pagesofinterest.net/images/comments_border.png');
background-repeat: no-repeat;
background-position: left bottom;
margin-top: 13px;
color: #333;
border: 1px solid #ccc;
padding-left: 5px;
padding-top: 5px;
}

This selector styles the first comment of each thread.

This time, the first 4 lines control rounded borders.

The background image is now used to give the pleasing graduation effect at the bottom of the comment box, and the background colour is white.

The whole box has a border applied to it, and I’ve given the top a margin of 13px. This margin further differentiates the comment from any previous thread.

The padding is the same.

The styling for the final 2 selectors is:

1
2
3
4
5
6

.js-singleCommentDate {
font-style: italic;
}
.js-siteAdmin {
color: black;
}

The first styles the date, the second gives the Admin’s name a different colour.

And finally, upload your CSS file to your server, and include the following BELOW the JS-Kit Comment’s insertion code. It is important that the CSS is included after the JS-Kit code.

<link rel="stylesheet" type="text/css" media="all" href="PATH_TO/jskit.css" />

This will break XHTML validation, as the link tag is strictly not allowed anywhere but the head. For me the price is worth paying.

I hope you have fun styling your comments!

To learn more about being a JS-Kit Widgets Admin, consult the JS-Kit Admin Guide.

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 Comments: Correct Usage of the ‘˜Permalink’ and ‘˜Path’ Attributes
Recent Comments PHP Script
JS-Kit Comments: Correct Usage of the ‘Permalink’ and ‘Path’ Attributes

Tags: Customization - 用户化, JS-Kit, JS-Kit Comments, Programming - 编程, Rapidweaver, Tutorial - 教程

I’ve been using JS-Kit for comments for a long time, and I’ve been extremely impressed with the quality of their service.

They’ve recently acquired Haloscan, which is great – I dropped Haloscan in favour of JS-Kit some time ago, as I didn’t like the lack of control I felt I had over my comments. I haven’t looked back.

A few weeks ago I was showing my site to a fellow student, when she asked me why people were unable to leave comments on my photo pages. I couldn’t think of a reason, so as soon as I got home I set about fixing this lack.

After thinking about the problem for a short time, 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.

If you like the effect, read on. Below is a short tutorial explaining how it was accomplished.

1) You must first have Greybox integrated with your site. Jan Erik Mostr̦m has written a tutorial explaining how to do this: RapidWeaver Рusing Greybox in a theme.

When you’re done with that (please make a test page to verify Greybox is working), head over to Code of Interest and download the Friendly Comments snippet.

Friendly Comment Snippet’s User Rating:

2) Open your RW project, select/create the page you wish to add JS-Kit comments to.

3) Open the page inspector, go to the Header > CSS tab. Paste the following CSS:

#comment{
height: 40px;
visibility: hidden;
font-size: 13px;
}
.href{
font-size: 15px;
}
#subtext{
height: 12px;
position: relative;
top: -20px;
visibility: hidden;
font-size: 8px;
font-style: italic;
}

Please note that the CSS may require some editing to ensure the link to the comment page matches the style of your site. Not all of us adore grey links.

The CSS reserves a space for the comments link, which is generated when the page has finished loading.

4) Still in the page inspector, switch to the Javascript tab. Drag the Friendly Comments snippet in. Close the page inspector.

Please note that if you are using a different script on the page that uses the “addLoadEvent” function, you don’t need to add the function again. You will, however, need to make a call to it:

addLoadEvent(friendlyComment);

Create a new HTML page. The following code should be modified, then pasted into this page:

A_TITLE = a title (do this now, it’ll come in handy in the future ;)
PATH_TO_MAIN_PAGE = full URL to the page containing the link to this comment page.

As this page will only be displaying comments, it won’t need much of the styling required for the other pages in your site. The way I accomplished this is possibly not the best, but it worked for me. I copied the CSS from the styles.css file for the theme I use, pasted it between tags, and removed the information from the {…} for each item. It took awhile. I suggest you work through the rest of the tutorial and preview your work to see if you need this step.

View the CSS example

Now you should upload the HTML page.

6) On your main page, wherever you wish the link to the comment page to appear, paste* the following:

0 Leave a comment!



    
(Comments will open on top of this page)


     

You will need to change the following:

***X = Horizontal size of the comment Greybox
***Y = Vertical size of the comment Greybox
LINK_TO_THIS_PAGE = the full URL to the page this code is to be pasted in
LINK_TO_COMMENTS_PAGE = full URL to the comments page
TITLE_OF_COMMENTS = Text you wish to appear at the top of the comment Greybox

This code should go in either the main body of the page or the sidebar. On my photo pages I’ve pasted it into the “header” area of the Rapidflicker plugin.

As an example, this is the exact code I use for my Hangzhou Day 1 photo page:

0 Leave a comment!



    
(Comments will open on top of this page)


    

Back to step #5

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

Fancy Footer
JS-Kit Comments for Each Blog Entry
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

Tags: JS-Kit, Products - 产品, Programming - 编程, Rapidweaver, RW Tutorial - RW教程, Tutorial - 教程

I have just finished adding a JS-Kit Comments / Greybox comination to every one of my photo pages.

To quote Apple’s Dictionary:

tedious |ˈtēdēəs|
adjective
too long, slow, or dull: tiresome or monotonous : a tedious journey.

Oh yes, it was tedious. But it’s over now.

Why don’t you go and have a look?

Photos of Interest

If you like the effect, and want to know how I did it just let me know and I’ll put together a little tutorial + snippet for you.

Oh yeah, and my exam wasn’t as bad as I thought it was going to be.

Tags: JS-Kit, Programming - 编程, Rapidweaver