DeCluttering Twitter, Part Deux

If you’re just here to learn how to kill the Twitter Hovercards, then drag the Hovercard Removal bookmarklet to your browser’s bookmarks bar, go twitter.com, click it and you’re done! Read on if you’re in any way curious about the technical errata behind this..

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.

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:

twttr.HOVERCARD.disable();

So, sticking

javascript:twttr.HOVERCARD.disable();void(0);

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.

$('ul.sidebar-menu a').bind('click',
    function(e) {
        twttr.HOVERCARD.disable();
    }
);

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.

$('#home_link, #logo').attr('data', '{\'dispatch_action\':\'home\'}');

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.

$('#home_link, #logo').addClass('in-page-link');
$(".in-page-link").isInPageLink();

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.

$('#results_update').text('Hovercards removed succesfully').show();

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:

javascript:$('#trends').remove();void(0);

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

javascript:$('.promotion').remove();void(0);

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!