September 22, 2008

Embeddable Google Books

Google made it easy to embed in a site any book available at Google Book Search. You can add a fully-functional widget using this code:

<script type="text/javascript" src="http://books.google.com/books/previewlib.js"></script>
<script type="text/javascript">
GBS_insertEmbeddedViewer('GkCpLIk7aisC',600,500);
</script>

where you should replace GkCpLIk7aisC with the corresponding book ID, which can be obtained from the URL. Here's the result for "David Copperfield" by Charles Dickens:


"As on the Book Search site itself, you can search within the book, zoom in and out on the page, and browse up to 20% of the book," explains Inside Google Book Search. The new widget is already used by online catalogs like WorldCat.org and social book sites like weRead to preview books.

This is just one of the three Google Books APIs that allow programmatic access to more than one million books.

33 comments:

  1. "Any book" as in 'any recently published book' because MOST of everything published saw the light of day before the ISBN system was invented. So it's really only recent stuff, and reecnt editions of older stuff. Too bad,

    ReplyDelete
  2. @Anonymous:
    Thanks for your comment. I updated the code to use Google Book Search's ID instead of ISBN. The API supports many identifiers: ISBN, OCLC, LCCN, Book Search volume ID.

    Book Search's ID can be obtained from the URL:
    http://books.google.com/books?id=GkCpLIk7aisC&hl=en

    ReplyDelete
  3. What about opening up a specific page (pinpoint)?

    ReplyDelete
  4. Opening to a specific page would be useful.

    ReplyDelete
  5. it works fine on the column (blogger) but it doesn´t in a post (like you did with David Copperfield).
    is there any special reason for that?
    javascript?
    Do you know?

    ReplyDelete
  6. How to go to a page? Use the more advanced API described here. Here's a simple example that loads the page 5 from David Copperfield:

    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
    google.load("books", "0");

    function initialize() {
    var viewer = new google.books.DefaultViewer(document.getElementById('viewerCanvas'));
    viewer.load('GkCpLIk7aisC', null, function() {viewer.goToPage(5);});
    }

    google.setOnLoadCallback(initialize);
    </script>

    <div id="viewerCanvas" style="width:400px; height:500px;"></div>

    ReplyDelete
  7. @Arturo:
    Yes, Blogger inserts a line break tag (<br>) before each new line and most scripts no longer work. The solution is to write the entire code in a single line, like I did for this post.

    ReplyDelete
  8. In Google Reader the book widget will be replaced by a static image, in your example the image is http://1.bp.blogspot.com/_ZaGO7GjCqAI/SNfsZlIFnII/AAAAAAAAL1M/jqQhFQyimIA/s640/google-book-search-widget.png.

    Or did you do it yourself?

    ReplyDelete
  9. @Quentin:
    I used the noscript tag to display a screenshot if the browser doesn't support JavaScript. Feed readers remove scripts, iframes and are embedded objects, so the noscript tag is also helpful for them.

    ReplyDelete
  10. Yes true, but Google Reader handles Picasa slideshows and other widgets (such as Flash video players and more) so I thought it might also handle that new feature...

    Thanks!

    ReplyDelete
  11. it could do something good to some book reader fans website, i think.

    ReplyDelete
  12. Is it possible to customize the "buy" link?

    Like, to include one's own unique affiliate "buy-now" link?

    ReplyDelete
  13. I can't get this to work in WordPress. I even tried generating custom code with the Preview Wizard at http://code.google.com/apis/books/docs/preview-wizard.html, but that didn't help. Suggestions most welcome!

    ReplyDelete
  14. From what I know, WordPress.com doesn't allow you to add JavaScript code.

    "Javascript - can I use that on my blog?

    No. Javascript can be used for malicious purposes and while what you want to do is okay it does not mean all javascript will be okay. The security of all the blogs here is paramount and until such time that we can guarantee that scripting languages will not be harmful they will not be permitted."

    http://faq.wordpress.com/2006/05/07/javascript-can-i-use-that-on-my-blog/

    ReplyDelete
  15. Your link seems to be keeping your page from loading. Ever since you put this link up your page loads then after a few seconds IE7 says it can't load the page and we get the error "page cannot be displayed". It's happening on three different computers. You might want to disable the code in this one post.

    ReplyDelete
  16. @Anonymous:
    I changed the code and you should no longer see errors in Internet Explorer. Thanks for your feedback.

    ReplyDelete
  17. The book I want to embed has a hyphen in its ID. (bJqSqbc3-J4C) If the hyphen is included, there is a problem with the page not loading and an error is given. Without the hyphen, the page loads but nothing embeds, because it doesn't have the real ID. Any suggestions?

    ReplyDelete
  18. This is a very cool new feature. However, I ran across a bug. I tried embedding multiple books on my blog (Wordpress, although I think this is irrelevant) in separate posts and it made them appear in the same post. Thanks much for your great service... especially the vintage newspaper scans.

    ReplyDelete
  19. I'm still having trouble with Internet Explorer 7 aborting the page load even using the ISBN version, so maybe the hyphen wasn't the problem. It works fine on Firefox, but of course I don't want to shut down my blog to anyone using IE. Any suggestions?

    ReplyDelete
  20. thank you very much, after several trying, now I know how to capture it as part of a post in Blogger. You are right: it is that line breaking
    .
    arturo durán / CiberAmérica

    ReplyDelete
  21. No luck with embedding into wikispaces. I have been using the "embedding code" function within wikispaces and choosing javascript and then simply copying and pasting the code with no luck. Anyone have any suggestions...I would really like to figure this one out.

    ReplyDelete
  22. I have listed my published books at ronstrickland dot com. Now, having read about this Google Book Search widget, I want to add it to the description of, say, my book Vermonters. Admittedly I am an unsophisticated user of FrontPage. But I am eager to solve this problem. Help, please!

    ReplyDelete
  23. Hi,

    I managed to get this working- but it is huge! I tried scaling down by changing the 600, 500. When i do this the window itself scales, but the buttons to zoom, search, etc. don't scale down. I know you don't want it too small as the whole point is to get into the book to review it. any suggestions?

    Tessa

    ReplyDelete
  24. cannot embed 2 books at the same page
    with some text words between them :(

    the preview are just continuing 2 books
    then the text word exist after them

    can u show me how ?

    ReplyDelete
  25. I think that you need to add a "GoToPage" feature to make the Preview Wizard really useful. For your typical blogger, who just wants to link to a passage in a Google book, it would be great if the viewer opened up right to the page...

    Come on Google - add this to the Preview Wizard... You'll make bloggers lives much easier.

    ReplyDelete
  26. Hi,

    How can we specify the width and height of the popup/Viewer using GBS_insertPreviewButtonPopup function.

    Haritha

    ReplyDelete
  27. Hi -

    Is there any way to remove the BUY this book option, as we are a bookstore and don't necessarily want people to go to Amazon.

    ReplyDelete
  28. Hi - Can anything be done about the buy this book. We are a book store, love the tool, but don't necessarily want to send the customers to amazon. Thanks

    ReplyDelete
  29. Yes real, but Google Reader handles Picasa slideshows and other widgets (such as Flash video players and more) so I thought it might also handle that new feature...

    Thanks!

    ReplyDelete
  30. Is there any way to remove the BUY this book option, as we are a bookstore and don't necessarily want people to go to Amazon.

    ReplyDelete
  31. how can i dynamically get isbn and pass it into google books embeded viewer?

    ReplyDelete
  32. For bookstores who want to hide the bar across the bottom with the BUY button, I was able to accomplish this by adding style="overflow:hidden" to the viewer canvas div.

    ReplyDelete

Note: Only a member of this blog may post a comment.