iWeb Tip #23 – Comments in iWeb

106
4360
Comments in iWeb

Comments in iWebSo 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:

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

Non MobileMe Comments in iWebTo 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:

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="https://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>Comments</title>

</head>

<body>

<!-- Add Comment Code Here -->

</body>

</html>


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

iJason

106 comments

  1. Chuka 1 October, 2010 at 11:29 Reply

    Hi, I tried using “Disqus” but when I paste the code a copied from the disqus.com, on the page in which I want the comments, it’s says something like “The code doesn’t function”. It just doesn’t work. Any thoughts as to why?

  2. Thierry 21 November, 2010 at 13:24 Reply

    hi everybody,

    another way to have a scroll on the div is to put a custom css in the disqus panel.

    Goto to admin -> settings -> appearance

    put this piece of code (adapt to your will):

    #disqus_thread{
    height:800px;
    width:650px;
    color:#000000;
    font:13px/16px Verdana;
    overflow:auto;”}

    and save.

    That’s all !

  3. Jeff 26 December, 2010 at 00:39 Reply

    Hello i am using Disqus Comments and im stuck i took my files to my server but when i go to view the comment box it only gives me the html code. HELP…

    • Kelly 12 May, 2011 at 12:56 Reply

      Did you ever solver this? I’m having the same problem, it just publishes the HTML code, I don’t get a comment box to show up. What am I doing wrong?

  4. roco 1 January, 2011 at 02:08 Reply

    problem is, if you use the iframe technique don’t you then have to create a separate iframe for EVERY blog entry? The issue I’m having is that pasting the same Intense Comments iframe on each of my blog pages then makes it so that if you leave a comment on one page, it appears in *every* comment box on every page. Is there something I’m missing here? It seems like an awful lot of work to create a separate iframe page for EVERY blog entry (especially since I have over 1000 blog entries). Is there a solution to this?

  5. Don S 11 January, 2011 at 12:18 Reply

    I’m trying to create a disqus comment section using an iframe. It seems like the create a blank html page isn’t working. I copy and past your code and then the disqus code to a textedit sheet, I then upload it to my server and when I tyoe in the website in my browser, just the printed code comes up. Please help, I’ve been at this for 3 days.

  6. Anthony 9 February, 2011 at 20:34 Reply

    Hey, to everyone who are only seeing the HTML code in the boxes you need to open the code up from your website (through FTP) and compare it to the code you copied from this site. Most likely your text editor or notepad what ever you used added some code to what you copied from the site. Another thing you cn do if your not too tech savvy you can manually type out the code. If you need help let me know

    • Dennis 27 April, 2011 at 10:34 Reply

      Anthony…. I have checked and rechecked but still simply get the HTML code displaying when I type in the URL …

      Code looks the same. any suggestions? does it have to do with where it’s uploaded on transmit?

  7. Nisha 15 February, 2011 at 14:37 Reply

    first I need to say THANK YOU! your site is awesome and has helped me tremendously through out the process. I just wish I knew about it before I started designing so I could use all the tips ;)

    My question is why is my comments box cutting off. If you go to the bottom of the page to where the comments are and hover over say the “like” button, a bubble comes up over it but it is cut off. I moved the hypertext box down thinking that may have been the problem and made sure the frame around it was in the back… but I still don’t know.

    This is the page I am referring to. If you could help me out with this I would so much appreciate it. Thank you!
    http://www.fromtherivercollective.com/Blog/Entries/2010/12/2_New_Young_Artist__Frankie_Tripp_1.html

    • MoXoM 13 March, 2011 at 16:11 Reply

      Hi Nisha,

      I’ve recently started using DISQUS on my site and I had the same problem. To resolve this, I had to add the following HTML code “” just above the line “” in the comments.html page.

      Let me know if this helps…

  8. Gina 3 March, 2011 at 18:33 Reply

    When customizing iWeb, how do you apply the customization to the new blog entries? I’m creating a site for a friend and he’ll need to be able to simply click the add entry button.

  9. MoXoM 13 March, 2011 at 16:02 Reply

    Hi,

    What a fantastic website!

    I’ve followed your tutorial and I’ve managed to integrate a DISQUS comment system on my site (http://www.halabalu.com/HALABALU%21/Multimedia.html).

    However, whenever I add a comment on my site using Safari 5.0.4, these comments do not appear on Firefox and Google Chrome!

    Likewise, if I add a comment using Firefox it will appear in Chrome and vice-versa but not in Safari!!

    What am I doing wrong? Is there a known problem with Safari?

    Thanks in advance for your help!!

    Mo.

  10. SB 31 March, 2011 at 11:48 Reply

    Hey iJason – thanks for the manual. I am having my fresh website hosted on dropbok and using .tk . I have used this guide to attache DISQUS to one of my pages, and it’s working. When I try to implement the iframe, all I get is the html code file appearing, inside of the scrollable frame. I created the file with textedit, and passed it manually into dropbox public folder, to the folder where all the site is (meaning I did not use transmit). i don’t know if this is my problem, not using transmit, as I did all the rest few times, by copying the new code, and also typing it myself. Also, there is no link to click on (section 6) which suppose to lead to iframe tip page, so I found the iframe cod somewhere else.

    Any idea, suggestion? Thanks allot!

  11. Smitty 1 April, 2011 at 14:35 Reply

    I have the exact same question as Roco above, and I have not yet been able to find a solution. Any answers?

    Here’s a quote of what Roco said:
    “problem is, if you use the iframe technique don’t you then have to create a separate iframe for EVERY blog entry? The issue I’m having is that pasting the same Intense Comments iframe on each of my blog pages then makes it so that if you leave a comment on one page, it appears in *every* comment box on every page. Is there something I’m missing here? It seems like an awful lot of work to create a separate iframe page for EVERY blog entry (especially since I have over 1000 blog entries). Is there a solution to this?”

  12. mfilla 3 April, 2011 at 23:52 Reply

    I’m using MobileMe. I’m confused when you say:

    “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).”

    I’m new to all this, so I’m might not understand what is possible.

    I want people to be able to type on a page and have their comments stay posted. Specifically, I’m wanting an online Journal (didn’t know if that would help). Why do I need a separate “Blog/Podcast page”? I want them able to type somewhere, and have their comments posted there.

    I hope I didn’t confused anyone with my ignorance.

    MF

  13. Raymonde Stulce 9 April, 2011 at 02:04 Reply

    23. I don’t even know how I ended up here, but I thought this post was great. I don’t know who you are but definitely you are going to a famous blogger if you are not already ;) Cheers!

  14. Kevin 24 April, 2011 at 17:19 Reply

    Can a person fully moderate the comments made? In other words, can someone make a comment, and this comment NOT be posted, (for the public to see), until, (I), the moderator approve it?? If so, which comment platform allows this control??

    Great video & website !

    Thank You !!

  15. Jason 19 May, 2011 at 00:17 Reply

    I cant get the scroll bar to work I’ve used the code in this top but no joy

    any help wound be great

    Jason

  16. Alex 19 May, 2011 at 03:52 Reply

    I’ve copied the code and put it into a HTML snippet in iWeb and it works, but the problem is that if anyone posts on any of the blog entries, their comment shows up on all of the blog entries. Any help with this would be appreciated to have their comment on just the blog entry they are posting to.

  17. Rohan 4 July, 2011 at 09:37 Reply

    I have a mobileme comment page but when i publish it to just host it doesnt show. Is it only if you publish it to mobile me and also what did you use for these comments.

  18. MCM 6 July, 2011 at 11:34 Reply

    What if you don’t have Transmit or some other FTP program. I’m using Go Daddy as my server and can’t figure out how to get the HTML code to put into my HTTP widget. Does that make any sence?

  19. MCM 6 July, 2011 at 11:38 Reply

    Also, when I copy the code from Disqus and paste it into iWeb (in the non iFrame version) it says that iWeb can’t read the code. What needs to be changed in the Disqus code to make it work.

    I’m pretty dumb with computers, so go easy on me.

Leave a reply

Facebook
Twitter
YouTube