How to create an Evernote webclipper bookmarklet for your iPhone or iPad

So you just got Evernote on your iDevice and you’re trying to figure out how to make a webclipping like you can do in Safari / Firefox / Chrome on your desktop computer…

Subject Matter
Apps

Author

Published
April 20, 2011

Share
Facebook Tweet

The short and unfortunate answer is there’s really no way for iOS developers to extend the functionality of the mobile Safari app to include an easy button for making a webclipping, but there are three easy-ish ways that you can get the page you’re viewing in mobile Safari into Evernote.

Technique #1 – email to Evernote

This method is actually pretty simple, although you have less control than using the second technique described below. Thanks to Tech Critiques for this tip. Here’s the setup:

  • Go to the Evernote app on your iPhone / iPad.
  • Click on the satellite-dish icon at the bottom right, and a little menu will pop-up.
  • Click on “Evernote email address”, and click “Add to Contacts”.
  • Tap outside the settings menu to close it, and close Evernote.

Now you’re set to easily email pages from mobile Safari to Evernote. When you’re in Safari, select some text/images on the page you’re viewing and copy them to the clipboard (optional). Then tap the icon next to the address bar to “Mail Link to this Page”. Start typing “Evernote” in the TO field, and it will auto-fill for you. The link to the page you were on is already there in the message body, and if you copied any text to the clipboard you can paste it in now.

This video demonstrates the process:

Technique #2 – the webclipper bookmarklet

This method is a little more difficult to set up, but I think it’s the best solution because it allows you to tag, file and annotate any page with the familiar webclipper interface:

  • From Safari on your iPhone / iPad copy the code block below starting with “javascript” and ending with “;”.
  • Create a bookmark for this (or any) page, and save it. You’ll overwrite this bookmark in a second with the bookmarklet code.
  • Now edit the bookmark you just created, rename it “Send to Evernote” or something descriptive that you’ll remember later. Delete the bookmark URL and in it’s place paste the code that you copied to the clipboard. Save the bookmark.

Here’s the code for the bookmarklet:

javascript:(function(){EN_CLIP_HOST='http://www.evernote.com';try{var%20x=document.createElement('SCRIPT');x.type='text/javascript';x.src='https://ancientwisdom.cc/evernote/evernote.js?'+(new%20Date().getTime()/100000);document.getElementsByTagName('head')[0].appendChild(x);}catch(e){location.href=EN_CLIP_HOST+'/clip.action?url='+encodeURIComponent(location.href)+'&title='+encodeURIComponent(document.title);}})();

Now you can use the new “Send to Evernote” bookmark any time you want to store a page in Evernote. When you click the bookmark it will open up the familiar webclipper box overlaid on top of the page you’re viewing.

You’ll notice the code contains a link to our server. That’s because there’s more javascript happening behind the scenes to make it all happen. Feel free to have a look through the code, and even copy it and put it on your own server if you like. Just make sure to keep the copyright headers intact, and update the bookmarklet to point to your copy of the script instead of ours. Thanks to Philip Constantinou from Evernote for the original JS code, and Pete248 for the mobile browser tweaks.

Technique #3 – save to PDF, then to Evernote

I can’t vouch for this technique used by cdbeckman because I haven’t tried it myself, but this also seems like a reasonable way to get pages from mobile Safari into Evernote, if you don’t mind the whole page being stored as a PDF file.

  • Sign up for Joliprint – http://joliprint.com/iPad/ and install their bookmarklet. This will allow you to make a PDF of the page you’re viewing in Safari.
  • Go to the page you want to store in Evernote and click the Joliprint bookmark that you installed.
  • When the PDF loads, just click “open in evernote”.

If you have any other techniques that work well for you, please leave a comment here and let us know!