Flipboard is a competitor of Mr. Reader. However there are people who love both apps and would like to flip articles into their Flipboard magazines from Mr. Reader.

Until yesterday the only method to do this that I was aware of was their bookmarklet. Here are the general instructions on how to use browser bookmarklets in Mr. Reader. Like most other bookmarklets the Flipboard bookmarklet can only be used when displaying an article in the web view.

As it turns out there is another way to send articles to Flipboard using the Flipboard app itself. Please skip to the end of this article if you are not interested in technical blablabla.

On the Flipboard website I could not find any information as to whether their iPad app supports URL schemes. So I synchronized my iPad apps with iTunes on my Mac. I usually use the Mac app atPeek v1.3.1 to inspect the app bundle to find out if an app supports an URL scheme. How? Inside the Flipboard 2.3.1 app is a Info.plist file (standard filename used by “all” apps and it is not related to Flipboard) with the information I’m looking for.

I was surprised to find that the Flipboard app supports more than one URL scheme (I removed some entries from the Info.plist file to keep it short):

...
<key>CFBundleURLTypes</key>
<array>
    ...
    <dict>
        <key>CFBundleURLName</key>
        <string>com.flipboard.flipboard</string>
        <key>CFBundleURLSchemes</key>
        <array>
            <string>flipboard</string>
        </array>
    </dict>
    ...
    <dict>
        <key>CFBundleURLName</key>
        <string>com.flipboard.flipboard</string>
        <key>CFBundleURLSchemes</key>
        <array>
            <string>flipboard-x-callback</string>
        </array>
    </dict>
    ...
    <dict>
        <key>CFBundleURLName</key>
        <string>com.flipboard.flipboard</string>
        <key>CFBundleURLSchemes</key>
        <array>
            <string>flip-api-v1</string>
        </array>
    </dict>
    ...
</array>
...

Of course the flipboard-x-callback URL scheme sounds even better. :-) I googled it to see if anybody knew more about its usage. And yes, there is a 7 month old GitHub Gist with the necessary information.

Adding the Flipboard URL scheme to Mr. Reader manually

As usual: Mr. Reader Settings -> Services -> Add (Other App) -> Add Other App

App Name: Flipboard App

Protocol: flipboard-x-callback://

URL Scheme Template (in one line without line breaks):

flipboard-x-callback://x-callback-url/flip
    ?url={[URL]}
    &x-success={mrreader://skip-sync}
    &x-cancel={mrreader://skip-sync}

Visibility: The standard and link menu should be enabled. The text selection menu should be disabled.

Please do not forget to tap on the ‘Add’ button so that it gets added to your sharing menu!

Or install the prepared ‘Flipboard App’ action

You can also install it directly into Mr. Reader. Open the following link from Safari: Flipboard App


Attention: As mentioned above it seems that the URL scheme is not officially documented and it could be broken/removed by future Flipboard app updates.

The visual bookmarking service Zootool was shut down in March 2014. Springpad just announced that they will be shutting down in June 2014. Some weeks ago the Kippt owners opened a new chapter. And since a few days kippt.com is down, shows application errors or is unusable slow.

I really hope that’s it for this year!

But there is also a new one: Stache is available since yesterday. It’s a Mac/iPhone/iPad app and does not provide a web interface. It can be integrated in Mr. Reader by using their URL scheme.

There are many ways to create a PDF from an article. One easy way for Pocket users is to use one of the existing IFTTT recipes. Usage: You add an article from Mr. Reader to your Pocket account, a IFTTT recipe creates a PDF of the article URL and places it in your Dropbox. Btw there are also IFTTT recipes for other services like Pinboard and Readability doing the same.

But those IFTTT recipes must use external services like pdfmyurl.com to create the PDF. They are usually not free (e.g. the pdfmyurl STARTER plan is $19/month at time of this writing). Another “problem” is that those ‘URL to PDF’ services create the PDF from the original website and not from the clutter free Pocket content.

In this post I show you a possible way by using your Mac doing the PDF conversion.

In a nutshell

  1. You send for example the Instapaper mobilizer content shown in Mr. Reader to a IFTTT recipe by mail
  2. The IFTTT recipe writes the HTML body of the received mail to a file in your Dropbox
  3. Hazel running on your Mac automatically checks your Dropbox for new files created by the IFTTT recipe, converts it to a PDF and saves the result back to your Dropbox

Sounds more complicated than it is! ;-)

Requirements

1. IFTTT: Create a mail trigger recipe

Open the ifttt.com website (their new iPad app could also be used), login and create a new recipe (Create link at top). Follow this simple steps:

  • if this
    • Choose Trigger Channel: Email
    • Tap on Send IFTTT any email
    • Tap on Create Trigger
  • then that
    • Choose Action Channel: Dropbox
    • Choose an Action: Create a text file
      • File name: {{Subject}}
      • Content: {{BodyHTML}}
      • Dropbox folder path: IFTTT/ConvertToPDF
    • Tap on Create Action
  • Tap on Create Recipe

2. Mr. Reader: Add a custom mail action

We need an additional sharing menu action to trigger the above created IFTTT mail recipe from Mr. Reader.

Open the Mr. Reader Settings -> Services. Scroll to the bottom and tap on Mail Action -> Add Other Mail Action and fill the form like this:

 Property  Value
Name IFTTT PDF Trigger
To  trigger@ifttt.com
Subject Template [TITLE]
Body Template  <h1>[TITLE]</h1>[TEXT]
HTML ON
Standard Menu ON
Text Selection Menu OFF
Link Menu ON

The ‘To’ mail address trigger@ifttt.com is a predefined mail address of IFTTT. The sender mail address on your iPad must be the same as the one used in IFTTT. This is necessary so that IFTTT knows that the mail sent to IFTTT comes from you and they are able to trigger the IFTTT mail recipe created in the first step.

3. Mac utility: url2pdf

There are some Mac utilities to create a PDF from a URL. I decided to use url2pdf (GitHub repository) from Scott Garner, because it is a single executable and not a collection of scripts with additional dependencies. I had a problem with the width of the created PDFs and added a command line option to set a screen width.

  • You can download my fixed url2pdf binary from here
  • Unzip it
  • Move url2pdf to your ~/Dropbox/ifttt/ConvertToPDF/ folder. This folder gets automatically created by the IFTTT recipe or create it manually if it does not already exist.

4. Mac: Setup Hazel to do the conversion

Hazel is a great app and can be used to automate many things on your Mac.

  • Open your Mac Settings -> Hazel
  • Add your ~/Dropbox/ifttt/ConvertToPDF folder to be watched by pressing the +button at bottom left
  • Add a new rule for this watched folder and give it a name like ConvertToPDF
  • Configure the rule like shown on the screenshot below

Hazel Rule

The script content:

~/Dropbox/ifttt/ConvertToPDF/url2pdf 
--url="file:///$1" 
--autosave-name="URL" 
--autosave-path="~/Dropbox/ifttt/ConvertToPDF/"
--screen-width=660

For better readability with line breaks. Remove them when you use copy&paste.

And now?

Open an article in Mr. Reader - for example in the Instapaper mobilizer view - and execute the mail action created in the second step (Menu name: IFTTT PDF Trigger). After a while the PDF should exist in your ~/Dropbox/ifttt/ConvertToPDF folder.

Yes, some but not all bookmarklets stopped working. But it is not due to my version 3.1 update of Mr. Reader. Apple released at the “same” time iOS 7.1.1 and that broke it. :-(

For example the Flipboard bookmarklet works fine on my iPad with iOS 7.1 but on my other iPad with iOS 7.1.1 nothing happens when I try to use it (same Mr. Reader version).

I must invest some time to write an example app for Apple. This is always requested, so that they are able to reproduce it more easily. Afterwards I will file a bug report for Apple.

In case I will find a workaround I will use that of course. Waiting for Apple until they have fixed a problem can be frustrating (It is possible that this will never happen or some years later).

The following two mark as read options exist since years but month by month I do get requests to add them.

Mark items older than as read

You can mark items older than 3/6/12 hours or 1/2/3 days or 1/2 weeks as read. Tap and hold the ‘Mark All As Read’ button (see screenshot) to open the menu and select your desired option.

Mark above or below as read

Mark items above or below as read

In the articles table you can mark items above or below the current position as read. Tap and hold the read/unread button (see screenshot) to open the menu and perform the action.

Mark above or below as read

I introduced a local search with Mr. Reader version 1.8 (March, 2012). It was just a simple and fast search. With version 3.1 I improved it by adding the boolean operators AND, OR, NOT and brackets.

Maybe it is easier to show its usage with some examples.

Example 1

In case you would like to search for articles that must contain Apple and Samsung

apple AND samsung

Example 2

Articles that must mention the car manufactures Audi/Mercedes/Porsche but not Volkswagen

(audi OR mercedes OR porsche) AND NOT volkswagen

Example 3

A search for texas racing would find this article

The texas racing commission decided ...

but not this article

A racing commission in texas decided ...

If you would like to find also the second article you must use the search texas AND racing. In this case both words must exist anywhere in the article and not exactly like you entered it.

In the Twitter and the Buffer sharing dialog, you can insert the Twitter handles of the article source and author by pressing the related buttons of my keyboard extension (see screenshot below) or by using them in your Twitter/Buffer template. Btw you can enable/disable this feature in the Mr. Reader Twitter/Buffer settings.

Insert Twitter Handles Screenshot

How does it work?

More and more writers embed Twitter Cards into their websites and I try to extract this meta data (Twitter handles) from the articles HTML. So they will only be available when they are set at all and correctly. Setting the values seems to be complicated (see examples below), and I hope that the website owners will be more careful in future. Please inform the site owner or article author in case there is no data set or the wrong data set.

Related part of the Twitter Cards documentation:

twitter:site    = @username of website
twitter:creator = @username of content creator

and the correct Twitter card values of the screenshot above as an example (how it must be embedded in the HTML):

<meta name="twitter:site" content="@engadget">
<meta name="twitter:creator" content="@seaniccus">

Some wrong examples I’ve found during my tests

http://lifehacker.com/the-sheep-and-the-wolves-smart-investing-made-simple-1522789629

<meta name="twitter:site" content="@lifehacker">
<meta name="twitter:creator" content="Tessa Miller">

The creator is set to the full name instead of her Twitter handle


http://www.1stwebdesigner.com/freebies/15-bumper-stickers-print-peel/

<meta name="twitter:site" content="@1stwebdesigner"/>
<meta name="twitter:creator" content="@https://twitter.com/rudolphmusngi"/>

Nice combination, the creators Twitter URL with a @ character as prefix!


http://www.theverge.com/2014/2/14/5411382/ron-paul-launches-petition-to-grant-edward-snowden-clemency

<meta name="twitter:site" content="verge" />

Is without the @ character!


http://www.metal-hammer.de/games-spiele/article538082/im-test-lightning-returns-final-fantasy-13.html

<meta name="twitter:site" content="Metal-Hammer">
<meta name="twitter:creator" content="@metalhammer_de">

The Twitter handle of the site is plain text and the real site Twitter handle is set as creator


http://www.rosenblut.org/2014/02/14/mipow-powercube-powertube-energie-fuer-unterwegs/

<meta name="twitter:site" content="@jetpack" />

@jetpack is a Wordpress plugin (default value?)

A lot of services are already supported by Mr. Reader, but I’m not able and willing to support everything. ;-) In the following JavaScript Action example, you will see a script hat I’ve written to bookmark a page in a bookmarking service called vBookmarkz.

The API of this service needs a key, a title and a URL so that a webpage can be added to the users bookmarks collection.

When you use this script the first time, you have to enter your vBookmarkz key once and it uses a HTTP POST request to submit the data form url encoded.

function vBookmarkzAdd(url, title, owner) {
    var headers = new Object();
    headers['Content-Type'] = "application/x-www-form-urlencoded";
    headers['User-Agent']   = 'Mr. Readers vBookmarkz action';

    postBody = 'url='+url+'&title='+title+'&owner='+encode(owner);

    httpPost('http://vbookmarkz.me/API/addBook.php', headers, postBody, function(response, status, error) {
      if(status == 200) {
        doneAlert('Article added to vBookmarkz.', '');
      } else {
        errorAlert(status + ':' + error + ' (' + response + ')');
      }
    });
}

var url = "[URL]";
var title = "[TITLE]";

if(!existsSetting('vBookmarkzKey')) {
  inputPrompt('Your vBookmarkz Key', 'Please enter your vBookmarkz key (API hash).', function(userInput, cancelled) {
    if(!cancelled) {
      setSetting('vBookmarkzKey', userInput);
      vBookmarkzAdd(url, title, userInput);
    }
  });
} else {
  vBookmarkzAdd(url, title, getSetting('vBookmarkzKey'));
}

This is an example of how the JavaScript actions, introduced in Mr. Reader v3.1, could be used.

It consists of two scripts. The first script collects article URLs and saves them to your iPad. The second script uses this data to copy a formatted version to the clipboard. Instead of copying it to the clipboard, you could also open another app with this data or you could do an HTTP call.

'Collect URL' Script

// Get an existing collection or create a new one
var collection;
if(existsSetting('urls_collection')) {
  collection = asJsonObject(getSetting('urls_collection'));
} else {
  collection = new Array();
}

// Create a new collection entry and append it
var newEntry = new Object();
newEntry['url'] = '[URL]';
newEntry['title'] = '[TITLE]';
collection.push(newEntry);

// Persist the collection as JSON
setSetting('urls_collection', asJsonString(collection));

// Show a green done alert at top of the screen
doneAlert('Added the URL to your collection.', decode(newEntry.url));

'Copy Collected URLs' Script

if(existsSetting('urls_collection')) {
  // Get the collected data from the settings (see Collect URL script)
  entries = asJsonObject(getSetting('urls_collection'));

  // Create the formatted content
  var clipboardContent = 'My URLs collection from today';
  clipboardContent += '\n\n';
  for(var i=0; i<entries.length; i++) {
    clipboardContent += decode(entries[i].title);
    clipboardContent += '\n';
    clipboardContent += decode(entries[i].url);
    clipboardContent += '\n\n';
  }

  // Copy the formatted content to the clipboard
  copyStringToClipboard(clipboardContent);

  // Ask the user if the collection should be resetted
  yesAndNoPrompt('Reset?', 'Copied your URL collection to the clipboard. Now it is a good time to reset it.', function(declined) {
    if(!declined) {
      removeSetting('urls_collection');
    }
  });
} else {
  // Show a blue info alert when no data exists
  infoAlert('Your URL collection is empty', 'Collect some URLs and try it again');
}

Example result (clipboard)

My URLs collection from today

​Before the iPhone was announced, Android didn't support touchscreen input
http://www.engadget.com/2014/04/13/android-iphone-touchscreen-support

This iPad Pro Concept Is Definitely Worth Making!
http://www.makeuseof.com/tag/ipad-pro-concept-definitely-worth-making/

Inside Google's efforts to become one of the largest corporate forces in Washington
http://www.theverge.com/2014/4/13/5611004/inside-googles-efforts-to-become-one-of-the-largest-corporate-forces

I know this sounds a little bit strange, but some users doing funny things. ;-)

This can be done by using the Command-C app. It’s necessary to use nested encodings like this {xx{yy}}, which were broken in Mr. Reader releases before 3.1. The following 3rd Party Apps Action opens the Command-C app on your iPad, which uses its companion app on the iPhone to open OmniFocus there, and to create a new task in OmniFocus. Afterwards it returns automatically to Mr. Reader.

command-c://x-callback-url/copyText
?deviceName={OF-5}
&text={omnifocus:///add?name={[TITLE]}&note={[URL]}}
&x-source={Mr. Reader}
&x-success={mrreader://skip-sync}  

Hints

  • You have to replace OF-5 with the Command-C device name of your iPhone
  • The example is formatted for readability: It must be one line without spaces and lines breaks
  • The text parameter uses the nested encoding