URL unfurling is one of the names given to that funky thing that happens when you paste a web address into a post in Facebook (or other social network) and automatically get a preview of it – an image, the title and maybe some extract text.

This was a much requested technology that was sadly missing from Known for a long time, but for no longer!

In the latest builds you will automatically get URL unfurling occurring in status posts and likes/bookmarks. What’s more, you’ll get a URL preview when you’re editing your post.

Behind the scenes this tool makes use of a number of technologies, notably:

The Unfurling endpoint

This is an endpoint which is called by a client side javascript library.

When passed a URL, this endpoint will attempt to fetch and parse out header tags – title, open graph, facebook and twitter tags. It’ll also attempt to extract certain whitelisted OEmbed endpoints (currently only JSON endpoints are supported).

It will then render out in a pretty way – using oembed as preference, but if that’s not present (or not whitelisted) it’ll use Open Graph, and finally page title and description meta tags if nothing else is found.

Image proxy

If there is an image present in the open graph headers, this will be retrieved by a local caching image proxy. This proxy fetches and saves the image locally so that the remote site doesn’t get hit every time you refresh your page (this also helps protect your privacy).

Enjoy!

When you paste a link into Known, if it’s something like a youtube video (or Soundcloud or Gist if you use my plugins), it’ll attempt to expand the link into a displayable embed code.

Trouble is, when you used a link shortening plugin, this url was changed and the display got broken.

I have submitted a patch upstream which modifies the link display code with a hook which a link shortening tool can listen to, and expand links where appropriate.

When you apply this patch, the latest version of the bitly link shortening plugin will be able to expand links within a post, caching them against the object for future reference.

» Visit the project on Github...

Following on from my post yesterday, I would like to introduce something I quickly hacked together to show how the kind of thing I was talking about might work.

As discussed in yesterday’s article, I already use twitter to provide a data feed for selective traffic alerts.

Street Level URLs provides a simple wrapper around this search, providing you with a nice summary page and the option to access the data in a number of different formats.

It uses twitter for the actual data and uses mod_rewrite rules to wrap the actual search up into an addressable URL.

Have fun!

» Street Level URLs