Hack 48 Add a "Currently Reading" List to Your Web Site

With a single line of code, you can give visitors an instant glimpse into what you're reading.

Letting people know what we're reading has always been an efficient way to give them a quick glimpse into our tastes—giving us a chance to appear insightful or silly or witty or dumb at a glance. We mention books we're reading at parties, during interviews, at the dinner table, so it's no surprise that we're also mentioning them in our web sites. Unfortunately, until recently, this required messing around with HTML to get the book's title, author, cover image, and maybe a few comments about the book on your site, and there was no way to find other people who were reading the same book.

Amazon's Web Services make it easy for a programmer to write a script to retrieve information and do all kinds of fun stuff with it, but programmers shouldn't be the only ones to get cool book lists on their sites. All Consuming allows you to maintain a list of books on your site with minimal effort and no programming knowledge at all. You don't even need to know HTML; you just have to cut and paste a couple lines of code into your site, and then you can maintain your list remotely from All Consuming. Also, because All Consuming knows what a lot of different people are reading, it gives you an easy way to find other people who are reading the same books, and instantly includes your comments in the loosely connected conversations around the Web.

48.1 Setting Up Your Book List

To set up your Currently Reading list, you first need to create an account at All Consuming (http://allconsuming.net). Then, search for the book you're reading and scroll down to the form that lets you add that book to your collection, as shown in Figure 3-12.

Figure 3-12. Adding a book on All Consuming

48.2 The Code

When you're done adding books to your list, go back to the control panel and the code will be right there for you to cut and paste into your site. It'll look something like this (of course, instead of having erik in the filename, it'll have your username):

<style type="text/css">
<!--
.ac_image {}
.ac_link {}
.ac_image_tag {}
.ac_title {}
.ac_author {}
.ac_comment {}
.ac_logo {}
-->
</style>
<script language="javascript" type="text/javascript" 
src="http://www.allconsuming.net/xml/users/currently_reading.erik.js"></
script>

Everything up to and including the </style> tag is optional—if you don't include it, your list will adopt the standard stylesheet for your web site. This small stylesheet includes classes that you can use to modify the look of your Currently Reading book list. For example, if you want the titles of the books to be bold, modify the .ac_title line to look like this:

.ac_title { font-weight: bold; }

If you have some knowledge on how to manipulate stylesheets, you can also add a border to the box, change the font, or even remove the cover images if you prefer to have only a text list.

48.3 The Results

Figure 3-13 shows what your book list might look like if you bold the title and author text and leave the rest at the default settings.

Figure 3-13. Currently Reading list

When you're done reading any of the books on your list, you can return to All Consuming and mark the book as "completed" using the same form you used to add the book or by going to the control panel and editing it there. Doing this will automatically remove the book from your web site. Similarly, you can continue adding books and comments to your site by adding and commenting on books at All Consuming. You'll never have to touch the code on your own site again unless you want to change the way your list is displayed.

48.4 Viewing Your Bookosphere

By clicking on the title or cover image of books on your site, you can see what other people around the Web are saying about the books you're reading. Lots of times, their comments will be included right there on All Consuming; otherwise, you'll have the option to click through and read the rest of their entries on their own sites.

—Erik Benson