Tempus Fugit

Mark Jaquith's personal blog

AJAX Inline Comments

Update: a lot of people are misunderstanding what this is and are flooding this entry with “test” comments. If you want to see this in action, go to my front page. Find an entry with comments and click “show comments here.” There’s nothing fancy about my comment submission system.

I’ve been wanting to do this for a while, and I finally got around to doing it. My inline comments (“show comments here”) are now fetched asynchronously. Or, for those of you who speak Web 2.0-ese: AJAX is teh l33t 4 tha inline commentz!

And for those of you who don’t know what the heck I’m talking about… my inline comments used to be downloaded when you viewed my front page. They were just hidden. Clicking the link would reveal them. The problem with this is that as my posting rate has slowed and my comment rate has risen, there can be quite a few “hidden” comments being downloaded, which slows things down, both in terms of bandwidth and server queries. Now, the comments aren’t loaded. When you click the link, they are asynchronously downloaded in the background (it’s so fast, you probably didn’t even notice). Pretty slick, eh?

I used Moo.ajax to do it. I experimented with some of the Moo.fx effects for bringing them in, but there were complications, and it didn’t look so great for posts with many comments. But I do like Moo.fx a lot, and am likely going to find a use for it somewhere on this site.

Update: I have gotten the Moo.fx effects working reliably! So check out the inline comments now… there is a “throbber” animation as they load (which should only show for a split second with broadband… longer on dialup), and then when they load, they fade in and expand down. The fade/expand effect is used again for subsequent expands/contracts (without downloading the comments again, obviously).

Comments

  3. Ditto the first two commenters.

    And I’d still like to see an ajax comment posting plugin like you and I talked about that one time Mark. I still can’t get over how cool that was.

  4. Some of this could be made into a plugin, but it would still, unfortunately, require a good deal of work, because it needs to be integrated with your theme.

    As for AJAX submission of comments… I’m still not sure that’s such a good idea. It sort of messes with the status quo, and confuses people. And because of anti-spam measures… sometimes it can take a while for the submission to go through… and during this time the person’s browser doesn’t seem to be “working” on submitting anything. So… I dunno about that.

  7. Plugify! Plugify! Plugify!

    But if not, I would greatly appreciate a general how-to explanation so I can implement this on my own blog. I use the “Show comments right here” plugin and right now, with my blog being pretty small, the bandwidth is not an issue. But someday it will be.

  9. I’ve been working on integrating your great work into my site and I am having some problems getting my ajaxcomments.php populated with $comments or even $post. Can I ask how you brought over the post and comment data?

    I can run some wpdb queries, but I need at least $post->ID to get any comment information.

    Any help would be appreciated!

  10. Peter,

    $id = (int) $_POST['id'];
$post = &get_post($id);

    Then you can call your customized comments_template() function, or do a direct $comments = $wpdb->get_results( ... etc

  11. Just wanted to say thank you for the help!

    I got it up and running and I would like to give you credit on my page for the work. Do you have any preference on how I do that (or even care if I do)? I will probably include it in my theme also if that’s alright with you.

    I am still tweaking the css, but I’m really impressed with your coding. It’s helped me understand ajax much better.

  14. Sphagnum, this plugin does not seem to be the same thing as Mark’s idea here. The plugin appears to function like taking one to the permalink page.

  16. Yeah, check out this person’s blog, which is supposed to have imlemented the plugin. It’s just a “smoothed” over link to the permalink page with comments.

  18. It’s to tell what it does because when I click on the links to expand comments, it starts to open an RSS feed in my aggregator, so I can’t really tell if it’s working right.

  21. Yep, those links point to RSS feeds. He should be using a JavaScript onclick action and returning false to prevent that link from being followed (or some other method, that’s just the one I know.) But you’re not having that issue here are you? Note that I am not using his plugin, I coded my own version.

  22. Nah, someone made a comment about how a plugin was written that does this. And I commented that it does not do the same thing as what you did on your site.

  23. I know it’s not the same, I was just pointing out that it has the same effect of loading the comments onclick instead of on pageload. That’s all…

  24. In case you guys wanted to get ajax comments working, I have implemented Mark’s work into my ‘tonus’ theme. It only takes a dozen lines of code or so and some work with the css styling to get it into whatever theme you are running. I might try writing a plugin for it, but the css wouldn’t match whatever theme you were running.

    tonus homepage: tonus

  26. I finally got around to trying to make a plugin for the inline ajax comments. The page for it is here.

    My first attempt at a plugin, so let me know of any problems.

  30. Now i was thinking, Inline + nested comments + ability to add comment inline too would be something but it would probably be a monster of a plugin..

  35. So you still have the inline comment deal? Seems like everyone deserted this. I’m using the old expand comments plugin and I’m trying to find a replacement to upgrade but no one makes em anymore? Did I miss something?

  36. So you still have the inline comment deal? Seems like everyone deserted this. Iā€™m using the old expand comments plugin and Iā€™m trying to find a replacement to upgrade but no one makes em anymore? Did I miss something?

Trackbacks

  2. Binary Blue Theme v0.9.8 published now…

    I have published the new breakthrough version 0.9.8 of my popular Binary Blue wordpress theme just a minute ago. It is really another breakthrough, as it introduces both inline content expansion and inline comments with the help of just a little AJAX c…

  3. […] Update: I have gotten the Moo.fx effects working reliably! So check out the inline comments now… there is a “throbber” animation as they load (which should only show for a split second with broadband… longer on dialup), and then when they load, they fade in and expand down. The fade/expand effect is used again for subsequent expands/contracts (without downloading the comments again, obviously). Author: Mark Date Published: 1/13/2006 5:27:13 AM Read Full Article […]