Findings Blog

Services like Rap Genius and Clipboard are allowing users to import text and annotate on their platform. We're taking that one step further with a new option on our Chrome extension to surface annotations on the original site content was posted on. Now, while browsing the web, see surfaced Findings highlights and comments inline on blog posts that have been highly clipped by our users. 

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.

Paris Review interviews have long been a source of great content for Findings' users. Plenty of our most favorite clips on Findings are found in the Paris Review pieces interviewing Ray Bradbury, Czeslaw Milosz, Marilynne Robinson.

Coming in at #8 is the Paris Review interview with William Gibson, the Art of Fiction No. 211.

Our countdown of the top sources on Findings continues!

Coming in at #9: Worrydream's A Brief Rant on the Future of Interaction Design.

        The essay focuses on Apple's ubiquitous one-finger motions with their touch screens and predicts (or more correctly, urges) that future touch-based technologies use whole hand motions.

Over the next two weeks we're running down the 10 most popular articles on Findings!

In the #10 spot is: The Tweaker, The real genius of Steve Jobs.

Malcolm Gladwell - the scientist of anecdotal evidence - wrote this piece for the New Yorker, declaring Jobs's indecisive and stubborn nature led him to glory. 

          Does the Findings team agree with the sentiments in this post? Malcolm Gladwell has a leaning towards breaking figures and great feats into smaller doses riddled with human traits, this makes his audience more likely to relate to the demigods. It's great for clicks and book sales. Everyone wants to see the similarities between themselves and an all-star. We're not Apple fanboys either, our defense of Jobs as a visionary has more to do with our belief that Gladwell doesn't provide enough evidence as to what would lift Jobs above 'tweaker' and into 'visionary'. Recognizing parts of other products that you would like to reproduce (his Xerox example) and declaring "I'll know it when I see it!" (iPad commercial example) are visionary. Gladwell claims Jobs was 'more editorial than inventive' without taking into account the scope of Job's creations. For someone who had a hand in the iMac, iPod, iPhone, iPad  - to demote him to 'tweaker' because he handed off core duties to others? It's visionary to know where your limitations are and who the right people are to bring in to the project. All parties reported to him and he refined the details of all products. Managing those creations, iterating into some of the best design products this decade has seen? Visionary. 

via Findings.