The A List Apart Blog Presents:

Embeddable Comments? Yes, Please.

Article Continues Below

Some of you probably saw our Outside the Box blog post from earlier today — what you might not have noticed is that the sample comments in the post aren’t screenshots, nor are they simply fancied up blockquotes.

They’re a new feature we’re releasing today: embedded comments.

Just like tweets, you can now embed ALA comments anywhere you like. This is one of those features that we’ve been wanting for our own purposes, and then we figured: as long as we’re building it, let’s give everyone the ability to embed comments.

The embed code consists of markup representing the comment (as a fallback for if the script fails to load — for example, in an RSS feed) and an asynchronous script tag that fetches a live comment from our server using AJAX, the contents of which are injected into an iframe. By using AJAX to talk to a cross-origin enabled endpoint rather than simply setting the iframe’s src attribute, we avoid cross-domain security issues that might prevent us from manipulating the contents of the iframe.

The iframe then replaces the fallback markup, and voila — a real live embedded comment.

I really like the clipped logo, I’m amazed it annoys people so much.

— David Sparks on Outside the Box

The JavaScript work was handled by Mat, and Tim made ExpressionEngine jump through the required hoops. In a first for A List Apart, we’ve opened up the source code on GitHub—and there are more repos to come, so stay tuned.

We look forward to seeing what you do with it.

20 Reader Comments

  1. That is an awesomely cool idea. It will make it a lot easier to credit sources of inspiration that come from comments. People deserve their due and to use the original words. Just like Tweets they might be taken out of context. Even linking to the original article won’t stop people from making assumptions.

  2. Nice choice of comment to embed guys – you stick to your guns 😉

    When I’d finished reading all the comments on the V5 launch post – yes, including *all* the comments by the people who hadn’t read the previous comments (that must drive you nuts!) – I was really hankering for a ‘back to top’ button… 147 comments to scroll back up through takes a bit of time on a smaller device 🙂

    Looking forward to seeing the new features you roll out over the coming weeks and months. Keep up the good work!

  3. I’ve got an idea for next step : when the user select some words with the mouse, a box on the left appears with a button : “Comment your selection”. OnClick: it opens an “Add comment dialog”.

  4. Great feature!
    One little problem occurs on narrow screens: the iframe has a width of 600px which results in having to scroll to the right if you want to read it, say, on a phone. Ordinary comments are shown with an appropriate width.
    Besides that I would love to read more about the security implications of cross-origin AJAX to iframe vs. pure iframe.

  5. When I first read the title of this post, I thought it was going to be a word style comment where the commenter could insert their comment anywhere in the article. But this is an interesting way to spread what people are saying on A List Apart.

  6. I noticed your new design doesn’t use hanging punctuation in bulleted lists (e.g. in this article). Although some consider that very bad typography. So what’s your opinion, web is different from print, or hanging punctuation is simply old fashioned?

  7. @mb21 — we’re actually fans of hanging bullets, but unfortunately in the ALA layout there are elements that float to the left at the top of articles. (example: Becoming Better Communicators)

    Hanging bullets in this instance would interfere with the illustration, and unfortunately CSS offers no logic akin to “Is something floating to the left of this element? If so, don’t hang the bullets out.”

    We have, however, hung the bullets on footnote lists, as you can see on the same article 🙂

  8. @Tim, I see 🙂 thx for the confirmation. unfortunately, some people find it ‘ugly’, i suspect mostly because they’re so used to indented bullets already…

  9. The logo is still clipped…

    kidding! That featured is wickedly cool! Looking forward to forking that repo after work.

  10. Lots of great user feedback over the last few posts dealing with the redesign. You guys are a lucky bunch, I have to say. It’s great to take it all into consideration but remember to follow your heart and your gut, and I don’t think you can go wrong.

Got something to say?

We have turned off comments, but you can see what folks had to say before we did so.

More from ALA

Voice Content and Usability

In this excerpt from Voice Content and Usability, author Preston So talks about the messy, primordial nature of human speech and challenges with programming computers to deal with these complexities.

Designing for the Unexpected

As devices continue to diversify in dizzying ways, how can we make sure our work on the web stays as relevant as ever for the long haul? Cathy Dutton shares how practitioners must perfect designs both for the paradigms of the present and the twists of the future, come what may.

Asynchronous Design Critique: Getting Feedback

Receiving feedback can be a stressful experience: will an open-ended question attract helpful guidance or harsh criticism? Erin “Folletto“ Casali coaches us through a process to ensure that feedback always lands gracefully.

Asynchronous Design Critique: Giving Feedback

You’ve heard the term “constructive criticism” countless times but do you know how to deliver it? Part one of this series from Erin ‘Folletto’ Casali gives you a framework for it! Flex your feedback muscles and practice these skills to empower and inspire others without deflating or confusing them.

That’s Not My Burnout

If, like many folks during the pandemic, you’ve begun confusing burnout for achievement, Donna Bungard will show you how to recognize that you’re low on fuel and give you a map of rest stops where you can refill your tank.