So you're quoting a tweet? Please don't do it with a screenshot.

I’ve seen a lot of people quoting tweets in their blogs by simply including a screenshot of the posted page from Twitter.

That’s just wrong for so many reasons.

Next time I quote a tweet in this blog, I’m using Citer, a bookmarklet I’ve been working on to create semantic, visually appealing, twitter quotes.

So what’s so wrong with using screenshots?

Most people that are quoting tweets are leaving out the semantics in html – its an image of a twitter post that may or may not link to the original tweet. As far as the code is concerned, it’s just an image on the page. From the standpoint of the data driven web, there is no value and no connection.

While this might sound like a slight detail that few people would really care about, if we ever want to get to a truly semantic, data driven web, we need to build the connections between data and pages correctly!

We need to get back to basics and use the HTML elements that were designed and intended for specific uses. Even if it’s in an off-the-cuff blog post thrown togehter in-between stop lights, we need to construct our documents as semantically and data rich as we can..

In the case of quoting tweets we have a couple ways to do it.

Quotes. Don’t we know how to do this already?

If you do a google search for quoting people and websites you’ll get more results on the subject than you can shake a smartquote at. My personal favorite is an old post from 456 Berea St. titled Quotations and citations:quoting text. The conclusion?

If you want to quote a large block of text like this:

<blockquote>
    <p>Good artists exist simply in what they make, and consequently are 
    perfectly uninteresting in what they are.</p>
</blockquote>

It’s web 101. If it’s from a webpage, you add in a cite attribute:

<blockquote cite="http://www.oscarwilde.com">
    <p>Good artists exist simply in what they make, and consequently are 
    perfectly uninteresting in what they are.</p>
    <p>Oscar Wilde</p>
</blockquote>

Now, most of us know this already, and a tweet would look like this:

<blockquote cite="http://twitter.com/ConanOBrien/status/15053038046">
    <p>I am performing on the Jersey Shore tonight, so please only refer to me by my 
    Jersey Shore nickname: "The Solution".</p>
    <p><a href="http://twitter.com/ConanOBrien">Conan O'Brien</p>
</blockquote>

So why isn’t this example twitter quote above perfectly acceptable?

The personal brand

It seems to be that tweets aren’t just the words of those who are saying them, but a representation of a personal brand. What better way to show the human side of a tweet than to include the personal design and avatar along with it – bringing a more personalized look to what can be a bland quote.

The personal look of the tweet does have some merit, and the practice of doing screenshots of tweets has become so proliferated around the net that Twitter is already addressing it with its first incarnation of a solution in Blackbird Pie. I’ve seen it all over the place but I won’t name any names.

Twitter’s Blackbird Pie

I was glad to see Twitter addressing a different way to quote tweets, but I had a couple issues with the execution:

• Styles are in a <style> element – which is invalid html.
  There isn’t any sort of <blockquote>, <q>, or <cite> element – don’t get me started, that’s my biggest issue with it.
• The time is wrong – it always says a relative time that it was posted, like ’2 hours ago’ – which doesn’t quite work a year from now.
• The workflow for authors is a bit cumbersome (find tweet, grab url, visit Blackbird Pie to Bake, copy code out) – two steps too many for me.

It was premised as being just an idea and wasn’t the end-all way to get it done. I imagine Twitter’s ultimate solution would be some sort of cient-side JavaScript like most of the @anywhere features they’re now offering up, but that doesn’t quite sit will with me either.

Turn it up a notch or two

I wanted to take this idea a step further and come up with a better way to get this done and focus on ease of use for those quoting tweets. I needed the workflow to be more simplified and I figured the best way to get that done was through a bookmarklet that could be run on the Twitter status page, instead of copy-and-pasting urls.

The “Citer” bookmarklet

I put together a project page especially for the Citer bookmarklet if you’re interested in playing around with it – there are lots of more details there. Unlike a lot of things I work on that never get released, this one actually came together. It took me 3 days to write but several weeks before I decided it might actually be worth something. (Thanks @imkeyswhoru for thinking this was cool as hell)

Going into development, there were a few things that I thought be be helpful. Aside from a better workflow, I wanted to give users the ability to customize the way the code was output.

You’ll notice options for:

• HTML4 vs. HTML5
• Including “Person” Microdata
• In-lining layout Styles vs. Integrating CSS in your main stylesheet
• In-lining Twitter User’s custom background/link styles

Eventually, I’d like to keep moving with this to work on sites outside of twitter. I have some ideas that seem to be pretty worthwhile so hopefully this will continue to grow.

The Citer quote (html5 + microdata + user design)

Here’s what a Citer quote looks like embedded in this post (not using inline styles – because I plan on using this more than once):

Planned obsolescence, maybe

As with everything that moves fast on the web, Twitter will probably have a good solution shortly, but I plan on continuing with this and expanding its use beyond Twitter. In the meantime, I hope you can get your money’s worth out of it (Shit, it’s free so that shouldn’t take long)!

I welcome as much feedback as you can give, so test it out and let me know. (The details on how to submit features or bugs are in the bookmarlet itself)