Follow Us


     Follow Us on Facebook  Follow Us on Twitter  Circle Us on Google+  Subscribe to RSS Feed  Get Updates Via Email

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.


Related Posts

Twitter Digg Delicious Stumbleupon Technorati Facebook Email Clip to Evernote

About Evan Kline

Evan started 40Tech to write about tech from his perspective – that of the average 40-something tech geek. When not writing about tech, you might find him with his beautiful wife and baby girl, out on the ski slopes, at his real-life job as a lawyer, over on Google+, or scrounging for followers on his personal Twitter account after years of focusing on the 40Tech account.

10 Responses to Combine Readability and Evernote Clipping With One Bookmarklet

  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:

    Oh, and thanks for the retweet!

  3. My pleasure, Evan! I look forward to more great posts. :D

    And yayy for connecting with Lifehacker, too. I love those guys!

  4. Any idea how to update this properly with newer scripts from Readability?


  1. Finally, a Bookmarking System That Works | Digitizd - March 9, 2010

    [...] tip: combine the Evernote clipper with the Readability bookmarklet, as described by 40Tech. It’ll only clip the relevant parts of the page to Evernote, so your search results don’t get [...]

  2. Quix: One Click Access to All of Your Bookmarklets — On Any Browser | 40Tech - May 10, 2010

    [...] bookmarklets has become a staple item for me in internet browsing — I use everything from Readability2Evernote, to a multitude of sharing and tracking tools, each with its own nifty difference from the other. [...]

  3. iReader Extension for Chrome, Firefox, Makes Websites Readable | 40Tech - August 14, 2010

    [...] functionality, or using an extension or bookmarklet like Readability (check out our post on the Readability+Evernote combo-bookmarklet). While Readability is great, Safari Reader is a step up — and the iReader extension for [...]

  4. Preview of Evernote Windows 3.5 Alpha | 40Tech - August 22, 2010

    [...] might want to subscribe to the RSS feed for updates on this topic. I’ve talked about Evernote quite a bit here.  Next to Firefox, it may be my most used application.  One of the strengths of Evernote is [...]

  5. 5 Methods (and 12 Tools) for Making Websites More Readable | 40Tech - October 26, 2010

    [...] text removed, margins altered, and fonts made more readable.  We love Readability, which we use to send formatted pages right into Evernote with one click, but there are a few other choices out [...]

  6. Bye Bye Instapaper, iReader, Readability… Hello Clearly, From Evernote | Garret's Geeks - March 24, 2012

    [...] — your life might change too. Clearly brings all of the minimalist beauty of iReader and Readability, does it better, and then sweetens the pot with the ability to send a nicely formatted copy of the [...]

Leave a Reply