DeCluttering Twitter, Part Deux 14

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.

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:

1
twttr.HOVERCARD.disable();

So, sticking

1
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.

1
2
3
4
5
$('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.

1
$('#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.

1
2
$('#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.

Hovercards removed successfully!

Hovercards removed successfully!

1
$('#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:

1
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

1
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.

 

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!

14 thoughts on “DeCluttering Twitter, Part Deux

  1. Pingback: Download videos from YouTube in Ubuntu | AboutBrowsers.info

  2. Pingback: uberVU - social comments

  3. Pingback: Dear Twitter: Please let us opt out of hovercards. Love, everyone

  4. Reply TwitTwat Apr 2,2010 9:50 am

    okay, this is probably easy as pie for most people, but can u break it down even MORE for people like me that are totally internet UNsavvy?

  5. Reply Not Giving Out My Name. Apr 3,2010 2:10 am

    Agreed with TwitTwat. Some of us don’t even know where to access the so called javascript function. Where is that?

  6. Reply Anita Nelson Apr 3,2010 5:06 am

    Click and drag the link up to the top of your browser. There is probably a “Bookmarks Toolbar” or similar on your browser at top. If you cannot see it, right-click in an empty space at top to get the browser’s right click menu. If there is not a check mark next to that option, click it and that will add a check mark adding the feature to your browser.

    Great solution! Thanks for making it =)
    x0x
    Anita @ModelSupplies

  7. Reply Laura Apr 3,2010 7:38 am

    The Hovercard Removal bookmarklet it’s working! Thank you so much for creating it!

  8. Reply Paul Apr 4,2010 1:55 am

    @Anita, thanks for adding your explanation above!

    @TwitTwat and @Not Giving Out My Name – I’ve put up a new post giving an introduction to bookmarklets, which will hopefully make things a bit clearer. If you’re still not too sure about bookmarklets after reading it, please let me know via the comments on that post and I’ll try to go over it again.

    I’ve also updated the post above with this link to hopefully avoid this confusion in future!

    Thanks,
    Paul

  9. Pingback: A Grab Bag of Bookmarklets « Conroyp.com

  10. Reply danny6114 May 17,2010 3:29 pm

    Every time you refresh the page, the hovercards return. Is this supposed to happen, or did I do something wrong?

  11. Reply Paul May 17,2010 6:11 pm

    @danny6114 – bookmarklets only stay applied once you remain on the same page – once the url in your browser changes, then they need to be re-applied.

    The hovercards should stay gone for any of the links you click on the right sidebar, as these load tweets dynamically, without the need for a full browser refresh. I’ve noticed that the “Home” link at the top of the page and twitter logo both link you back to the twitter home page via a full browser reload, so have now updated the bookmarklet above so that the hovercard stays applied even after clicking these links.

  12. Reply danny6114 May 19,2010 3:43 pm

    Thanks for the info and update!

  13. Reply ptamaro Sep 29,2010 5:39 pm

    Great stuff, thank you for sharing it…

    When Twitter released it’s new interface recently, it looks like they’ve changed a lot of their CSS selectors. This broke my bookmarklet (http://twitter.com/peekr ~ http://peekr.net) which hides the stream so you can see a full background image on the old twitter web client — I’m trying to fix it so it works on the new twitter too.

    Figured I’d mention this here (but I’m sure you know this already) in case you may want to make an update to…

    javascript:$(‘.tweet-label,.promoted-label’).remove();void(0);

    …which seem to fix the “Remove Twitter Ad bookmarklet” for me.

  14. Reply MrIamo Dec 31,2010 12:48 am

    In Chrome the hovercards are not showing up anymore, even after refresh. On some other sites popups also disappeared. 😐 Is it so hard for developers to come up with OPTIONS instead of annoying people with stupid defaults and forcing them into hacks that may render browsers useless?

Leave a Reply