Add Title, URL, and Description to Pinbook with This iOS Bookmarklet

To piggyback on yesterday’s post about the incorporation of the iOS clipboard contents in Drafts 3.0, I’ve written another bookmarklet/URL Action combo. This one lets you add the title, URL and selected text from a web page to Pinboard via the Pinbook app. (I’ve written a previous post about URL Actions for three different Pinboard apps but I’ve stuck with Pinbook. You can adapt my workflow below for different apps if their URL schemes support the same parameters.)

I’ve adapted Federico Viticci‘s javascript bookmarklet to put the title on the first line in Drafts and the URL in the second line to create this workflow. First, while on your iPhone tap on this link to import the URL Action into your version of Drafts. (Make sure you’ve upgraded to the latest version.) Or you can create an URL Action, title it “pinbook-desc” and enter the following:

pinbook:///add?title=[[title]]&url=[[body]]&description=[[clipboard]]

 
This action takes the first line of the draft and makes it the title of your bookmark. The second line becomes the URL, and the contents of the clipboard becomes the description of your bookmark.

Next, you need to create a bookmarklet in your iOS browser. In Safari, bookmark any page and change the title to “Pinbook-Desc” (actually you can call it whatever you want). Then open bookmarks, tap on Edit, then open “Pinbook-Desc.” Tap on the URL, and then tap on the X to delete it. Then paste the following into that field and save the updated bookmark.

 
update bookmark

Now you’re all set. If you want to save some text in your Pinboard bookmark, select it and then tap on copy. Then open bookmarks, tap on “Pinbook-Desc” and the bookmark will be auto-filled with the page’s title, URL and your selected text.

select text

pinbook

Addendum (2013-04-26)

You don’t need Drafts to add a description if you’re on an iPad. The document.getSelection javacript will work on an iPad if the bookmarklet is in your Bookmarks Bar. You can grab that bookmarket here.

Add Clipboard Contents and URL to Quotebook with Drafts 3.0

Drafts 3.0 just came out. It has many new features, but one notable addition is that it now uses the clipboard contents. I was trying to think of a cool way to utilize this function, and came up with a bookmarklet that lets you add the clipboard contents of a page and its URL to Quotebook. Quotebook autodetects the clipboard contents, but if you want to remember where you found a quote, you still need to go back to the browser to grab the URL.

To make this work, you both have to add an URL Action to Drafts and install a javascript bookmarklet on your iPhone. If you’re on your iPhone when you read this, tap on this link to import the action into your version of Drafts. (Make sure you’ve upgraded your version so that it supports the clipboard function!) This action is called “quote” and the template is as follows:

quotebook://add?quote=[[clipboard]]&source=[[draft]]

 
Here’s the Quotebook URL scheme.

Next, create the bookmarklet. Bookmark any page and call it “Quote.” Then tap on the bookmarks icon, tap on Edit, and then tap on the URL. Tap on the X to delete it, and paste in the following:

javascript:window.location='drafts://x-callback-url/create?text='+encodeURIComponent(location.href)+'&action=quote'

 
Save the new link, and you’re all set. Now go to any page in your mobile browser. Select some text and tap on Copy. Then open your bookmarks and tap on Quote. After a short stop via Drafts, you’ll end up in Quotebook with both the quote and the URL already entered.

copy quote

quotebook

iOS Bookmarklet to Convert Link into OPML File for Fargo.io

I’ve been using Dave Winer’s new outliner Fargo obsessively since its launch. It has lots of useful keyboard shortcuts, and imports/exports all outlines in OPML format. You may be familiar with OPML as a way to store a list of RSS feeds, but it’s also used by mind-mapping applications like iThoughts and MindNode, as well as outliners like Carbonfin Outliner.

Unfortunately, this application is very much desktop-focused. It barely works on the iPad. Fortunately, Fargo syncs with the /Apps/smallPicture folder in Dropbox, so if you can get an OPML file into this folder, you can import it once you’re back on the desktop.

I’ve been using Cotton Notes on my iPhone and iPad to work with outlines, because I can tap on any node and export that node and all its subnodes as an OPML file to the /Apps/Cotton Notes folder in Dropbox. This app also will import OPML files. When you import an OPML file that includes links formatted as follows

<outline text="Google" type="link" url="http://google.com" />

 
it converts it to Markdown:

[Google](http://google.com)

 
One the one hand, this is great, because it still keeps the link and you can toggle between previewing the Markdown or not. The downside is that when you export the outline, it stays in Markdown.

In Fargo, the first link format (which is according to the original spec) displays with this icon bookmark instead of a wedge, and when you use the expand shortcut, Fargo opens the link in a new tab. Fargo does not support markdown, so if I import an OPML file from Cotton Notes, the link will show as [Google](http://google.com).

Fargo does let you create an HTML link within the text, but if you export it, the HTML is URL-encoded. For example, an HTML link in Fargo (which looks like Google) will export as follows:

&lt;a href=&quot;http://google.com&quot;&gt;Google&lt;/a&gt;

 
This is unreadable if I import it into Cotton Notes.

I suppose the proper way to create a link in Fargo is to choose Edit Attributes… in the Outliner menu, and manually add them:

type link
url http://google.com

 
This creates a link according to the OPML spec and will properly import into apps like Cotton Notes and iThoughts (although these apps then change the link formatting).

The OPML Bookmarklet

All this to introduce a bookmarklet I’ve written for iOS. It will take the title and link of a page and create an OPML file in the /Apps/smallPicture folder, which you can then import into Fargo. (To import, just go to File > Open and then click on a file called “Link” with a filename that is a timestamp. This will create a new outline in Fargo.)

This bookmarklet requires Drafts. From your iOS device, you will need to tap on this link to import a Dropbox action into Drafts called opml.

Then, bookmark any page in mobile Safari and title it opml. Tap on bookmarks and edit, and remove the URL of the bookmark. Paste in the following and then save:

 
You’re all set. Next time you want to import a bookmark into Fargo, just tap on the opml bookmarklet. It will send a formatted link to Drafts, which will then insert the draft into an OPML file, which is then saved to Dropbox.

If you want to get the link into an outline in which you are already working, create a public link for the new outline, copy the URL, go to your working outline, click on Import… and enter the public URL to import the link into that outline.

Warning

If a title or URL that you’re bookmarking contains any special characters that would ordinarily have to be encoded, this bookmarklet will not work. It will create an OPML file but if you try to import it into Fargo, it will show up null. (For example, & needs to be &amp;.) I don’t know any way around this. You’ll have to actually go into the OPML file to fix the URL or just bookmark URLs that don’t have parameters.

Bookmarklet to Save a Link and Title in Markdown Format and Copy to Clipboard

Inspired by Federico Viticci over at MacStories, I have created a bookmarklet that allows you to grab the title and URL of a web page in your mobile browser, have it formatted in Markdown as a link, and then copied to the clipboard so that you can paste it into the iOS text editor of your choice:

 
This bookmarklet relies on the Drafts URL scheme (which means you have to have it installed on your device). The page title is surrounded by URL-encoded brackets, and the link is surrounded by parentheses, as follows:

[MacStories](http://www.macstories.net]

 
This text string is then copied to the clipboard using the action parameter. (Visit Drafts for Developers to learn more.) “Copy to Clipboard” is a built-in action, so you don’t have to fiddle with Drafts to make this bookmarklet work.

Bonus!

If you would like to immediately jump to your iOS text editor of choice (provided it has an URL scheme of its own), you can add something like the following immediately before the final single quote in the bookmarklet:

&x-success=byword:

 
By adding the above to the bookmarklet, Drafts will automatically open Byword after it has copied the link to the clipboard. If you use a different app than Byword, just insert its link after the = sign.

How to Create a Bookmarklet

If you have never created a bookmarklet before, do the following:

  1. Copy the above script to your iOS clipboard.
  2. In mobile Safari, bookmark any page, and call it something like “Markdown Link.”
  3. Then go to bookmarks, tap on Edit, then tap on the bookmark.
  4. Tap on the URL of the page you actually bookmarked, then tap on the X to delete it.
  5. Paste the script into that field and hit Done.