Google recently published a list of 30 updates made to search over the tail end of 2011. Tucked away in the middle of the list is mention of improved support for rich snippets. The snippet types listed are shopping, recipes and reviews. Amongst the other information on rich snippets is listed a point that a snippet can only be given for a page with a single item upon it, ruling out snippets for things like searches for ipods on amazon.

However it looks like google has also been testing out ways of extracting structured data from pages which have no defined snippet and contain multiple items - starting with real estate classifieds. What's equally interesting here is that it seems having clear and valid markup may have an extra impact on your site's appearance in the Google results and number of visitors clicking through!

What's a rich snippet?

Traditionally "snippets" were the information Google would display about a page when it showed up for a given search term. This would include the page title, a link and some short text from the page.
"Rich Snippets" were introduced first by Google in 2009. These were small bits of additional markup which a webmaster can place on their site in order to give search engines a more structured view of what information is on the page. This in turn allows the search engine to show more relevant information in the "snippets" a user sees when searching.
Google regularly uses recipes as an example of how best rich snippets can be used.

There is along and detailed list of item types which have rich snippet support at schema.org.

What about sites which don't have a relevant rich snippet?

The vast majority of sites on the net either don't have content which fits in to the supported rich snippet categories, or haven't implemented support for them. So, whilst data defined using rich snippets is helpful to Google, they need a way to get similarly structured data from sites without rich snippets defined.

In my day job, I noticed that searches on which our classified sites daft.ie, rent.ie and let.ie typically perform well were starting to show the snippets formatted in a slightly-changed format, despite no changes being made to the markup on site. Trying a handful of slightly different searches also showed significant changes in the snippet being shown - again, with no markup change - which seems to suggest that Google are actively working on their algorithms in this area.

Compare and contrast

Rental Property search for Mallow, Co. Cork

Starting with a search for Mallow rental, the result from daft.ie shows the search result page for rental properties in Mallow, Co. Cork. So far, so what?

What's interesting here is that Google has broken the markup out in to the address/type and price sections, making it very clear how much the top properties are for any user performing the same search. This is without any changes being made to the markup on the daft site.

On the same set of search results, the results from let.ie are similarly displayed. Yet property.ie, which has very similar markup, is not broken out. So it looks like the googlebot is slowly working it's way through various sites. However, further queries on daft reveal that the algorithm has been tweaked since the Mallow results above.

Cobh, Co. Cork rental search

In the daft.ie result above, the property type now appears to have been broken out in to a separate section on each line (red lines added are mine). Again, no changes to markup have been made, but the googlebot appears to realise that the "-" between the address and "House to let" is a logical break between two important, connected data points which refer to separate elements of the same property.

So what exactly is happening here?

In summary, it looks like google has been aggressively testing ways to derive structured data from nominally free-form webpages. This type of behaviour has been spotted in the past, when Google snippets showed a list of results from a page which itself was a formatted list. However, to the best of my knowledge this automated breaking out of key data is a new tweak.

It would also seem to suggest that having well-structured, clear markup is going to be increasingly-important in future. Google has historically downplayed the importance of having markup which validates, saying that it has no significant impact in a site's ranking. However, the sites listed above which have seen these new type of results are ones which are XHTML1 strict compatible. There's no way of knowing exactly what's going on inside the googlebot, but it stands to reason that having clear markup which is simple to parse consistently makes life easier for this sort of information (relative importance of data) to be extracted.

Google has regularly espoused the benefit on click-through rates of having rich snippets enabled, so if this sort of pseudo-rich snippet has a similar effect, having clear and consistent markup on your site may have a direct impact on visitor numbers.

If you've any other examples of this type of intelligent formatting or theories on what's goign on above, please share them in the comments below!

In the film Being John Malkovich, John Cusack plays a puppeteer who finds a portal to inside John Malkovich's head. Eventually John Malkovich himself goes through this portal, and the ensuing paradox means that every word he hears is "Malkovich", and every face he sees is his own.

Re-watching this film lately gave me an idea for the latest trivial entry in my ongoing bookmarklets collection, where every image on a website is changed to show the same one. So read below the jump to find out how to Malkovich a website - or customise the effect to use an image of your choosing!

How it works

Being a very simple and silly bookmarklet, the idea behind it is pretty simple:
- loop through each image on a website
- change the image on the site to a new image (John Malkovich, in this case)
- ensure the new image has the same height and width of the previous image, to keep the page layout the same

Step 1: Pick an image

Step 2: Loop through each image on the page

Step 3: Get the height and width of the existing image
We need to get the current height and width of the current image on the page. We do this as if the image dimensions haven't been explicitly specified in the target's site html and differ from our "Malkovich" image, the target site's layout can get quite borked.

Step 4: Enter Malkovich

Step 5: Wrap it all up in a bookmarklet
A void(0) is required at the end of the bookmarklet to stop the browser from trying to open a new page.

You can also drag the Malkovich Malkovich Malkovich bookmarklet to your browser's bookmarks bar, click it on any website, and behold the Malkovication of that site.

Make your own

The novelty of seeing John Malkovich all over the place is nice, but it would be better if you could customise the effect a little more.

Enter the address of any image you wish in the box above. Then drag your very own custom Malkovich bookmarklet to your bookmarks bar, and you're done! The bookmarklet updates in real time as you type in the box above.

A Daft idea

But why...

- Why not just use jQuery?
JQuery isn't loaded on all websites by default. Loading jQuery is possible in a bookmarklet, but adds far more overhead than using the more-verbose JS above.

- Why didn't all images on the site I tried change?
This bookmarklet works only on images loaded in an img tag. If an image is a background image on a div, then the bookmarklet won't catch it.

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

- This is ridiculous. What's the point?
There is absolutely no point or useful function to this whatsoever. Any potential amusement you may derive from using it is linked directly to your imagination when selecting an image and website.

And that's it. If you've any thoughts on improving the implementation above, or have an hilarious screenshot resulting from use of the bookmarklet, let me know in the comments below!

One issue that comes up time and again when working on classified sites such as Daft.ie and Adverts.ie is the inadvertent blocking of site functionality by the AdBlock Plus extension. As so many parts of classified sites will logically have phrases like "ad" in the url, legitimate site content and features can be blocked inadvertently under the mistaken assumption that they're banner ads or the like.

So is there a way to detect whether a user has AdBlock Plus installed and change the output accordingly?

The answer is "Yes. Well, sort of".

Wait, what's an ad block?

For those of you unfamiliar with what AdBlock Plus (ABP) does, it is a Firefox or Chrome extension which has:

the primary goal of removing advertisements. For that, it will look at all requests made by web pages and block the request if the address the request should go to matches a filter in Adblock Plus.

In plain English, this should mean that flashing banner and pop-up ads should be removed from the internet for any users with this plugin installed. So far, so good.

So what's the problem?

ABP works by blocking content loaded from urls which match some predefined filters. For example, urls like http://www.example.com/ads/serveAds.php?adType=annoying+flashing+ad ABP is likely to load an ad which a user may not wish to see. ABP blocks this content from ever reaching the user.

However, on classified sites legitimate site content may be loaded from similar urls. On Adverts.ie for example, the url http://www.adverts.ie/ajax/getCategories.php?adType=1 loads up a list of categories used in one of the site's menus. When ABP sees this url, it matches a filter for the term "adType" and blocks the script from loading. This results in one of the site menus not loading, despite it being a primary part of the site, and not another banner ad.

Uh oh. So what now?

There are two options realistically open:

1. Rename all site urls and parameters to avoid mentioning "ad" or similar keywords
2. Get users to add the classifieds site to their ABP whitelist

The first option above has the benefit of not requiring any user action. However the downside is that the code behind the site becomes gradually trickier to follow, as words like "adType" are appropriate variable names, likely to be re-used by developers at some point.

The attraction of the second option is that it only requires action by the minority of site users with ABP enabled. The downside is pretty significant though. As ABP becomes increasingly mainstream, its' users are becoming less and less technical. Having to wait for users to contact the site owner with a complaint, then be instructed on using the ABP whitelist, can be a time-consuming process.

A compromise would be attempting to detect whether ABP is installed, and if so display a warning with instructions on how to use the whitelist to allow the site to function correctly.

Technical nuts and bolts

One way to approach this is to use javascript to set a basic flag which assumes that ABP is enabled.

After that, attempt to load a javascript file from a url which ABP will find objectionable:

This file should do nothing other than reset the flag, which shows that ABP is non-functional.

This load is followed by another script block, which will print a message to the user if the ABP flag is still set.

If all has gone to plan, then any users with ABP enabled should see a warning like that shown in the image below.

If you have ABP enabled, you should already have seen something very similar towards the top of the page!

Is this guaranteed to work?

This method does work, but it depends heavily on the keywords being used. Obviously ABP don't want sites to detect whether their plugin is active and work around it, rendering the extension useless. There have been similar tricks like this in the past which the extension developers have subsequently worked around.

The key is ensuring that the js file which will unset the ABP file matches as many ABP filters as possible. This should ensure that it gets treated like a regular ad url, so is a reliable indicator as to whether ABP is running or not.
Happily at this moment in time, the above method does the job just fine!

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.

Over the last few weeks, as Ireland has continued a head-long dive in to a financial abyss, it seems that every policy proposal, every political criticism and even every newspaper editorial has met the default response of "how will the markets react?"

The main problem experienced here in Ireland is that much of the reaction-provoking incidents tend to happen in the evening, after the traders have gone home for the evening. This means an anxious wait of several hours before the markets open again, whilst we wait on tenter-hooks trying to anticipate their collective reaction to the latest scandal/discovery of government "mistruths".

The "international markets" can seem to the casual observer to behave with all the consistency and logic of a stroppy teenager in the middle of a mood swing. Predicting their reaction to any kind of news is usually as much luck as anything else, like predicting the toss of a coin.

However, after many careful hours spent studying historical charts, graphs and market trends, a pattern has been found!

No longer shall governments spend sleepless nights tossing and turning about the anticipated market reaction to a government bailout.

Politicians on certain peripheral European islands don't need to constantly check their blackberry to see what the market would make of a - whisper it now - default.

With the release of HowWillTheMarketsReact.com, all of the guesswork and nervous waiting can be removed from economic decision making. Now the next problem will be filling those hours of tv & radio airtime currently spent speculating on market reactions..

HowWillTheMarketsReact.com - tomorrow's markets, today!

Back around the start of March, I noticed that pretty much every time I logged in to Google Analytics I was running in to problems with the summary views.

The dashboard would typically load up my list of sites, then freeze without actually fetching any data. Refreshing the page would usually sort this out, before the same thing happened again when I click in to a site's individual profile.

Still loading..

Occasionally, rather than the page just hanging, there would also be an error message to the effect of "This page has encountered an error which may prevent it from working correctly" which would appear in red at the top of the page. Again, refreshing the page would cause both of these to go away and normal service to resume.

We have a(n intermittent) problem

As a refresh would sort these issues out after a brief wait, they were minor annoyances, but never annoying enough to justify time and energy spent hunting the web for a cure - more an itchy finger than a bad foot cramp.

But eventually, that itch has to be scratched, so I looked in to it a little bit more. I eventually came across the following tid-bit on the analytics support forum:

mobpage: try to set your date an time of computer ..it will work after that

My local clock was running a bit fast, so I set it back by 10 minutes or so, and the errors magically disappeared!

So what's happening here?

Good question. As with all issues relating to google javascript, it's quite difficult to find out exactly what's at the root of this. The javascript is compressed and minified, so reverse-engineering it would require substantially more time than would be worth it!
My suspicion is that at some point in the javascript analytics attempts to evaluate the difference between the local clock and the remote server one. This difference can be handy to have when working with date-sensitive info stored remotely, such as the raw analytics data.

My suspicion is that somewhere along the line a bug snuck in, whereby this code allows for there to be 0 difference, or for the server to be ahead of the local machine, but forget the check for the local machine to be ahead of the server.
As such, when the local time is too far ahead, the code gets confused by the difference, hangs, and blocks the subsequent code from loading.

Why does it work fine when you refresh the page?

I'm guessing that this issue doesn't affect a page reload due to the combination of browser caching and black magic that appears when a js-heavy page is refreshed, namely that the initial checks are mostly cached and thus not capable of blocking the subsequent page load code which was previously prevented from running. As such, the rest of the page can be rendered without issue.

Again, most of the above is pure speculation on my part without any real assessment of the underlying code. However, the important point here is that I no longer get page freezes/red error bars in analytics, and the response time is noticeably faster, all from one clock change!

A (semi-) frequently updated list of simple bookmarklets I've found somewhat useful. Some of the more complex ones for use on twitter.com (Custom filtering of the timeline and Hovercard removal) are discussed in more detail elsewhere on the site. The below are a collection of short and sweet bookmarklets that do a simple but effective job.

Quick Links

• WHOIS Lookup
• Dual Site Toggle
• Down for everyone, or just me?

WHOIS Lookup

WHOIS is a protocol for finding out the contact details of the owner of a domain. Traditionally this information is accessed via the command line, however a number of websites now exist as wrappers for this information.

Sites such as Who.is allow accessing of domain ownership and contact info via a web browser. What's particularly nice about the who.is site is that you can query any site by placing the domain name you wish to query at the end of the who.is url, i.e. http://who.is/daft.ie will give WHOIS info for Daft.ie.

This simple WHOIS bookmarklet automates this process. Clicking this bookmarklet will query the WHOIS info for the site you're currently on, via the who.is site. Copy the code below in to a new bookmarklet, or drag the WHOIS bookmarklet link above to your browser's bookmarks bar.

Dual Site Toggle

This bookmarklet when you want compare the same page on two different sites which both use the same url structure, e.g. a local development environment (localhost) and the same page on the live server (example.com).
For this example, we'll compare property result pages on Daft.ie with the same ones on the mobile version of the site, m.daft.ie.

First, we decide on the two sites between which we want to toggle.

Next we need to grab the filename of the current page, as well as any query string arguments. This value will stay the same between both sites.

Finally, we need to figure out which host we're on, and then switch to the other one!

As it's a bookmarklet, we need to compress it all down to one line.

To use this toggle, you can either copy the above code to a new bookmarklet, or drag this Site toggle link to your bookmarks bar.

To see it in action, we can pick a random house on Daft.ie (in this case, the house used by TV3's The Apprentice), then click the bookmarklet to toggle between the mobile and web versions of the same page.

Updating this for any other pair of sites is as simple as editing the siteA and siteB variables in the bookmarklet.

Down for everyone, or just me?

Downforeveryoneorjustme.com is a site that comes in handy when trying to check whether a site being inaccessible is a problem with the site itself, or your local network. It will basically ping the server from a location different to your own, and see if it's still available from there.

We're basically doing the same thing here as we did for the WHOIS bookmarklet above, so:

Dragging this DFEOJM bookmarklet to your browser's bookmarks bar will let you check the next time you get a "server inaccessible" error message whether the problem is on your network or with the site itself.

I've been tinkering quite a bit lately with improving the twitter web interface with the use of bookmarklets. I've put together a series of bookmarklets which allow you to do everything from apply custom filters to your twitter timeline, to removing the "Hovercards" which Twitter have recently added.

Most of the feedback I've received both in the comments here and on twitter has been very positive, but I've also heard from a few folk who have had difficulty actually saving the bookmarklets and getting them to work.

Admittedly, the posts on the bookmarklets did assume a certain level of technical know-how, so this post is intended as a quick intro for those who want to use the bookmarklets, but aren't quite sure where to start.

So what is a bookmarklet?

A bookmarklet is:

a small computer application, stored as the URL of a bookmark in a web browser or as a hyperlink on a web page. [...] They are designed to add one-click functionality to a browser or web page. When clicked, a bookmarklet performs some function, one of a wide variety such as a search query or data extraction.

So bookmarklets basically allow us as a user to add some basic functionality to a web site from our browser, without needing to have access to that site's server. Once the bookmarklet is clicked, whatever javascript it contains will execute on the current page.

In this case, we have bookmarklets specifically crafted for twitter's web site (filtering our timeline, removing hovercards, etc) so when we go to twitter.com and click the bookmarklet, our custom code shall be run by our browser as if it were part of twitter's own code.

So, how do we save and then run these bookmarklets? Well, there are several different options..

Option 1 - Drag and drop!

Probably the quickest way of saving a bookmarklet is to drag it from it's location on the page and drop it on your bookmark bar.
First, we need to make sure the bookmarks bar is accessible. The bookmark bar is typically found immediately under the address bar in your browser (highlighted in red on the image below).

If you're running Firefox or Internet Explorer, then it should be showing by default. On Chrome, you may have to press "Ctrl+B", or go to "Settings" (spanner icon) then click "Always show bookmark bar".

Bookmark Bar (Firefox)

Once your bookmark bar is visible, you can click on a bookmarklet link, drag it to this bar, then have it ready to run!

So, given this Disable Hovercard link, all you need to do is:

• press your mouse down on the link above (do not let go of the mouse button!)
• drag your mouse to an empty spot on your bookmark bar
• let go of the mouse button

You should know see a "Disable Hovercard" bookmarklet on your bookmark bar. Go to twitter.com, click this bookmarklet and you should not see any more hovercards!

Success!

Option 2 - Let the browser do it

Most browsers have menu options which will do the same thing as the dragging-and-dropping above.

Internet Explorer

Adding a Bookmarklet - IE

• Right-click on the "Disable Hovercard" bookmarklet link
• Select "Add a Favourite.."
• You can re-title the bookmarklet using the "Name" field, if you want
• Select "Favourites Bar" from the "Create in" menu
• Press "Add"

Firefox

Adding a Bookmarklet - Firefox

• Right-click on the "Disable Hovercard" bookmarklet link
• Select "Bookmark This Link"
• If you want, you can rename the bookmarklet using the "Name" field
• Select "Bookmarks Toolbar" from the "Folder" drop-down
• Click "Save"

Chrome
Currently, Chrome doesn't have an easy right-click option for saving bookmarklets, so if you're on Chrome, you'll have to follow Option 1 above!

That's all folks!

And that's all there is to it! You should now have a "Disable Hovercard" bookmarklet on your bookmark bar. To see it in action:

• go to twitter.com and log in
• mouse over a username in a tweet to see the hovercard appear
• click the bookmarklet
• mouse over the same username, and - hey presto - the hovercard should now be gone

And that's all there is to it! The same process can be applied for any other bookmarklet, including the timeline filtering bookmarklet (remove those foursquare check-ins, xbox achievements and other such auto-tweets!)

So hopefully this post should help make things a little clearer for those who were having trouble with the bookmarklets previously - if not, let me know in the comments below!

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:

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!

Updated 28/03/2010 - changed how the bookmarklet re-applies itself to now work in realtime, rather than at clumsy, staggered intervals.

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.