iWeb Tip #23 – Comments in iWeb

So you have a website you’ve created in iWeb and you have a blog or page that you want to add comments to, well then this is the iWeb tip for you.  This post is all about getting comments into your iWebsite.  iWeb has a built in commenting system, but it is for MobileMe Members only.  In this tip I will show you how to add comments to your iWeb made site no matter who you are hosting your site with!  Adding comments into your iWeb made site is great way to add interactive elements for your viewers, they start conversations and it starts to build a community on your website, plus giving you some feedback on your post.  I’ve seen many people post that they’ve wanted this added as a tip in the iWeb Forum here, and finally here it is.  So lets get started.

View Demo »

There are 4 major options when choosing to get comments onto your iWeb site.  The four big commenting systems are:

• MobileMe – Paid (https://www.apple.com/mobileme/)
• Disqus – Free (https://www.disqus.com)
• Instense Debate – Free (https://www.intensedebate.com)
• Echo – Paid (https://www.aboutecho.com)

Each of them have different features and looks to them.  So I’d recommend looking at each one and deciding which one will work best for you and your website.  I’m going to show you how to get your comments if your using MobileMe first, then we’ll get into implementing comments if you’re not using mobileme.

Comments with MobileMe:

MobileMe is probably the easiest way to get comments into your website.  It’s already built in to iWeb, and it’s very simple for users to use.  If you don’t have a MobileMe account yet, it’s a great option that Apple offers.  It gives you 20GB of online space for storage or a website, it syncs contacts; calendars, bookmarks, and more across all your macs and devices, as well as many other features which you can read about by visiting the MobileMe Site.  Here’s how to get your comments working if your hosting your site with MobileMe.

1. Create your page(s) in iWeb, then click on the site folder (it’s the main site above all your pages).
2. Choose MobileMe as the choice where it says “Publish To:”
3. Then go to the Blog/Podcast page your wanting your comments on, then open the inspector and choose the “Blog and Podcast Inspector” (It’s represented by a an RSS button).
4. In the Blog and Podcast Inspector you’ll see a tab that says Blog, click that and you’ll see a section that says Comments.
5. Click the Comments Checkbox.  You’ll be presented with a box that tells you about what comments does, just click OK.
6. Then click the Allow Attachments (Optional).  This allows users to attach images, documents, etc.  It is possible for visitors to attach items that are objectionable to you or others so if you choose to use this option be sure to moderate the comments often.
7. Publish your site and that’s it!

You’ll see that when someone comments on your site using the MobileMe Comments iWeb will have a little number tick next to it’s icon (similar to Mail) when there is a new comment, so you’ll know when there is a new comment on your site.  That’s it and have fun.

Adding Comments to your site without MobileMe:

To add comments to your site without MobileMe, we first have to sign up for an account at one of the comment platforms by going to Disqus.com, IntenseDebate.com, or AboutEcho.com.  Disqus and Intense Debate are free and Echo costs about $99 p/year.  We then setup our settings on their sites, get comment code and paste into an HTML Snippet.  The only problem with this is that we need to adjust our snippet to the size our commenting is going to be, because the HTML snippet will not adjust in size as more comments are added to our site.  So you have to either stretch your snippet to the size that you expect your comments to grow as, or you can put the code onto a blank HTML page and iFrame that into iWeb, that way you can set the size of your snippet to be whatever you want and as more comments are added, the iFrame will simply have a scroll bar to show all the comments.  It works really good and makes it easier for you to manage and design.  I tell you this upfront cause there are really two ways to implement this into your site 1) A Direct Snippet and 2) An iFrame (as I discussed).  So Let me first show you how to do it with a Direct Snippet, then I’ll instruct you how to do it with an iFrame so you can have scrolling comments and won’t have to worry about the size of your HTML Snippet as more comments are added to your site.

1) First Sign up for a Free account at Disqus.com or InstenseDebate.com (Or AboutEcho.com if you want to pay the $99 yearly fee) and get your comment code.

Signing up and getting comment code with Disqus.com:

1. Go to Disqus.com and hit the “Sign Up, Free” Button.
2. Enter your Site URL, Site Name, Site Shortname, then decide your username, password, and email address you want to use.
3. You’ll then be directed to step number 2 where you will choose the language for your comments, and some optional features such as providing allowing users to log in with Twitter, Facebook, Yahoo, Open ID, and others, and the ability to share across social networks.
4. Step 3 is where you will get your install code.  Choose the option that says “Universal Code”.
5. Copy the code that is next to the “1.” (don’t worry about the code in the 2. section) and you’ll now have the code we’ll need in the next steps.

Signing up and getting comment code with IntenseDebate.com:

1. Go to InstenseDebate.com and hit the “Sign Up” Button.
2. Enter in a Username, Email, and Password, and choose the option “I want to install IntenseDebate on my blog or website”, and hit the sign up button.
3. You’ll then need to check your email to verify the account before you can go on.
4. Once you’ve verified you email go ahead and login.
5. Upon logging in you’ll be directed to your dashboard, you’ll see a section on the right side under “Manage Blog/Sites” a button that says “You have not installed IntenseDebate on any blogs yet. Install IntenseDebate.” click on that link.
6. You’ll then be walked through 3 steps to get the code we need to go on. Step 1 is to enter in your blog/website URL.  Do that and hit “Next Step” to continue.
7. Step 2 is to choose your platform.  You won’t find iWeb in the list there so just choose the option “Generic Install”.
8. Step 3 is where they will give you your install code. On the left side it says “JavaScript Install”, copy the code next to the “1.” and move to the next step.

Comments using a Direct HTML Snippet:

2) Now take that code and paste it into an HTML Snippet on your iWeb page that you want the comments to be on and hit apply.

3) You’ll notice that it seems nothing has happened.  That’s because your site isn’t online yet.  Your comments actually won’t work until your site is online, so don’t worry that you don’t see your comments show up yet.  At this point you need to size your HTML snippet to accommodate the comment response box and all the comments and future comments that you are going to have.  So be sure to stretch it long enough to accommodate all the comments that you foresee your page having.

note: If you’re unsure about what the size of your snippet should be you can jump to the “Comments using iFrame” which will make this snippet scrollable so you won’t have to worry about the size and comments not showing.

4) Now publish you site to your server either using direct FTP publishing in iWeb or to a folder then to your server.

5) Visit your page to make sure it is working properly with the comments and give yourself a pat on the back for adding comments to your iWeb page.

Comments using an iFrame:

2)  Now open up an HTML editor such as Coda or TextEdit.  Start a new page/document and paste in this code to create a blank HTML page:

and replace where it says <!– Add Comment Code here –> with your own comment code you got from Disqus or Intense Debate.

3) Now save the document as an HTML file (something like pagecomments.html)

note: If your using text edit be sure you go into the textedit prefs and under the Open and Save section and check the checkbox that says “Ignore Rich Text command in HTML files”.  Then when you save your html document be sure to change the file format to “Web Page .html”.

4) Now put your newly created html file on your web server host using an FTP program like Transmit.  You might want to make a folder somewhere that is just for comment pages.

5) Now that your HTML file is online, go visit the page to make sure it is working.  Your URL to test it might be something like www.yoursite.com/comments/commentHTMLpage.html, if it is working that you can smile and continue on, it not, go back and make sure you got everything in order.

6) Now all we need to do is iFrame that page into iWeb.  Simply go to the iFrame tip page by clicking here, and paste the iFrame code into a snippet, but don’t hit apply quite yet.

7) With the iframe code in a snippet, replace the iframe URL in the code to be the URL to your comment page (i.e. www.yoursite.com/comments/commentHTMLpage.html), then hit apply.

8) If your using Disqus you should actually see the comments show up, if your using IntenseDebate you actually won’t see your comments until it’s online.  At this point we need to do two things.  Resize our snippet and put those dimensions in the iframe code.  So…

9) Adjust your HTML Snippet to be where you want it to be on the page and the dimensions you’d like it to be on your page as well.

note: you don’t need to worry about stretching the snippet length extra large like on the direct snippet method above because this method is going to have a scroll bar when more comments are added.  So just make the snippet a good size to see a good comment post or two.

10) Now that your snippet is where you like it you need to put in the snippet width and height into the iFrame code.  You would have seen the dimensions while dragging the size of the snippet, but if you didn’t see it simply click the snippet so it’s selected and go to the Metrics Inspector (the one with the ruler icon) and see what the width and height is of your HTML Snippet box and put that into the iFrame code where it says width and height, and hit apply.

11) Your comments should now be ready to post online.  Simply publish your site online, test to make sure it is working and looking properly, and give yourself a pat on the back for successfully implementing comments into your iWeb site.

That’s all there is too it.  If you having problems you can watch the video tutorial on how to do this by clicking below:

Watch Video Tutorial »

Hope that answers all your commenting questions.  If you have further questions or if anything is unclear feel free to comment below.  If you feel that this tip has helped please consider donating to the iWebUnlimited;

[iWeb-Code=’donation’]

Thanks for stopping by.

—iJason