Suppose you've found a really juicy important tweet? One so important that you want to quote it on a web page? The normal method is to do a screen capture, and embed the image, but that loses all the semantic value of the tweet. It's better from several perspectives (SEO, meta data, information architecture, etc) for the tweet to be represented nicely as a block of semantic HTML. Right? But there are very few tools to help you do this. If, like me, you're using Blogger you don't have the freedom of installing a plugin in your CMS (Drupal & Wordpress both have plugins to make nice representations of a tweet), and in any case it might be better to just generate a block of HTML for approximately the same reason that YouTube and other media websites offer embed codes for their content.
Let's take a look at an example tweet in a twitter stream (embedded as an image):-
A little known fact is that the timestamp on a tweet is in fact a link to a page that shows ONLY that tweet. In effect, each tweet has a permalink taking you to a page showing something like this:
The permalink for the tweet shown here is: http://twitter.com/#!/maxgladwell/status/128299821583974401
To lay the stage, you're writing a blog post, you've seen one or more tweets to quote, what do you do. A thing I've done in the past is to copy/paste the text of the link, using the permalink to reference the tweet. Like: There are plenty of jobs. It's just that 9% of Americans don't have the skills to do them. But this is suboptimal as there's a whole bunch of twitter metadata that isn't being shown, and in any case it would be great to present the tweet in a way that looks like a tweet, right? That's why so many people go to the trouble to take screen captures like the above, so that the tweet looks like a tweet.
Like, this?
There are plenty of jobs. It's just that 9% of Americans don't have the skills to do them
Mon Oct 24 02:40:35 +0000 2011
By the way - I am almost completely in disagreement with the text of this tweet, it's just one that I picked at random from my twitter stream. The problem isn't about skills, but in some cases there's an unwillingness to do dirty jobs, and in other cases the jobs that had been in America have been globalized away to other countries. But - going any farther on this would be a major distraction away from this blog post. So…..
The point here is that this representation of the tweet is better than embedding an image because there are several useful links, the text is indexable by search engines, etc.
This is perhaps better than a CMS plugin - one where you'd simply paste in the permalink, and the plugin takes care of collecting everything to display the tweet in a fashion similar to this. Why do I say this? I like to get the embed code for youtube videos myself rather than rely on the CMS to do so for me. It's unfortunate that twitter.com doesn't provide embed codes for tweets, so I've instead written a little tool for this purpose.
The tool is written for Node.js and is retrievable from github: https://github.com/robogeek/twitter-embed
(aside: When you're pasting a link into a post - how should it be rendered? Just as a link? Or as a nice block of HTML using metadata from the target of the link? This is what we're talking about here - generating a meta-data-rich representation of a tweet.)
I suppose shortly you'll be able to install this using npm ilke so:
$ npm install twitter-embed
For the moment, instead, in a node_modules directory, type:
$ git clone git://github.com/robogeek/twitter-embed.git
By extracting this in a node_modules directory it becomes available to Node so you can write a little script like (I named it twget.js):
var tw = require('twitter-embed');
tw.formatTweet(process.argv[2], function(text) { console.log(text); } );Now you can run the script as so:
$ node twget.js 'http://twitter.com/#!/maxgladwell/status/128299821583974401'
It outputs, on the console, the HTML code for a tweet formatted as we see above. I should note that you must surround the tweet URL with quote marks as shown here because the '#!' that twitter embeds in the middle of their URL's makes it problematic to put the URL on the command-line.
There isn't a lot to this script - it's all done inside the twitter-embed module. And even that module is pretty straightforward. Most of the work is done via the Twitter API, specifically this API endpoint: https://dev.twitter.com/docs/api/1/get/statuses/show/%3Aid
Under the covers twitter-embed makes a request to: http://api.twitter.com/1/statuses/show/128299821583974401.json?include_entities=true
Twitter's response to this request is an extensive block of JSON (or alternatively XML) and by requesting include_entities there's even more data to play with. From there it's a simple matter to render the data through an EJS template.
There are some further things which could be done with twitter-embed, given time.
As it is it's not quite optimal as a command line. Sure, twget.js can be improved but command line tools aren't quite right for this in the first place. Maybe it would be better as a browser plugin, or as a website.
It should also handle the other Twitter URL's, primarily links to a given account (e.g. http://twitter.com/#!/maxgladwell).
There's also the general case here - for example, generating the embed code given a twitter link, or a link to any of several dozen various websites that publish API's to retrieve metadata. I've posted on this before (http://nodejs.davidherron.com/2011/03/could-storify-be-implemented-in-drupal.html) after having played a bit with the Storify website.
In any case - the tool is there - please let me know if you like it or have any suggestions or code to share (via github).