Bookmarklets – a quick introduction!

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

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!

Bookmarklet saved

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

Internet Explorer
  • 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

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!

Related Articles


Attack of the clones - removing copied websites from the internet

It's an increasingly-common experience for online publishers to discover that their content has been stolen wholesale, and posted on a different domain without permission. What can you do if this happens to your site?

Font Subsetting - shrink down font files to speed up page loads

Fonts are one of the largest resources on any page after images, and can have a big impact on CLS when they vary in size from the underlying system font. Font subsetting allows us to radically shrink font file sizes, speed up initial page loads, and improve our page speed scores.

Avoiding The Google Ads Two-Click Penalty

Google's Two-Click Penalty is intended to protect users and advertisers from accidental clicks on ads. When does Google apply the penalty, and how can we avoid it impacting our sites?

Minimising Cumulative Layout Shift (CLS) When Loading Responsive Ads

Responsive ads are a great way to maximise publisher revenue from display ads. Not knowing the size of the ad to be served in advance can have a big impact on Cumulative Layout Shift (CLS), and, ultimately, Google rankings. How do we maximise revenue while minimising CLS impact?

More