iOS Tip: Adding Bookmarklets

If you're like me, you've built up a nice little collection of bookmarklets in your desktop web browser of choice (mine being Google Chrome). For those that don't already know, bookmarklets are essentially bookmarks made up of JavaScript that perform special actions when clicked, rather than taking you to a website.

Some examples of bookmarklets I use:

  • Several Instapaper bookmarklets, such as the one that reformats webpages in text-only form and even tries to compile all 'pages' of an article into a single readable page. I also have bookmarklets for each of the various Instapaper folders I've set up, allowing me to immediately save a webpage to its appropriate place and saving me the trouble of organzing my queue later.
  • The Amazon Affiliate Link bookmarklet created by Justin Blanton. If clicked on any Amazon item page, it converts the URL to an affiliate link right there in the address bar, making it easy to copy/paste elsewhere.
  • Paul Ford's fantastic new SavePublishing bookmarklet. Click this on any article and it will find the "tweetable" sentences, highlighting them in red and showing you a character-count on hover-over. Click the sentence of your choice and it will take you to a Compose Tweet screen with the quoted sentence followed by the article's URL. Very nifty for sharing articles easily.

While adding these bookmarklets to your desktop browser is a simple process—typically done by dragging a bookmarklet link from a webpage to the bookmarks bar—adding them to your iOS device is a bit more convoluted.

The easiest method is to simply sync bookmarks and bookmarklets via Safari and iCloud, but let's say you don't have that set up, or maybe you've come across a neat-sounding bookmarklet while on the go and you want to check it out without having to access your desktop/laptop first. These steps should help you out.

Note: The thing to keep in mind is that you need easy access to the JavaScript code for copying/pasting purposes. You can't simply tap-and-hold a bookmarklet link in Mobile Safari to access the code (the only option you get is 'Open' which doesn't help), so the bookmarklet creator needs to provide the code in plain text form so you can copy it. Some do, some don't.

To get started, open Mobile Safari to any webpage at all and tap the Share button on the bottom toolbar. Choose Bookmark from the list and then Save. There's no point trying to modify anything about this bookmark yet because it doesn't allow you to change the URL address until later.

Once you've got that dummy bookmark saved, go copy the code for the bookmarklet you're trying to create. As an example, here's the code for the Instapaper text formatter I mentioned above:

javascript:function iptxt(){var d=document;try{if(!d.body)throw(0);window.location='http://www.instapaper.com/text?u='+encodeURIComponent(d.location.href);}catch(e){alert('Please wait until the page has loaded.');}}iptxt();void(0)

Open your bookmarks list and tap the Edit button, then tap the dummy bookmark you created earlier. Remove the existing URL from the second line and paste the bookmarklet code there instead. It should look something like this:

bookmarklet.png

From here, you can feel free to rename the bookmarklet as desired or place it in a folder of your choosing. Whenever you're finished, tap Done on the keyboard first, then again on the bookmarks list when it takes you back there.

Now you've got a fully functional bookmarklet waiting to be used. If you want to try out the one I used in this example, go to any webpage (for best results, find a long article surrounded by clutter), then simply tap the bookmarklet from your bookmarks list and be amazed.

There are lots of great bookmarklets out there, now it's up to you to find them and put them to good use. Hopefully this little article helps you with that.