For a long time we’ve felt that while 140 characters is an excellent method to enforce brevity, the real power of twitter is that it’s a filtered index pointing to longer content. Sometimes that 140 characters isn’t quite enough.

Twitter has added “twitter cards”, attached data pulled from the destination url in a tweet attached to the tweet itself.

A tweet + twitter card for this page looks like:

Populating The Card

It works like opengraph’s meta properties, e.g.

<meta property="og:title" content="Some Title">

similarly:

<meta name=”twitter:title” content=”Some Title”>

Like Facebook, Twitter will go out and fetch this metadata from your site. Be aware, that if there are multiple links in a tweet, the twitter card fetched will be from the last url in the tweet. The good thing about the similarity with Facebook’s OG is that we could implement it extremely quickly by using the same blocking in our templates, and logically likewise in the application structure.

Upshot here is that Findings can populate share tools with the usual title and url or urls, and the tweet will then have a card attached with more about the Findings clip itself, rather than the brief 140 characters we all know and love.

A full entry looks like:

<meta name="twitter:card" content="photo">
<meta name="twitter:image" content="https://d10ukufw9e4fll.cloudfront.net/images/66f0b21159c7c2e7f88280e466818857.png">
<meta name="twitter:site" content="@findings">
<meta name="twitter:url" content="https://findings.com/clips/QjQMlr/star-wars-episode-i-the-phantom-menace/">
<meta name="twitter:title" content="Star Wars: Episode I - The Phantom Menace (1999)">
<meta name="twitter:description" content="During filming Ewan McGregor made lightsaber noises as he dueled. It was noted and corrected during post production.">

(Which you can see in “view source” on this page.)

From the docs you’ll see there are 3 types of cards, summary, photo and player. Summary and photo are the types we’re concerned with, particularly photo, since we have the ability to generate an image of the Findings clip itself in the theme chosen by the user who clipped it.

Note here that the twitter card metadata has an “@” user address, which is us, so that the bottom of the card has attribution to our site and twitter user.

This is a great extension of a tweet since the tweet text itself can refer or describe the content in the card, and visually on twitter be immediately understood. We’re generating images of text because we’ve seen that people tend to repost a quote between services like Twitter, Facebook, Pinterest, Tumblr, etc., when there’s a specific presentation picked by a user.

If there isn’t a share image generated by a user for the Findings clip, by default we use a summary, which is basically the same text as text. And if someone shares a page other than a Findings clip, we’ve got a basic twitter card summary, with the site tag and info.

Generating The Image

We use something called Phantomjs to generate the images of the themed clips.

Phantomjs is webkit with a js api, so that when a clip is shared via the site we start a task to create the image and pop it up on S3. This is a fairly quick process. Using the same html/css the user sees in the browser as the rendered image means less upkeep when adding new themes — they’re always going to match, and we can preview them easily, also in browser. The process to screen capture via Phantomjs is pretty simple, summed up in this example[b], but the majority of it is:

var page = require('webpage').create(),
    system = require('system'),
    address, output, size;
address = system.args[1];
output = system.args[2];
page.viewportSize = { width: 600, height: 1 };
window.setTimeout(function () {
        page.render(output);
        phantom.exit();
    }, 200);

which is run as a task:

phantomjs shareimage.js http://somefindingsurl.com someimagename.png

(Of particular note: use height 1 for variable height pages, rather than 0)

We’re pointing shareimage.js at the same url but with the addition of a format parameter that hides the surrounding container. Images are generated once, so the resource hit there is small.

Be aware that Twitter will resize your image, if you’re using the photo twitter card type. We don’t notice any significant degradation, although for something so font important, it isn’t perfect quality either on our side generating or in resizing. This, as well as the fact that Twitter goes to your site to get the twitter card content means that the attachment of the card isn’t instant, we notice a couple of second uptake of the info to the stream entry.