Yesterday I went back and read one of my older posts from my tablet. That made me realize my blog doesn’t have a mobile friendly view. Sure, it doesn’t have any ads or widgets, and the posts appear clean on a browser as my emphasis is on the text/ code, but that doesn’t translate well to a mobile device as the fonts are small and a bit of zooming and scrolling is required to hide the left sidebar and other bits.
Eventually I read the post using a Readability bookmarklet I had on the mobile browser so that got me thinking I must add quick links to do this for each post so any visitors can take advantage of the same.
I use Instapaper for most of my reading. For some posts that Instapaper has difficulty rendering (mostly posts with a lot of code, pictures) I use Pocket. I prefer Readability over Pocket as its iOS app is terrific, but Readability’s Android app sucks (poor UI, syncing issues, doesn’t keep track of my last read location) and so I use Pocket rather than Readability.
For publishers Readability offers an embed code. This is good in that it allows one to read the page in a Readability view without adding to Readability (similar to what I did yesterday using the bookmarklet). It also lets you add the page to Readability, print it, send to Kindle, or email – useful stuff. What I don’t like about the embed code, though, is that it pulls in JavaScript from their website and adds a block of buttons to my posts. I don’t want a block of buttons – in my case, all I want is to offer users a link they can click to get the page in a Readability view.
For readers Readability offers the bookmarklets I mentioned earlier. I wrapped the “Read Now” bookmarklet as a link for my purpose (as I’ll show in a bit).
Instapaper too gives bookmarklets for readers – the “Instapaper Text” bookmarklet one is what I am interested in. For publishers Instapaper gives an URL that will add the page to the reader’s Instapaper queue. Unfortunately, there’s no similar URL to simply show the page in an Instapaper view without adding to queue.
Pocket too gives bookmarklets and tools for publishers. However, both options only allow the page to be added to the Pocket queue, there’s no way to just get a Pocket view display of the page.
So Readability and Instapaper are what I can use. I added the following text to each of my posts (I use the Atahualpa theme so it was just a matter of adding this text to the “Byline” section of each post and applying some formatting):
|
1 |
Read via: <a href="javascript: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.');}">Instapaper</a> | <a href="javascript:(%0A%28function%28%29%7Bwindow.baseUrl%3D%27//www.readability.com%27%3Bwindow.readabilityToken%3D%27%27%3Bvar%20s%3Ddocument.createElement%28%27script%27%29%3Bs.setAttribute%28%27type%27%2C%27text/javascript%27%29%3Bs.setAttribute%28%27charset%27%2C%27UTF-8%27%29%3Bs.setAttribute%28%27src%27%2CbaseUrl%2B%27/bookmarklet/read.js%27%29%3Bdocument.documentElement.appendChild%28s%29%3B%7D%29%28%29)">Readability</a> |
All this does is that it wraps the Javascript code from the Readability Read Now and the Instapaper Text bookmarklets within an a block like thus:
|
1 |
Read via <a href="javascript:.........">Instapaper</a> | <a href="javascript:........">Readability</a> |
When a user clicks the text the JavaScript is executed as though they had clicked on the bookmarklet. (Hat tip to this page where I picked up the syntax from. I haven’t programmed with JavaScript so had to search around for how to invoke JavaScript from a link).
Hope this helps someone! I have put links to both Instapaper and Readability because I prefer Instapaper but it is lousy with code blocks while Readability handles code blocks better. I feel Instapaper is better for text – it has more fonts, background colors, etc.