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.
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.
Embed this comment.
The next step? Comments embedded in comments — moohoohahaha… it’s comments all the way down!
Honestly I saw the embedded comments and thought the blog post was only a single paragraph! 😉
@Alex Mahan: Ha ha! Touché.
@Miff C. D. Falden: There is that risk, yes.
Booyah! Nice work boys!
Woah! I gotta say, I’m beyond impressed with all the awesome y’all are doing with A List Apart. Exciting!
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.
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!
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”.
@Design Twelve and Lafitte Pierre, thanks for the wonderful suggestions! 🙂
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.
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.
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?
@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 🙂
@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…
The logo is still clipped…
kidding! That featured is wickedly cool! Looking forward to forking that repo after work.
@DavidVII: LOL, good buddy. LOL!
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.
With all the talk about bullets, got me wondering
Didn’t get the memo on this!