Skip navigation

The Future of WordPress Comments with Ajax: Comments Attached to Content

Jack Slocum has come up with “WordPress Comments System built with Yahoo! UI”, a method of creating comments which attach themselves to specific content areas within a post.

I think it turned out to be a perfect example of what can be done in a very small amount of time with Yahoo UI and YAHOO.ext [within a WordPress Template]. In a day’s worth of work, I have completely transformed the comments system on this site. Around half of that time was spent on the user interface, and the other half modifying WordPress to do the things it needed to do on the backend.

It was imperative that the new system be able to retain existing comments and still support the same external API. Existing comments appear as General Comments, attached to the title of the post.

New comments can be General Comments as well, or they can be “Block” comments. A “Block” is any paragraph, image, title or code in a post. When you select a block to comment on, it is highlighted in blue.

Pick where in the post you want to comment. Comments can be posted anywhere in an article. If you see something and you wish to comment on it, click on the comments bar directly next to it.

This is not for the average blogger. For those doing collaborative writing or projects, this could be a brilliant way to comment and provide notes on document sections. For the average blogger, I think this would be a cute gimmick. It does add visual clutter to the web page design.

Jack Slocum - Comments using Ajax and Yahoo! UI in WordPress

With Slocum’s technique, you see a numbered “tab” next to a paragraph or title with a number in it. The number represents the comment count for that section. Click it to read the comments attached to that paragraph or title in an Ajax popup window. The comment window can be resized.

Comments are posted and viewed using Ajax, so there are no page loads. At the bottom of the article is another link that will take you to a page to view all the comments.

To make this work, you need to work with Yahoo! UI Extensions and the YAHOO.EXT program file, and have familiarity with Ajax, Javascript, and DOM, as well as XTHML and CSS. I expect this entire process will be soon turned into a WordPress Plugin, though it will be a challenge.

You can learn more about how the entire process works from other posts written by Jack Slocum and from his forum and online documentation:


Site Search Tags: , , , , , , , , , , ,
Copyright Lorelle VanFossen, member of the 9Rules Network

Member of the 9Rules Blogging Network

18 Comments

  1. Posted October 11, 2006 at 8:59 am | Permalink

    Lorelle, you site is really brilliant, from the look to the content. I love it.
    Cheers,

    Mac

  2. Posted October 11, 2006 at 9:13 am | Permalink

    The load on the server w/ this thing must be insane.

  3. Posted October 11, 2006 at 9:44 am | Permalink

    I do agree with you that for most of us, average bloggers, this is a gimmick. The UI of the comments itself feel very nice tho. I wouldn’t mind having this on my website. ;-)

  4. Posted October 11, 2006 at 10:50 am | Permalink

    I have to agree that it appears that the load bearing weight of all the javascripts must take a toll, but it loads fast and appears to work fairly fast.

    The more I think about it, this is totally brilliant for collaborative work. Imagine working on technical manuals or documentation, or even research papers and being able to comment on specific content to help expand the work. To get to that point and be really helpful, it would need to also include tags or symbols to mark which comments you’ve read and which have been acted upon, kinda a comment board to do list.

    I see this expanding into the future for such team work projects, but for the average blogger, gimmick. I found myself frustrated with the inability to scroll down all the list of comments easily. And when I did click the “view all comments” there were over 400 comments. I didn’t count that many from the number viewed in the comment tabs! So a comment counter is critical next to such a link to give us an idea that there has been some comment action besides just the comments in the content blocks. Great potential!

  5. Posted October 11, 2006 at 11:35 am | Permalink

    It is completely brilliant. I can’t wait for the plugin!

  6. Posted October 11, 2006 at 12:58 pm | Permalink

    Wow, I wonder if someone put this together for a WP plugins. It will be great!

  7. Posted October 11, 2006 at 1:08 pm | Permalink

    Such features point toward what blogging will be like in the near future — a virtual hive-mind of users perpetually manipulating the evolving entirety of human knowledge online. I have to agree, though — “I can’t wait for the plugin!”

  8. Posted October 11, 2006 at 2:05 pm | Permalink

    Oops, my bad, I didn’t look at the link at the first of the post :P

  9. Posted October 11, 2006 at 9:03 pm | Permalink

    This is exactly what people have been waiting for to use in academic and research weblogs. Finally! Now, nested comments with that, and we’re going somewhere.

  10. Posted October 12, 2006 at 7:02 am | Permalink

    That’s a pretty interesting concept. This will come in handy on instances where you have lengthy posts(articles) and you wanted to comment on a particular piece of it.
    By looking at it, it seems like the commenting is done at the paragraph level. Can it be done at the sentence level without cluterring the post? That would be great.

  11. Posted October 12, 2006 at 11:42 am | Permalink

    Already did that on my blog :)

  12. Posted October 14, 2006 at 9:58 pm | Permalink

    I’m not sure that this sample is the future of WP. I actually hope not… I don’t want comments haphazardly strewn across my site. However, I do feel the future of WP is Ajax when it comes to administration integrated into the theme with a Rich Interface. I’m a huge fan of WP, but I still have to educate my clients on how to administer their site… it’s still too steep a learning curve for the non-techies. One-click install is great… one-click posts, pages, trackbacks, comments, etc. will even be better with the admin integrated to the external site.

  13. Posted December 12, 2006 at 8:55 pm | Permalink

    Looks pretty sweet. A plugin of this would be cool to try out. (I’m a try before you buy type of guy :P)

  14. Posted December 19, 2006 at 9:26 pm | Permalink

    how do I get this AJAX code to work if I simply begin putting php together?

  15. Posted January 30, 2007 at 8:13 am | Permalink

    Nice concept, How to get the code for separate web page or website, If I wants to embed this comment box with my own website?

  16. Posted January 30, 2007 at 8:34 am | Permalink

    Visit the code author’s site for instructions.

  17. Posted April 12, 2007 at 2:41 pm | Permalink

    nice …
    thanks for sharing …
    checking ‘em out now …

  18. Posted June 12, 2009 at 12:57 am | Permalink

    I’m looking for either an AJAX script or tutorial on how to create an AJAX comments section similar to the comments section on Youtube where the pagination is loaded within the current page when you switch pages and replies are also added without a page refresh.


One Trackback/Pingback

  1. […] The Future of WordPress Comments with Ajax: Comments Attached to Content […]

Post a Comment

Follow

Get every new post delivered to your Inbox.

Join 20,804 other followers

%d bloggers like this: