AdsGet US iTunes gift cards instantly!Get cool iWeb Templates!

Adding JS-Kit Comments to iWeb

Are you one of those users who would wish to have comments integrated right into your site but you are publishing to a folder and so you can’t do that? Or you want to have comments not just on your blog posts? You want to let people comment on your latest photo album? With this tutorial, you will be able to do this.

With the help of JS-Kit and iTweak this is all possible.

If you want to see how the outcome looks, then head over to the demo.

  1. Download iTweak. Make sure you are running the latest version of iTweak. You can check for the latest version of iTweak by clicking the “iTweak” menu item in iTweak and then selecting “Check for Updates.”
  2. Now open iWeb and create a text-box at the position where you would like the comments and the entry-fields to appear. Choose an appropriate width and height.
  3. In the text-box, type the following keyword (do not copy-and-paste it from here):

    %%JSKIT_COMMENTS%%

    See this screenshot:

  4. Now publish your site either to MobileMe or to a folder. Once completed, open iTweak and navigate to the “Search & Replace” tab on the very right.
  5. Tick the checkmark-option to “Search & Replace.” In the table, click the “+” button and so add a new row. In the left column, enter the following:

    %%JSKIT_COMMENTS%%

    In the right column copy and paste this:

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

    See this screenshot:

    You can use the saving mechanism to save the contents of the search and replace table. In that way you do not have to re-enter this code each time you open iTweak. You can then just open the previously saved table.

  6. Choose your published site by hitting the “Choose published Site.” If you publish your site to a folder, you should know where you can find it. If you publish to MobileMe, you find your site on the iDisk.
    MobileMe iWeb ‘08 users use this path:

    iDisk/Web/Sites/SITENAME

    iWeb ‘06 users follow this path:

    iDisk/Web/Sites/iWeb/SITENAME

    Replace the keyword “SITENAME” with your actual sitename.

  7. Now just hit the “Process Site” button. If you publish to a folder, you must now upload the site to your server so that the comments appear. If you view at them on your Mac, the comments will not be visible.

    Everyone: Keep in mind that the next time you publish from iWeb, iWeb will overwrite these changes. Hence, you will have to run iTweak each time you publish from iWeb to ensure that the comments will show up.

Looking for iWeb Templates? Check out my huge collection right here.

If you have enjoyed this article and you wish to make a small donation, then feel free to do so by clicking here.

30 Responses to “Adding JS-Kit Comments to iWeb”


  • Wow – thanks for writing such an awesome and detailed post about integrating JS-Kit.

    I’d encourage you to post this content to the JS-Kit wiki (http://wiki.js-kit.com/Admin-Guide) and link back to your post as the source!

    What do you think?

    Thanks again – very cool :)

    Chris – JS-Kit team

  • How do I create this type of form on my iWeb site?
    I’ve used JS-KIT but I can’t seem to modify the look of it.
    Thanks

  • Hello again….
    I love all of your stuff, but I’m having a problem getting the comments to show on my website. I followed the steps you have posted. I publish to a folder and then upload with an FTP. Tried is two different ways. At the bottom of my blog post, I added another text box (same dimensions in your screen shot.) That didn’t show up. I also added the %%JSKIT_COMMENTS%% text in the same text box as the blog post. It also did not show up. Not sure what’s going wrong. If you want to take a look at it, go to my sight, click on the “Blog” link. I only added your instructions to the top 3 entries. Please advise. Thanks!

  • How does this apply to iWeb 09?

    I was easily able to paste the JavaScript code from JS-Kit Comments into a page in iWeb 09, and publish this to an FTP web site. The only problem I am having is that if the comments start to get too long, they will cut off, as iWeb is using a fixed frame size.

    Main Question:

    Do you know of anyway to get around that. Perhaps can code up an iFrame that sits above iWeb’s page, that has infinite length, and insert that code above the JS-Kit comment’s Javascript?

    Some other questions:

    1. Why would I need iTweak if this is as close to working as it seems?

    2. Is iTweak still valuable with iWeb 09 to solve this problem?

    3. If I do need it, when will iTweak for iWeb 09 be available?

  • Hello Guimkie!

    Thank you SO much for posting this info! It is a great work around to the issue of implementing comments sans MobileMe…we whom use our own hosting services thank you bog time.

    Quick question…I have been able to get the comments up and running on my site in terms of pure functionality. But, I am having the same issue as DavidS posted here with the comments and comment entry fields eventually being cut off by the page because the page/frame does not want to expand to meet the new dimensions once a new comment is input.

    I noticed in the demo you have posted, the page auto-expands when a new comment is input, ot the entry field comes up. Is there something specific you have to do, placement etc., that makes the page behave like this?

    Also, I am not super versed at writing CSS to alter the appearance of the comments themselves. Might you have any templates you’ve put together for these, or suggestions as to make them a bit “sexier”?

    Once I can get this piece figured out I should be at full functionality.Thank you in advance for any insight you can share!

  • Hi every one,
    I have exactly the same probleme of SHARI, I follow the instruction step by step and the comment box is not there, I check my source for be sure then itwean change the word and everything look fine. did i have to register on JS-KIT or some thing else?

    Bonjour à tous,
    j’ai suivi le tuto pas a pas en utilisant itweak pour remplacer la phrase où doit s’insérer le code, il semblerai que cette étape ait fonctionner puisque je peut voir le code JS-KIT dans le code source de ma page. L’ennui c’est que la boite de commentaire ne s’affiche toujours pas dans mon site. J’ai effectuer plusieurs test en plasant le phrase à remplacer dans la boîte de texte de mon blog et en la placent dans une boîte appart mais aucune de ces options ne semble fonctionner. Es que quelqu’un à eu ce problème? doit on s’enregistrer sur le site de JS-KIT?

    Merci

  • Hello all!

    Looks like I got the comments feature working. Thanks!

    Now how do I go about posting another blog without overwriting my whole site and discarding all the comments in the process? Also, can anyone explain the “backup” feature of iTweak? (I couldn’t find a tutorial on this.) Does “backup” somehow save the comments for me? What is “backup” doing?

    Sorry for being such a confused newbie.

  • Hello again.

    So it seems the comments themselves are hosted someplace other than my web site. Consequently, when I make an update & re-apply iTweak, I can just upload/overwrite my entire site and the comments magically remain in place. (Wonder what happens if I delete the blog in question?)

    I still do not understand exactly what “backup” is doing that my standard backup software (e.g., Time Machine) isn’t already doing.

    (So I’m still a confused newbie.)

  • I have followed the instructions exactly and it still doesn’t work. After I follow the instructions it says replace text on the website page. Can someone please tell me what I am doing wrong. I published it to my mobile me as directed and then entered the codes in itweak. Then published to my site and hit the process button. Still it doesn’t want to work. Any help would be greatly appreciated. Thank you.

  • I got the comments working. What do i do now that the page is too full of comments. Can I add a scroll bar to the window in iWeb? thank you for your helpful web site.

  • I need some help. I did everything exactly as shown above but when I view my site it shows up as %%JSKIT_COMMENTS%% instead of the comment box or link.

  • WHAT IF YOU WANT TO USE OTHER JSKIT SERVICES? FOR EXAMPLE THE MINICHAT….HOW DO YOU USE ITWEAK FOR THIS?

  • Hey,

    I have the same problem. My comment box doesn’t expand. So when new stuff is added or the add a comment box is launched, it gets cut off. PLEASE HELP!!

  • Hey everyone! I found a post that has posts a reason for the cut-off problem, and lists a reasonable solution to it:
    vertein.com/blog/EveryDayThings/Tims_BLOG/Entries/2009/3/28_iWeb_comments_without_Mobile_Me.html

  • I followed your instructions and all I’m getting on my blog page is “Replace text” I’ve tried it several times to no avail. Please help make this work.

  • I am having the same problem as Mathias Selin. I did everything exactly as stated, but when I try to process site, I get three different pop up boxes from iTweak saying there was an error and when I view the site, all I see is the %%JSKIT_COMMENTS%% (the page I am testing it on is under Baking: Shimmer & Sanding Sugars if you want to take a look)
    Please help!
    Also, in order to put comments on all my pages, since it’s a blog, do you have to do that manually on each page with the text box or is there an “apply to all pages” way of doing it? Thanks!

  • I am having the same problem as Regis. I also get an error every time I try to “process” the site in iTweak.

  • Hello! I am trying to add Comments to my iWeb site now and met a problem. After hitting Process Site button I always receive a Contact-Form Error (There has been an error while trying to add the contact form. Did I make any mistake in previous step?

  • Hello! Can someone help! I have followed the instructions and nothing is happening. I have registered on JS-kit website and even used the script it generated on the search and replace field in itweak. Nothing works. If anyone can offer any suggestions I would be grateful.

    thanks

  • If you have iLife ‘09, you can just go to the widgets tab in the media window and drag an “html snippet” object onto your page. Copy and paste the html from the js-kit website (or from this page) into the window that appears above the box. No iTweak required at all.

    iLife ‘09 is so much improved over any earlier version. Here is just one more reason why!

  • Js-Kit needs to verify my site before letting me blog. I have tried looked at the solutions but can’t seem to find where to place the HTML codes Js-kit is asking for. Can anyone help???

    Thanks.

    Ps. I’m Using Iweb 09

  • Thanks for the information. Finding itweak and this ability to post comments is a blessing. I spent so much time creating my website and then did not find out about all of iweb’s limitations until I tried to do some SEO.. and blogging.
    Thanks again for this site!

  • First, are these comments made with JSKIT? Second, why don’t you just post the code instead of replacing the %% ??? Third, on iTweak, do I have to chose the page or can I just select all the folder.

  • Isn’t there a way of having scrolling bars at the sides so that I can post as many posts as I want?

  • i don’t have a blog but an actual website (i have used iweb to design and use cyberduck to ftp), does that mean i can’t use the comments addition to my site?

    Sorry if that sounds daft, i a bit of a newbie.

    thanks

  • Yes, you can. You can actually place it WHEREVER you want. I have a problem right now and don’t really know much about this, but I am PRETTY sure that you can place it in your page. Go ahead and try!

  • hi tried doing the steps but can’t seem to get it to work. I am publishing locally in my mac using dyndns.org for domain.

    the %%JSKIT_COMMENTS%% show as Replace Text in browser. Any help is greatly appreciated.

    Thanks.

    xdonu2x

  • “why don’t you just post the code instead of replacing the %% ??? ”

    GABRIEL is right. iTWEAK is unnecessary, and in fact a major hinderance.

    Here’s all you need:

    • Open WIDGETS in iWeb
    • Place an HTML SNIPPET wherever you want your comments section to go.
    • Paste the <div class… code from the tutorial in the SNIPPET.
    • Smoke if you got ‘em.

    The only problem I’m experiencing is, the frame won’t re-size vertically based on content. But I have a call in to a friend who will know the answer to that one.

  • I cant get mine to work either! Tried all last night every way and followed the instructions above. All I get on the live site is the text %%JSKIT_COMMENTS%%. I used itweak and uploaded it to my godaddy hosting using cyberduck. I would use the snippet but like others have said it wont adjust vertically.

Comments are currently closed.