Combine Readability and Evernote Clipping With One Bookmarklet

I’ve talked about Evernote a few times here already. readabilitylogo At the risk of suffocating you with another post about it, I want to call some attention to a time-saving tip from Elldove over in the Evernote official forums.  Elldove posted some javascript for a bookmarklet that combines the Readability bookmarklet and the Evernote web clipper bookmarklet into one bookmarklet.

Readability is a tool, in the form of a bookmarklet, that removes the clutter around what you’re reading and presents a page in a format that is easy to read.  Here is a before and after look at a page formatted with the Readability bookmarklet (images have been resized to fit the page):

readabilitybefore2 readabilityafter2

As discussed here previously, Evernote has a web clipping feature that allows you to clip the content of web pages, and store it in Evernote.  Elldove’s code combines both of these into a single bookmarklet, so that a page is formatted by Readability before being sent into Evernote.

To set up the bookmarklet, copy Elldove’s code and paste it into a bookmarklet.  I find it easiest to keep the bookmarklet on my toolbar.  If you’re not sure how to set up a bookmarklet from scratch, you can create a bookmarklet on the Readability site, drag it to your toolbar, and then replace the code with Elldove’s code (right-click on the bookmarklet and then select “Properties” to access the code you want to replace). Once you have the bookmarklet setup, it is a simple matter of clicking on it when you want to send a page to Evernote in a preformatted state.  The page will format, and then the Evernote web clipper interface from your browser will appear.

UPDATE:  In the comments, reader Bobby Travis has made the helpful suggestion that I expand on the “how to” part a bit.  There are a few ways to create the bookmarklet.  Here’s one way in Firefox, and one way in Internet Explorer:

1.  In Firefox, right-click on your bookmark bar and select “New Bookmark,” and then put the above-mentioned code into the Location box.  You can name it whatever you like, and can leave the other boxes empty.  Click the “Add” button when finished.

2.  If there is an easy way to create  a Favorite from scratch in Internet Explorer, I’d love to hear it.  What I did in Internet Explorer 8 was go to the Readability page, right-click on the bookmarklet that is on that page (it is the white box in step 2), and select “Add to Favorites.”  Then I clicked “Yes” at the security warning to continue.  That created the standard Readability bookmarklet on my Favorites Bar in Internet Explorer.  To change it, I then right-clicked on that bookmarklet and selected “Properties.”  In the “URL” box in the “Web Document” tab, I replaced the code that was there with the above-mentioned code from the Evernote forums.  If you know an easier way to create a bookmarklet in Internet Explorer, please let me know in the comments.  I use Firefox, so I’m not as well-versed with Internet Explorer.

UPDATE #2: Elldove, the creator of this bookmarklet code, has just posted the the Applescript version over in the forum post.

Leave a Reply

  1. Nice tip, Evan!

    You may want to expound the howto part a bit for not-so-tech-forward-but-still-trying crowd, though. I am pretty good with the techy stuff, but never created a bookmarklet before and have barely used them, and it took me a sec to figure. Only a sec though… really! :P

  2. Thanks for the suggestion, Bobby. I went ahead and updated the post. I think sometimes I forget to look at something from a non-tech perspective. The titles of my posts are a classic example of this. If you compare my title with the one on Lifehacker (which cites back to here), you'll see that the author there does a nice job of explaining what the bookmarklet does in his title, even if you don't know what Readability is. A good thing for me to learn.
    Here's the Lifehacker post, by the way:
    http://lifehacker.com/5301077/convert-and-clip-

    Oh, and thanks for the retweet!

  3. Pingback: Finally, a Bookmarking System That Works | Digitizd

  4. Pingback: Quix: One Click Access to All of Your Bookmarklets — On Any Browser | 40Tech

  5. Pingback: iReader Extension for Chrome, Firefox, Makes Websites Readable | 40Tech

  6. Pingback: Preview of Evernote Windows 3.5 Alpha | 40Tech

  7. Pingback: 5 Methods (and 12 Tools) for Making Websites More Readable | 40Tech

  8. Pingback: Bye Bye Instapaper, iReader, Readability… Hello Clearly, From Evernote | Garret's Geeks