Hi folks, what are you reading? Share it on "My Reading List"

March 4th, 2011

Today I announce a new Facebook App I built: My Reading List. It allows you to keep a reading list and share interesting books with your friends. This app makes sharing your favorite books very simple. Just login with Facebook and you are good to go..

Technology and idea

The app uses the Facebook API to identify you. Secondly it uses the Google Book Search APIs to extract the book info like the title, a thumbnail and a link to more info provided by Google. I made a design of 540px wide so it can be used on my domain as well as in the Facebook Canvas. Like a site for movies, I always wanted to do something similar for books. Like movies, you get a lot of good tips from friends. I also like to share what I am reading and keep a simple list of it. More info about the Canvas can be found at the Facebook API documentation.

Trigger

Amazon has this great Reading List app. I stumbled upon a post where people asked why this wasn't ported to Facebook (and why various reading lists couldn't be synced to one reading app, which unfortunately is not possible for linkedin / amazon's reading list). The Facebook argument was already enough to get me going :)

Besides I like reading!

Few years ago I would "schedule a read" with a friend, we would plan to read a book together and discuss it. It was highly motivating and it led to good discussions and fun learning. Why not bring this kind of fun to the powerful APIs Facebook and Google have to offer?!

Design

Let's see what the My Reading List app looks like and what you can do with it ..
This is the homepage when logged in with Facebook. You need Facebook to add books and use other features:

Of course you can browse the published titles without a Facebook Login. Here is the "Logged out" view of the site:

Add a book

When you are logged in you will see an "Add" button, click on it and a form slides out to add a title:

And as you start typing the Google Book Search APIs shows you potential titles. It's a similar data mining exercise I did before with sharemovi.es. It uses Juery's autocomplete plugin and submits the form automatically when clicking on the book you want to add:

.. then, upon selecting the title you want to add, a form slides down to publish this title to the stream with your opinion about the title:

It gives you the option to say you want to read it, you are reading it or you have read it:

Moreover, it lets you post it to your wall, but you can always choose to only leave the info inside the app:

Once you click "Add Book" the book is published to the stream. If you choose to publish it to your wall, something like this appears on your Facebook Wall:

Search

You can search for books and readers. Each book has has its own page with the enhanced Facebook Comment plugin and a neat overlay with a preview of the book (thanks to Google's Preview Wizard).

Checking out the Python title:

You see all the social features. Click on the Google Preview button and you can take a look inside the book:

** Keep in mind that if Google does not have a preview of the book available the Google Preview is not visible on the book's page. However, in the stream of books on the homepage, the same Google Button opens a new page (tab) with more details about the book. A request for enhancement would be to detect when there is no Google Preview when requested and also put the link there instead..

More stuff ..

Other features are displayed for each title on the homepage (when not drilled down to a specific title) - it consists of 3 actions:

1. Comment

With the comment button you will be taken to the book's individual page to comment using the Facebook Comments Plugin (see second printscreen under "Search").

2.Recommend

You can use the mail button to write a quick recommendation to friends. This works like this:

a. click on the email icon, a form pops up to write your message:

b. when you click on the "Next .." button you get the Facebook Requests dialog with the info copied in there. This second dialog is needed to select one or more friends to send the recommendation to:

c. Your selected friends will get a notification of the recommendation in Facebook:

d. When a friend clicks on it they will see the recommendation + the URL of the book title.
The "Accept" button of Facebook has no extra functionality yet, it just takes you to the app (Canvas version)

3. Like

Apart from the FB Like button plugin, I made an internal "Like" system.
Under the "Popular" button in the sub navigation bar, you can see which titles were liked this way:

.. when clicked:

Please try ..

I am looking forward for more users to get on-board! I would love to hear your thoughts and feedback!

It is an experiment, so don't expect it to be complete. For example edit/delete of existing data, "your reading profile", adding other reader's books to your list, etc. would take up too much time for this trial.

The app is hosted at my domain but can also be used from within Facebook and has the following Facebook page

Next ..

I think this covers about all features. In future blog post I will cover the technical aspects of these features. What plugins did I use? How can you use the Google Book Search APIs? More on the Facebook API (see "Further reading" at the end of this post). CSS tricks I became to like. And of course jQuery for enhancing the user's experience.

And above all ..

Happy reading!! Let me know what books you like ..

Web development (19)

Bob Belderbos

Software Developer, Pythonista, Data Geek, Student of Life. About me