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.
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
- A primer on the Grid’s new event system
Copyright Lorelle VanFossen, member of the 9Rules Network