Building a Readernaut Widget

My friend Jorge noticed the Readernaut widget at the bottom of my sidebar and asked how I implemented it. I’m going to post the answer here in case anyone else is interested in adding this widget to their sidebar as well.

If you don’t already know about Readernaut, it’s an awesome web app that Nathan Borror built to help people keep track of their books: what you’re reading, what you want to read, what your friends are reading, and so forth. Best of all, Readernaut makes it really easy to bookmark your reading progress, and pretty soon you’ll be able to publish your progress directly to Twitter. Nathan’s probably working on it as I write this.

Anyways, here’s the Readernaut API. I’m using JSON because, well, I am very fond of it. Since JSON is nothing more than JavaScript, it’s really easy to get at the information I need with just a few lines of code.

Step 1. Include the JSON file

The first step is to create a script element that requests your JSON file from the Readernaut server and includes it in your page.

Of course, replace “your_username” with your unique Readernaut username. I’m appending the callback parameter so that I can hand off my data to a parsing function. You can name the function whatever you want. In this case, I’m using the name “parseResponse”. Put this line at the end of your page, just before the </body> tag.

Step 2. Create a container

Next, I create an empty element where I want to display my widget. This acts as a container, which I will fill with the data I’ve parsed from Readernaut.

As you can see, I created a div that will be my container and assigned it an ID of “bookshelf” so it will be easy to access and manipulate via the DOM. I’ve also included the parsing script, which I’ve named “readernaut.js” and will explain in the next step. This file contains the parseResponse function, which was specified earlier as the receiver of my JSON data. Make sure you change the src attribute to match the location of your JavaScript file.

Step 3. Parse and display the information

Now I need to create the parseResponse function, which looks like so. Remember, this function goes in the “readernaut.js” file.

I’m not going to walk you through the function line-by-line, but I’ll point out some of the things you might want to change.

Number of Books

The number of books displayed is controlled by the test condition of the for loop. This is the little part that says i<6. Change the number 6 to the number of books you want displayed in your widget. At this time, the Readernaut API only returns 10 books, so don't make the number any larger than 10.

Size of Book Cover

The Readernaut API gives you access to three book cover sizes: small, medium, and large. I'm using medium. If you want to access one of the other sizes, change "cover_medium" to either "cover_small" or "cover_large". Of course, you can always use CSS (or the image width attribute) to make the covers a little smaller or larger per your requirements.

Finally, I wanted every other image to have a class of "odd" so that I could do some stuff with floats. If you don't need this, you can simply delete the entire if statement.

The end

Anyways, that's it folks! With a little CSS, you'll have your Readernaut widget looking exactly the way you want in no time. If you have any questions, leave a comment and I'll do my best to help you out.

Oh, and one last note. The API is still a draft and warns, "This API is under development and backwards incompatible changes can (and will) happen." As such, this script isn't guaranteed to work forever. If anything changes, however, I'll be sure to post about it here.