Many of you will have read my previous two tutorials on inserting comments into an iWeb blog that isn’t hosted with a MobileMe account and thank you to those people who sent me favourable e-mails on them. Haloscan, the people who gave us the orignal code for adding the comments to the site have been taken over by a company called JS-Kit and they in turn have made the process for adding comments to your iWeb blog different. In this tutorial I explain the new method of inserting comments into your non-MobileMe blog.In my previous tutorials we had to start by visiting Haloscan’s site and signing up for an account. That is no longer the case. All of the account management is now done after the code has been inserted into to your site.
I must point however, if you did follow my original tutorials and therefore have a Haloscan account, that will still work as the ‘Comments’ administrator.
So let’s crack on. To begin with you will have to pop over to the JS-Kit web-site to get the code (or you can copy it from below).
Open iWeb and once you have finished the blog entry scroll to the bottom of the page and insert a small text box; in it enter the word ‘comment’ without the quotation marks.
Save your site and publish it to a folder.
Open Finder and navigate to the folder where you saved your web-site. There will be 2 files/folders. One called index.html, and a folder called Site. Open the folder and then the folder called Blog. Next open the folder called Entries, followed by the year and month folders corresponding to the blog entry. Find the html file for your blog entry and open it in a HTML editor such as TextWrangler (or something similar).
Search (cmd + F) for the word ‘Comment’. After one or 2 clicks you should find a div containing the word (see the image).
Select the entire div and delete it.
Paste the code below into the space where the HTML was previously and then save your page.
<div class="js-kit-comments" permalink=""></div> <script src="http://js-kit.com/comments.js"></script>
Job done. Publish your site as normal.
As you can see from the image above, the comments will take the full width of the page as set in ‘Inspector’. If your blog entry is narrower you will get a blog entry like it is above. To counteract this effect, make sure you widen your blog entry.
The obvious solution (you may think) would be to insert the code into a HTML Snippet or in place of the word ‘Comment’ in the HTML code. I tried this before coming up with this solution and found that the container for the comments would not increase in length after a certain number of comments had be entered.
In a future post I plan to show you how to customize how your comments look on your page.