Those of you who have been reading my blog for a while now or have followed me closely on Twitter, will probably know that I am a huge fan of Instapaper. For the uninitiated, it is a service that allows you to save articles to be read later that you can access from your iPhone, Android, eReader or on the web. It has had a massive impact on my productivity, helping me to organise and keep up with longer articles that I find online. I am such a massive fan that I even created a standalone application using Fluid which you can read about here.
Prompted by a tweet from Doug Belshaw (who had added an Evernote Site Memory button to his blog), I began looking into adding a similar sort of button for Instapaper, so that visitors to my blog could quickly save the article they were reading. After trawling many blogs and websites it became clear that there wasn’t a button of this kind available on the web. No java script plugin or html code snippet to allow this functionality could be found. Therefore, I decided to create one myself.
To create the button, I used a slightly modified version of the Instapaper bookmarklet code – editing it to include an “img src” html tag. This allowed me to link the code to a button which I edited to size (60×60) in Photoshop. I also added a “title” attribute to display “Read Later” when the cursor hovers over the button. You can see the button below this post. Sign in to your Instapaper account and try it out.
If you would like to add this button to your own blog, you can do so by using the code below:
<a href="javascript:function iprl5(){var d=document,z=d.createElement('scr'+'ipt'),b=d.body,l=d.location;try{if(!b)throw(0);d.title='(Saving...) '+d.title;z.setAttribute('src',l.protocol+'//www.instapaper.com/j/WKrH3R7ORD5p?u='+encodeURIComponent(l.href)+'&t='+(new Date().getTime()));b.appendChild(z);}catch(e){alert('Please wait until the page has loaded.');}}iprl5();void(0)" class="bookmarklet" onclick="return explain_bookmarklet();"><img src="http://jamesmichie.com/blog/wp-content/uploads/2010/10/Instapaper.png" alt="Read Later" title="Read Later" /></a>
I chose to insert the code in the “single.php” file of my WordPress blog so that it appears on the top right of the post pages but not on the home page.
I hope that you find this useful. If you make use of the code and/or edit it to suit your needs, please let me know by leaving a comment below.
Very nice, though I do wonder whether most instapaper users (myself included!) don’t already have the ‘Read Later’ bookmarklet on their browser toolbar?
True, I myself use the Instachrome extension.
That said though, I, like many others do not always access the net from my own computer. Therefore, this allows anyone who visitis my site (and uses Instapaper) to save the article they are reading from whatever computer they are accessing it from. Similarly, whatever device, be it Mobile, Smartphone or Tablet.
Heh, you’re thinking’s obviously too 3-dimensional for me 🙂
Thanks for that. I’ll have to try it.
Thanks, this is just what I was looking for!
I agree with dalzinho, but James makes a valid point too.
Maybe seeing the Instapaper logo will inspire people to sign up if they haven’t already?
How would you add the read later button for a Tumblr blog’s Link post? The idea being that you want people to read the post you have curated and not your link and summary.
How do you add this? http://blog.longform.org/
Hi Colin, I have never used Tumblr and so do not know how much freedom/access you have to your blogs code. WordPress themes have their code broken down into specific sections which makes manual editing quite straightforward.
What I can tell you is that the code needs to be placed below the “post” tag in your blogs theme. This page may help you get started in editing your theme: http://www.tumblr.com/docs/en/custom_themes
I hope that I’ve been some help and that you figure it out. 🙂