Why It’s Good to Install Readability Button on Your Blog – and How to Do It

Readability button

Readability is a tremendously promising service, which helps to get rid of Internet distractions in order to focus on the most important thing: reading. You can easily associate it with Inspapaper and Read It Later – with one major advantage: Readability can turn all the distractions off at the very moment the user is visiting the site.

This can be done in two ways:
– the user can install a browser add-on
– you, the content provider, can install the Readability button on your blog or site

You don’t have control over who is using Readability add-on, but you can help him focus on the content of your blog by installing a Readability button (see picture + live, above the title of this post) which gives the user an option to turn into a reading more now (a free option) or save for later (for registered users only – monthly fee is $5).

Before I’ll explain how to install it, I’d like to list a few advantages:

– such a button is a promise of a distraction-free reading. Either used or not it reduces the willingness to come back later or share the post without reading – especially if your blog is rich with widgets and ads
– the longer the article is, the bigger the chances of using the button – and reading it
– the Readability interface is very similar to an e-reading app interface. If you are an author and share on your blog chapters of your next book or regularly publish short stories, Readability can change your text from an online reading experience into a book reading experience. It’s one step closer to the book you want to share or sell
– last thing, but very, very important: you show respect to your blog’s readers by giving them the option to choose the reading mode.

How to install

If your blogging platform allows to place scripts, you can copy the one below and put it wherever you want (alternatively, grab the code from here):

<div id='rdbWrapper'></div><script type='text/javascript'>
(function() {
 var s     = document.getElementsByTagName('script')[0],
 rdb   = document.createElement('script');
 rdb.type  = 'text/javascript';
 rdb.async = true;
 rdb.src   = document.location.protocol + '//www.readability.com/embed.js';
 s.parentNode.insertBefore(rdb, s);

For example, you can add an new text widget to your sidebar and paste the code in here.

If you are familiar with CSS, you can adjust the look of the button by playing with rdbWrapper tag. If you want to align the button to the right you may need to correct another tag readabilityEmbedContainer. To position the button above this post I used these properties:

#rdbWrapper {

#readabilityEmbedContainer {
height: 14px;

If you don’t want to waste time on inserting and adjusting the code, and you run a self-hosted WordPress blog, you can always install a plugin. You can check Readability Buttons (readability.com).

Please do let me know what you think of this service. Do people want a distraction-free environment or they just learned how to navigate through noisy web pages and are OK with a regular, “rich” mode?

PS. In the screenshot below you can see how this page looks in Readability mode… if you haven’t switched to it yet.



Let's get in touch on Twitter or Facebook.