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.
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:
- DomHelper – Create Elements using DOM, HTML fragments and Templates
- Yahoo! UI Extensions Library Release 0.32.2
- Creating an AJAX feed viewer using Yahoo! UI and the new Grid Component
- Better Yahoo! UI code with the Element object
- Javascript Animations with Yahoo! UI made easy
- A primer on the Grid’s new event system
Site Search Tags: wordpress, ajax, yahoo! ui, yahoo ui, javascript, ajax comments, wordpress comments, javascript animations, designing comments, wordpress templates, yahoo.ext, jack slocum
Copyright Lorelle VanFossen, member of the 9Rules Network
Lorelle on WordPress 
18 Comments
Lorelle, you site is really brilliant, from the look to the content. I love it.
Cheers,
Mac
The load on the server w/ this thing must be insane.
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. 😉
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!
It is completely brilliant. I can’t wait for the plugin!
Wow, I wonder if someone put this together for a WP plugins. It will be great!
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!”
Oops, my bad, I didn’t look at the link at the first of the post 😛
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.
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.
Already did that on my blog 🙂
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.
Looks pretty sweet. A plugin of this would be cool to try out. (I’m a try before you buy type of guy :P)
how do I get this AJAX code to work if I simply begin putting php together?
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?
Visit the code author’s site for instructions.
nice …
thanks for sharing …
checking ’em out now …
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
[…] The Future of WordPress Comments with Ajax: Comments Attached to Content […]