JS-Kit Comments + Greybox on Any Page

×

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.

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);
5)

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:


    

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


    

(Comments will open on top of this page)

Example CSS:
    img {border: none;}
    body {width: 435px;font-size: 11px;font-family: 'Lucida Grande', LucidaGrande, Lucida, Helvetica, Arial, sans-serif;color: #333333;margin: 10px;text-align: center;}
    a:link {color: #808080;text-decoration: underline;}
    a:visited {color: #808080;text-decoration: underline;}
    a:hover, a:active {color: #b3b3b3;text-decoration: none;}
    blockquote {font-size: 10px;color: #808080;padding: 7px 0;}
    #top {display: none;}
    #shadows {display: none;}
    #hdrcolor {display: none;}
    #overlay1 {display: none;}
    #overlay3 {display: none;}
    #overlay4 {display: none;}
    #header {display: none;}
    #contenttop {display: none;}
    #bottom {display: none;}
    .clearer {clear: both;}
    #container {width: 435px;text-align: left;margin: 0 auto;padding: 0;}
    #pageHeader {}
    #pageHeader img {display: none;}
    #pageHeader h1 {display: none;}
    #pageHeader h2 {display: none;}
    #contentContainer {width: 440;padding-top: 10px;}
    #contentContainer #content {margin-left: 0;padding: 0;}
    #sidebarContainer {display: none;}
    #sidebarwrapper {display: none;}
    #sidebartop {display: none;}
    #sidehead {display: none;}
    #sidebarbottom {display: none;}
    #sidebarContainer #sidebar {display: none;}
    .image-left {float: left;margin: 3px 3px 3px 0;padding: 3px 3px 3px 0px;}
    .image-right {float: right;margin: 3px 0 3px 3px;padding: 3px 0 3px 3px;}
    h1 {}
    h2 {}
    h3 {font-size: 13em;}
    h5 {padding: 0;font-size: 18px;margin: 0;color: #999;}
    .blog-entry-comments-body {text-align: left;}
    .blog-entry-comments-body-even {background-color: #eee;text-align: left;padding: 5px 8px;}
    .blog-entry-comments-body-odd {background-color: #fff;text-align: left;padding: 5px 8px;}

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

No comments | Trackback