iWeb Tip #23 – Comments in iWeb

106
49034
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. gmf 15 July, 2011 at 16:17 Reply

    I want to put a comment page on every blog posts as I post it in iweb. Do I have to make a new comments page, or something to make it read different each page? If I do these steps again on another page it links all the comments as one thread. Am I missing a step here?

  2. Dave 23 July, 2011 at 00:27 Reply

    i’m having the same problem that “gmf” is having. Can you please help us out? You have a great comment section here, I’d like mine to look just like this!

  3. Jayson 28 July, 2011 at 01:13 Reply

    Like GMF said, what do i do if i need comments for each blog post?? If i just iFrame the same page wont it be duplicate on all the posts??

    iJaison….please help

  4. Daniel 13 August, 2011 at 10:34 Reply

    Hi IJason,

    first off all thank you so much for your tips and the hole blog. It is amazing!

    To topic:

    I have a problem with Disqus. If I use the code one the page, it says something about editing the html code with my forum short name. I did that, but it won’t work. The page where the code is, doesn’t look the same as the one you are using in the video. Maybe something has changed? Can you take a look at it and tell me whats wrong?

    Thanks for you help. Daniel

  5. Ben Huson 18 September, 2011 at 04:54 Reply

    Hi,

    Another possibility for adding comment section into your website is by using the Facebook Social plugins. Lets people comment when logged into Facebook.

    Check it out and let me know if there are any questions.

  6. TC 17 October, 2011 at 20:25 Reply

    I have the same problem as some others on here. When I upload my comments html page to my website, all that appears is the html code, not the actual comment box. I am using disqus and edited my shortname in there as well. I’ve redone it multiple times and I still get the same result. Help!

  7. Marco 6 December, 2011 at 19:00 Reply

    Hallo and thank you for your tutorial! It’s a nice one!

    I’ve got 1 question. If I choose the iframe method… do I have to upload to my server each time a new selfmade html page with a different name for each post to my blog or can I use everytime the same URL for my iframe snippet?

    greetz

    marco

  8. Ingo 23 January, 2012 at 15:26 Reply

    Hey….

    is there a more simple way of implementing iframe with the comment bar?

    for example of having the complete html text build together and then put it into a snippet on the iweb page…

    then upload the page and its done ????¿?

    greetz

    Ingo

  9. Joe 23 April, 2012 at 09:09 Reply

    Hi,
    Thank you for this useful tutorial.
    It works!

    I have a request:
    (After looking for unsuccessfully for an answer on Google)

    Is there a way to make the iframe auto expandable?
    No scroll bar, no escarole comments.

    The comments area grows down as comments are added.

    All I can find involves js, but nothing as simple as your code.

    Could be mane by simply adding some instructions to the basic iframe code used here?

    Thank you so much!

  10. Jeanette 13 June, 2012 at 21:24 Reply

    Thanks so much for your directions on this! I’m unclear about how to add the iFrame if I want the comment box at the bottom of each of my blog entries. The video example was if the comment box was on a page all of it’s own, so I got lost when I went to copy the URL for the iFrame. Help please??

    Thanks,
    Jeanette

  11. Odd Gunnar 20 June, 2012 at 17:22 Reply

    Thank you for a great site! I would like to apply the iframe version in the blog under each blopost. Is there a way to make this permanent. it seems difficult to do this every time I enter a blog post. Thanks!

  12. Jack Santos 14 September, 2012 at 14:39 Reply

    Hi, I was successful in applying the comments portion onto my website using Disqus and iFrame. (back patted already)

    However, when trying to view the website on my iPad, the iFrame scrolling does not work, and instead the overflow contents just extend past the iFrame dimensions.

    Do you have any suggestions on making the comments work on in Ipad?

  13. laura 25 November, 2012 at 19:49 Reply

    Hi,

    Its still not working. It says still “loading” and I don’t know what I’m doing wrong. Someone help me?! I’m getting beyond frustrated. :/

  14. Dapink, Gemma Dotzler 22 January, 2013 at 11:27 Reply

    I have used Discus for more of my websites, it works great and people are really accustom to it, I have never had a problem with it and you can link your profiles to any website you want to, so people can know you better, it is a very simple, asy and common way to make comments and share your image.

  15. Jo 4 January, 2014 at 04:52 Reply

    Hi there,

    Your website is fantastic and has been tremendously helpful as I’ve tried to re-establish comments which I’ve finally got around too, a very long time after mobile me!

    One question though, I’ve been trying and trying with the iframe but I just can’t make it work. I don’t know what I’m doing – I’ve followed both your instructions to the letter and those in some other websites, but really no luck I just have a big white page.

    I’m wondering if I have the wrong code from disqus, or if I haven’t correctly changed the editable code from disqus, Am I supposed to delete some of it?

    Also – another slightly related question. I have quite a chunky website with lots of photos, when I publish from iWeb itself to my folder, it seems that I have to publish the whole website even though I might have only added one blog entry. Do you have any idea if it is possible to just publish the new pages – I just can’t work out how to do that.

    THanks

    Jo

Leave a Reply to MoXoM Cancel reply

Facebook
Twitter
YouTube