Pin Me

Using Google Code: Pt. 4 - Book Search

written by: •edited by: Michele McDonough•updated: 10/11/2010

Literature abounds on many topics. Chances are there are book sources that relate to your web topic. Google Code and AJAX APIs allow you to add a book search feature to your site. This easy, step-by-step article, with code samples, will get you started.

  • slide 1 of 6

    Book of Wizardry

    Book Bar Image Book Bar Wizard The easiest and fastest way to get book search results on your web pages is to use the Book Bar Wizard. By specifying the search parameters and the URL of your website, the wizard will generate code that you simply paste into your HTML. The wizard allows you to set your list based on topics or authors, or both. You simply enter the comma separated list in the box provided. The generated code will create a list of thumbnails that can be clicked to take you to a preview page of that particular book. The returned results are based on those books provided by Google partners. However, there are a number of partners and hundreds of books in the database.

  • slide 2 of 6

    More Flexibility Please

    By using the Data API you can actually accomplish searches using full text strings or user-generated input. This will create a list of book reviews, ratings, and other features that can be further manipulated by your scripts. You could even allow your user to generate a reading list based on their entries. Using mashups you could even link map or other search results to related books.

  • slide 3 of 6

    To See or Not to See...

    EmbededViewer Another aspect of the Book Search APIs is the availability of the Embedded Viewer API. In its simplest form you can specify a book, in your code, by ISBN, LCCN or OCLC numbers. This will bring an available preview into your page with a size and location you control. There is also a wizard that will generate the code for you.The easiest way to control the location is by using a table to structure your page, or at least the section containing the Viewer. Additional coding would allow you to pass a variable into the Viewer code for additional books. Think of the possibilities of a mashup using the Book Bar and the Embedded Viewer. This article will not present such an advanced implementation.

  • slide 4 of 6

    About the Code [All examples adapted from]

    The first code the result of running the Book Bar Wizard. Essentially you can use the same code in your pages without running the wizard. You will need to insert your own API Key as discussed in previous parts of this series. The location is indicated with this line by replacing YOUR_KEY_GOES_HERE with the actual key:

    <script src= type="text/javascript"></script>

    The line executeList : ["Google Code", "Sailing Ships", "PayPal"] is where you enter your list of topics and/or authors. This would be an excellent tool for an author's fan site.

    The second code sample...requires, first of all, you to include your API Key just like the other AJAX APIs by using the line:

    <script src= type="text/javascript"></script>

    The second thing you will have to do is place the following into the <HEAD> tag of your page:

    google.load("books", "0"); function initialize() { var viewer = new google.books.DefaultViewer(document.getElementById('viewerCanvas')); viewer.load('ISBN:0789739739'); } google.setOnLoadCallback(initialize);

    The google.load("books", "0") defines the API to load and the version of that API, just like the previously discussed APIs in Parts 1, 2 and 3.

    The function is then initialized by defining the viewer and assigning it a tag ('viewerCanvas') that will be called in the <BODY> of the document. In our example the viewer is initially loaded with the ISBN of "Web Geek's Guide to Google Chrome" (ISBN:0789739739). You can specify a specific book by the elements listed in "To See or Not To See" above. Alternatively, you could pass a value to viewer.load using your own scripting.

    The last part is to get the device placed on your page. This is done by adding the following line to the <BODY> of your HTML:

    <div id="viewerCanvas" style="width: 600px; height: 800px"></div>

    As you can see we build the <DIV> assigning "viewerCanvas" to the id variable. Width and height are set using the style= tag.

    There you have it, a simple integration of the Book API and some suggestions on its use.

  • slide 5 of 6

    Sample 1 - Book Bar From Wizard

    <!-- ++Begin Book Bar Wizard Generated Code++ -->
    <!-- // Created with a Google AJAX Search Wizard // -->
    <!-- // The Following div element will end up holding the actual bookbar.
    // You can place this anywhere on your page. -->
    <div id="bookBar-bar">
    <span style="color:#676767;font-size:11px;margin:10px;padding:4px;">Loading...</span>
    <!-- Ajax Search Api and Stylesheet
    // Note: If you are already using the AJAX Search API, then do not include it
    // or its stylesheet again
    // The Key Embedded in the following script tag is designed to work with
    // the following site:
    // http://YOUR_SITE_URL_GOES_HERE -->
    <script src= type="text/javascript"></script>
    <style type="text/css"> @import url(;
    <!-- Video Bar Code and Stylesheet -->
    <script type="text/javascript"> window._uds_bbw_donotrepair = true;
    <script src="" type="text/javascript">
    <style type="text/css"> @import url(;
    <script type="text/javascript">
    function LoadBookBar() {
    var bookBar;
    var options = { largeResultSet : !false, horizontal : false, autoExecuteList : { cycleTime : GSbookBar.CYCLE_TIME_MEDIUM, cycleMode : GSbookBar.CYCLE_MODE_RANDOM, executeList : ["Google Code", "Sailing Ships", "PayPal"]
    bookBar = new GSbookBar(document.getElementById("bookBar-bar"), options);
    // arrange for this function to be called during body.onload
    // event processing
    <!-- ++End Book Bar Wizard Generated Code++ -->
  • slide 6 of 6

    Sample 2 - Embedded Viewer

    <!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN" "">

    <html xmlns="">

    <script src= type="text/javascript">



    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>

    <title>Google Book Search Embedded Viewer API Example</title>

    <script type="text/javascript" src=""></script>

    <script type="text/javascript">

    google.load("books", "0");

    function initialize() {

    var viewer = new google.books.DefaultViewer(document.getElementById('viewerCanvas'));







    <div id="viewerCanvas" style="width: 600px; height: 800px"></div>



Using Google Code

Do you want to bring your web pages to life? Add robust, interactive features to your web pages. This series of how-to articles walks you through adding Google APIs, simply, to your applications. Code samples in HTML & JavaScript included.
  1. Using Google Code: Part 1 - Search
  2. Using Google Code: Pt. 2 - Maps
  3. Using Google Code: Pt. 3 - AJAX Feeds API
  4. Using Google Code: Pt. 4 - Book Search