How to add a bookmarklet in Mobile Safari

By

bookmarklet code
In 2017, you still have to copy-and-paste Javascript to save a bookmarklet on iOS.
Photo: Cult of Mac

Bookmarklets are those little bookmarks you click to run mini “apps” in your web browser. You might have one that saves the current page to your Instapaper account, or one that launches a Google search focused only on the current site. Bookmarklets can translate highlighted text on a page, send something to your to-do list, or pretty much anything. On the Mac, installing a bookmarklet is easy. You just drag it to the bookmarks bar in Safari and you’re done. On iOS, though, it’s still a real pain.

So, bookmark this how-to (in the usual way), and have it handy for those times you need to install a bookmarklet on an iPhone or iPad.

Use a Mac

The easiest way to install a bookmarklet on your iOS device is to use a Mac. If you use iCloud to sync bookmarks between your devices, then you just drag the bookmarklet (or regular bookmark) to Safari’s bookmark bar on the Mac, and wait a few moments for it to appear on your iPad or iPhone. If you don’t have a Mac handy, things are a little more involved.

Install a bookmarklet on iOS Mobile Safari

A bookmarklet contains Javascript. It is, in effect, a tiny computer program that is run whenever you click it. The Javascript itself is written out in regular text, and stored in in the URL field of a normal bookmark. When you click that bookmark, instead of just launching the URL of a webpage, it launches the Javascript. That’s the only difference. So, to save a bookmarklet, you have to somehow copy-and-paste the Javascript into the bookmark’s URL field. Thankfully, it’s easier than it sounds. For this example, we’ll add a bookmarklet that saves to your Instapaper account.

Step 1. Create a bookmark

create a bookmark
Create a regular bookmark, just like any other.
Photo: Cult of Mac

This part is easy. You just tap the Share Arrow on any web page, and give it a good name. “Save to Instapaper” is a good choice, or just “Instapaper” if you’re running out of space up there. Make sure to save it in your Favorites folder so it appears in the bookmarks bar on the iPad.

Step 2. Copy the Javascript to your clipboard

Instapaper makes it easy to copy the Javascript you need.
Instapaper makes it easy to copy the Javascript you need.
Photo: Cult of Mac

This should be provided on the web page. You have to tap the text box, then tap Select All, then tap Copy. It will look something like the screenshot above. Get the current code from the Instapaper page.

Step 3. Edit the bookmark you just created

edit bookmarklet
Open your bookmarks to edit the one you just created.
Photo: Cult of Mac

This is the fiddly part. Tap the little Bookmarks icon in Safari, then tap Edit. Then find the bookmark you just saved in step 1, the one you named “Save to Instapaper,” or similar. Tap that bookmark, and you’ll see the screen in the image below.

bookmarklet paste
This is where you paste in the Javascript you copied earlier.
Photo: Cult of Mac

The bit we’re interested is the second row, the one that begins with https://. Tap that, then tap the little x that appears to clear it. Then tap the now-empty field, and paste in the Javascript you copied in Step 2, then hit Done, and find your way back the browser.

Enjoy one-click action

That’s it. Anytime you want to save the current page to Instapaper, you just call up this bookmarklet and tap it. Some bookmarklets will require an extra step to get working — you need to be signed into your Instapaper account for this one to work, for example. Others, like the Google Translate bookmarklet, just work.

It’s still way easier to switch to a Mac to do this. Even iOS 11, with its system-wide drag-and-drop, doesn’t allow you to drag bookmarks to the bookmarks bar. Still, at least this method is fully-functional, despite being a bit of a pain.