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

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

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.

Most of my twitter usage comes via applications that makes use of the API, such as Tweetie on the iPhone or the Echofon plugin for Firefox. However, I still spend a considerable amount of my time a-tweetin' via the web interface.

For the most part, twitter's web interface is reasonably clean, but there are still a few niggly bits that I'd rather do without. Luckily, one of the beauties of the web interface is that it allows the usage of bookmarklets, so if there's something you don't like, a quick line of javascript in the browser's address bar will sort it out!

I've written previously about using bookmarklets to hide tweets from your timeline that contain blacklisted words (sport-related, xbox achievements, etc). The next step is now to use bookmarklets to tweak the web interface itself. A nice side-effect of Twitter's use of jQuery for the web interface is that all of the jQuery selectors and functions are available to us, should we need them.

We'll start by hiding the Hovercard!

Hiding the Hovercard

Twitter recently launched "Hovercards" on the web interface. According to the blog announcement, hovercards are:

cards which appear when you hover over a username or avatar. The cards display additional information about the person and allow you to interact with them while staying within the context of your page.

Hovercards (via Twitter blog)

All good and well, and potentially useful. However, whenever I move my mouse up, down or across my timeline, these hovercards are springing up and obscuring other tweets in the timeline. Personally, I've been finding this feature far more annoying than useful, so would like to turn it off.

Fortunately, twitter have a very handy javascript function call available to do just that:

So, sticking

in to the browser's address bar will stop these hovercards from appearing again on the main timeline. So far, so good.

However, once any of the links on the right side of the interface are clicked ("@ replies", "Retweets", etc), then suddenly the hovercards are back in force. Now we need to ensure that the hovercards are disabled whenever these links are clicked. We can do this by attaching the disable() call to the click event for any of these links on the sidebar.

One unfortunate limitation of bookmarklets is that their effect only lasts while you stay on the same page - if you hit F5 or reload the page in any way, they need to be re-applied. For most of the links on the twitter web interface, this isn't an issue as they reload dynamically without refreshing the whole page (@ Replies, Direct Messages, etc).

However, somewhat erratically, the "Home" link and twitter logo at the top of the page both link to twitter.com in the traditional fashion. Clicking either of these out of habit to reload the page will mean that the effect of the bookmarklet is lost, and it must be re-applied.

This is a bit of a pain, so instead we will use the bookmarklet to make both of these links behave the same way as the "Home" link on the right hand sidebar.

Looking at the source of the twitter homepage, there are two things on each of the sidebar links which cause them to load content in situ, rather than requiring the browser to load a whole new page:

• A dispatch_action attached to a data attribute
• The class in-page-link

So we adjust our bookmarklet to add the same dispatch_action to the data attribute of the main logo link (id #logo) and the "Home" link at the top of the page (id #home_link). We want them to behave the same way as the "Home" link in the sidebar, so we assign the same data action.

Next we need to add the appropriate class, in-page-link. However, adding this class alone won't do anything. On initial page load, jQuery applies a handler to each link of this type which causes the opening of links without the need for a full page refresh. We need to re-call this function so that it is applied to our newly-classed links.

Finally, we want some visual confirmation that this has all worked as planned! We can re-use twitter's notification bar to display a success message.

Hovercards removed successfully!

Combining all of this in to a single bookmarklet gives us Hovercard removal. Drag this to your browser's toolbar then click it when logged in to twitter.com, and hovercards shall be no more.

Other quick-and-dirty bookmarklets:

Removing the "Trending Topics" list
The "Trending Topics" list is stored in a div named 'trends'. Removing this using jQuery is as simple as:

which gives a Remove Trending List bookmarklet.

Removing the Twitter ad
It's a small thing, but some people aren't too fond of the small twitter text ad in the top right of the web interface.
This ad has the associated class "promotion", so fortunately, removing it is as simple as

which gives the Remove Twitter Ad bookmarklet.

Quick-access Bookmarklets

Drag these bookmarklets to your browser's bookmarks bar for quick access when logged in to twitter's web interface.

• Hovercard Removal
• Remove Trending List
• Remove Twitter Ad
• Hovercard, Ad & Trends removal (all 3 of the above combined)

Unsure about how exactly to save a bookmarklet?
For those of you who may be a little unsure about how exactly you would save or run a bookmarklet, I've put together a quick introduction to bookmarklets, which will hopefully make things a little clearer!

Twitter can be a very useful tool, particularly once you've built up a decent-sized network of people with interests common to your own. The twitter timeline is often compared to being in a pub filled exclusively with your friends, and being able to hear all of the conversations going on at once.

However, just as you have that friend who occasionally likes to go in to excrutiating detail about his collection of porcelain squirrels, there are times when your interests diverge and you'd rather not hear the full details of next weekend's Porcelainathon. And so it is with Twitter.

Once you've started following more than a handful of people, you'll occasionally find your timeline filling up with tweets about things that you're really not that interested in. You'd rather not take the nuclear option and unfollow those involved, as they generally have interesting/useful tweets. But equally you'd rather not have to scroll through 3 pages of automated tweets about foursquare checkins, app downloads and the like.

Enter DeClutter

DeClutter is a javascript bookmarklet which will remove from your timeline any tweets which match a "blacklist" of keywords you've defined.

Below you can enter a series of terms which you want to banish from your timeline (one term per line). After entering them, you can either copy and paste the resulting javascript in to a bookmarklet in your browser, or drag the DeClutter link at the bottom of the page to your browser's bookmarks bar.

Once it has been saved, log on to twitter.com and click your new bookmarklet. Straight away you should see tweets disappearing from the timeline. This filter will re-apply itself automatically in the background every time you click "more", "@ replies", etc, so you don't need to re-click the bookmarklet whenever your timeline is refreshed.
This can lead to some odd behaviour, such as only 3-4 tweets appearing instead of 20 when you click "more", or not additional tweets appearing when you click the blue "new tweets" bar. This means that tweets which have been loaded matched your filters, and have been removed without ever being displayed to you.

Customise DeClutter

Enter words or phrases you wish to banish from your timeline below. Alternatively, you can try one of the below general category links to get you started!
Sport | Irish Politics | Computer games | Auto-tweets

Enter keywords below:
Election

Your bookmarklet

The text below will automatically update as you enter keywords above. When you're done adding, copy the below text in to a new bookmarklet.

Alternatively, drag this DeClutter bookmarklet to your browser's bookmark bar.

What now?

After dragging the bookmarklet to your browser's bookmark bar, log in to twitter.com, click it and that's all there is to it!

If you've got any suggestions for refinements to this bookmarklet, let me know in the comments below. Equally, feel free to share your own list of keyword filters for inclusion on the category list above!

The Tech Bit

The twitter web interface presents the timeline as a styled list. Each list element has a number of classes, chief amongst them "hentry".
The declutter function inside the bookmarklet loops through all elements with the class "hentry" on the currently-visible page, then checks whether any of the blacklisted keywords are present in the html of that element.

Updated 28/03/2010 - we're now using the ajaxSuccess event, rather than the crude, browser-crashery and slightly hacky setTimeout call!

Of course, this bookmarklet wouldn't be all that useufl if you had to re-apply it every time you click "@ replies", "more", "new tweets", etc. In order to have the filters be re-applied automatically, we can bind it to the ajaxSuccess event. This event is conveniently fired by jQuery

whenever an Ajax request completes successfully... Any and all handlers that have been registered with the .ajaxSuccess() method are executed at this time.

As all of the various twitter timelines are loaded via ajax requests, binding the declutter function to this event ensures that it will be re-run after each successful loading of the timeline, meaning that we don't have to worry about manually re-applying the bookmarklet.

We then wrap the call to declutter() up in a void() call to prevent the browser from opening a new page, and that's all there is to it!

FAQ

- Will I still see the hidden tweets if I use Tweetie/Echofon/Twitter API?
Yes, this bookmarklet only affects the web interface to twitter.

- Will this bookmarklet automatically run every time I visit twitter.com?
If you have closed your browser or the tab in which you first ran the bookmarklet, then you will need to start it again.

- On which browsers have you tested this?
It's been tested in the latest versions of Firefox, IE & Chrome. If you're using an earlier version of any of these, it *should* work, but YMMV. If it fails horribly in earlier browsers, let me know via the comments below and I'll see about updating it.

- You say 'bookmarklet' a lot. What is that?
A bookmarklet is a small application, stored as the URL of a bookmark in a web browser or as a hyperlink on a web page, or so sayeth the wiki.

- I'm not particularly technical - can you explain how exactly I 'save' a bookmarklet?
I've put together a quick introduction to bookmarklets which will hopefully make things a bit clearer!

- Hmm. I think there's a better way of doing this
This has been hacked together very quickly using a few basic jQuery functions, I'm sure there's plenty of room for improvement! If you've got suggestions for improvement, let me know via the comments below.

- How very Web2.0 - why didn't you call it DeCluttr?
I did originally, then discovered that the name had already been taken. After that I tried to come up with a catchy new name, but naming things is hard.

- You should have some pictures on this post. I like pictures.
That's not really a question. Still, if you must, have an image.