Extending Twitter – adding Imgur previews 3

Enabling Imgur preview in Twitter

 

Update 08/12/2010 – There’s now a Firefox Extension in the Add-Ons sandbox available for adding this media preview to Twitter, as well as previews for Daft.ie and Adverts.ie ads.

With their recent site redesign, Twitter added a number of interesting new features. One of the more useful of these is the media preview. From the Twitter blog:

Media. Now, it’s easy to see embedded photos and videos directly on Twitter, thanks to partnerships with DailyBooth, deviantART, Etsy, Flickr, Justin.TV, Kickstarter, Kiva, Photozou, Plixi, Twitgoo, TwitPic, TwitVid, USTREAM, Vimeo, yfrog, and YouTube.

This is definitely one of the more useful features of the new Twitter web interface, and covers most of the more mainstream media sources that I’d notice showing up in my timeline. That said, there are some notable omissions..

Imgur.com

Anyone who has spent any time on reddit will be familiar with the image hosting service imgur.com. Run by redditor MrGrim, a quick browse through any of the more popular sub-reddits show how ubiquituous it has become for media sharing on reddit. It would be very handy if tweets mentioning imgur had the same preview functionality as those mentioning twitpic, yfrog, etc. I’ve recently been digging through the new Twitter javascript whilst working on a Declutter followup, so decided to take a break from that and see how hard it would be to bolt on imgur previewing to the web interface.

Luckily, it turned out to be very straight-forward indeed, and can be done with one simple bookmarklet!

If you’re not interested in the technical nuts and bolts behind it, you can skip ahead to get the bookmarklet now. Otherwise, read on for a bit more technical explanation on the ins and outs of adding a custom media type to Twitter.

Ur Img, My Img, Everybody’s Img..

The recent rewrite of Twitter.com pushed a huge additional amount of their logic in to javascript on the client side. My thinking was that the imgur preview functionality should work the same as the twitpic previewing. Taking a look through the main application logic for twitpic, we can see the declaration of

1	twttr.media.types

Below is how we clone the twitpic media type, then tweak for imgur:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

twttr.mediaType("twttr.media.types.Imgur"   , {     icon:"photo"     , domain:"http://imgur.com"     , matchers:{media:/imgur.com\/([a-zA-Z0-9\.]+)/g}     , process:function(A)     {       // If link is http://imgur.com, ext usually missing       if(this.slug.indexOf('.') &lt; 0)       {         this.slug = this.slug + '.jpg';       }       this.data.src=this.slug;       this.data.name=this.constructor._name;       A()     }     , render:function(B)     {       var A='<div class="twitpic"><a class="inline-media-image" href="http://i.imgur.com/{src}" target="_blank" data-inline-type="{name}"><img alt="" src="http://i.imgur.com/{src}" /></a>';       $(B).append(twttr.supplant(A,this.data))     }   } ); void(0);

The two key bits of code above are “matchers” and “render”. Matchers specifies a regex which Twitter uses to detect whether there are any imgur links within a given tweet. The pattern of imgur urls are generally http://[OPTIONAL_DOMAIN].imgur.com/abcDEF819.jpg, although they’re also accessible via http://imgur.com/abcDEF819 (note lack of extension!). The regex we use is:

Whatever is matched by the ([a-zA-Z0-9\.]+) part of the regex above gets saved in this.slug. We don’t care what the optional domain is or if it even exists – we’ll ultimately be using i.imgur.com as the host, as it gives direct access to an image. If no file extension is found, we’ll stick on a “.jpg”. Not ideal, but works in the vast majority of cases. In the process function, this slug is assigned to data.src for convenience during rendering.

Next up is the rendering of the matched data. We’re piggy-backing on the twitpic version of this function here as we’re essentially trying to achieve the same end goal. The basic html structure of the media preview is div -> href -> img. The twitpic structure is replicated in a var here, which then gets injected in to the expanded tweet pane to give the media preview.

Get the bookmarklet!

All of the above gives us a Twitter bookmarklet for Imgur previews.

Preview added successfully

Simply drag the above link to your browser’s bookmark bar, click it when next on Twitter.com and any future tweets with imgur.com should now have a media preview enabled!

The quickest way to check that it’s working right is to do a twitter search for “imgur.com”, and the media icons should then be shown against the resulting tweets.

FAQ

- I’ve applied the bookmarklet, but the imgur links in my timeline still aren’t showing a preview
This bookmarklet works for any new imgur links which show up after you apply it. Not ideal, but it’s a start. The next version should apply itself retrospectively to any previously-loaded tweets.

- Wait, a bookmarklet? What is that?
A bookmarklet is a small chunk of javascript that allows us to extend the functionality of a given page. See this explanation for a bit more detail.

- Bookmarklets are a pain to use, having to re-apply them is annoying
True and true. This was more an exercise in seeing how readily extensible the twitter javascript was. Ultimately the plan is to roll this bookmarklet and the various Declutter ones up in to a chrome/firefox extension that is automatically applied on page load.
Update 08/12/2010 – basic Firefox extension to enable this media preview is now available in the Add-Ons sandbox. This extension also previews Daft.ie and Adverts.ie content.