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.