30 April 2015

How to Embed a Google Book Preview in Your Website or Blogger Post

If you have a cool publisher that utilizes Google Book Preview, did you know that you can embed a sample of your book on just about any website? For those of you not familiar with the program, publishers can upload manuscripts to Google.  Via the power of 10,000 tiny internet elves a book page and preview is created for your title free of charge. The advantages of Google Book Preview is that Google makes the entire text of your book searchable. That means that anyone searching for keywords or phrases found in your book; there’s a chance a link to your book’s preview will come up in the search rankings. Also, within the preview readers can search the entire text of your book for keywords and phrases. Google also provides selling links to your book on the Google hosted preview page. To maximize the chances of converting a preview into a sale, you should add selling links as close to the preview as your layout allows.

Those are the upsides to the Google Book Preview program. The potential downside is that at least 20% of your book is previewed. This percentage can be adjusted up by your publisher, but you agree to a minimum of 20% of your content being shown. This isn’t as much of an issue for fiction writers as it is for their nonfiction compatriots. With fiction, readers can get enough content to see what your writing style is and if the book intrigues them enough to make a purchase. For nonfiction books, anyone doing a research paper can stumble on a relevant passage and cite your work without making a purchase. Our feeling is that if you totally lock down a book’s content, no one will ever buy it. So our evaluation is that the risk of letting content out into the world is worth the reward of finding new readers.

Now that you’re familiar with the program, it’s time to get into the nerdy aspects of embedding a preview into your website. We’re going to use one of our new releases, Hippocrates Wept by William F. Quigley, M.D., as an example piece. Click here to view Hippocrates Wept Google Book page. It should open up in another window so you can switch back and forth as needed. If you want to follow along with another book that’s part of the Google Book Preview program, enter the book’s ISBN-13 or title in the search bar and it should pop up.

The first page you’re looking at is Hippocrates Wept’s base page. If you click on the book’s cover and that will take you to the book’s preview page. On the top bar, you’ll see a number of icons. Click on the icon that looks like a chain link. We’ve circled the icon in the image below.

Google Book Preview Embed Icon

When you click on the link icon, you’ll see two options: “Paste link in email or IM” and “Embed.” Highlight the code in the embed box and paste it in Word or Notepad so you can work with the code itself. Here’s the code for Hippocrates Wept, it probably won’t show up in one line on your screen because of the spacing of used in code, so just know that the code is between the < and > symbols. <iframe frameborder="0" scrolling="no" style="border:0px" src="http://books.google.com/books?id=LgTjBwAAQBAJ&lpg=PP1&pg=PP1&output=embed" width=500 height=500></iframe>

Without getting too geeky into the coding, here’s the concept behind it. The iframe command basically says, “show the full sized contents of one web page on another.” Within the parameters of the iframe command, we can change a few of the options.

The first is frameborder. Changing the 0 to a 1, within the quotation marks will put a default border around the entire preview. The width, color, and style of your preview’s border can be changed by altering the value in the style=”border:0px” portion of the code. We’ve never seen the point in using a border with our website configuration. If you really want a border, you can find out more about the command and border values at this link.

The second is scrolling. This command will place scroll bars within the iframe. Using scroll bars is pretty handy if you don’t have a lot of vertical or horizontal space where you’re placing the preview on your website. The options for the scrolling command are: yes, no, and auto. Yes and no are pretty obvious, and auto will drop in scroll bars if they’re needed given the space you’ve allotted the iframe on your web page. You can find out more about the iframe scrolling command at this link.

Finally, we can change the size of how the preview is displayed on your web page by altering the values under width and height. With a simple iframe command, you can’t shrink the size of the target page. Think of an iframe like you’re looking at the target page through the window of your width and height values. We’ve found that a width of 500 and a height of 700 to 800 will accommodate a full page of your book’s preview. The preview flows one page into another, so you’ll have to play around with both height and width to get the sizing the way you want it.

To give you an idea of how this translates into real life, this code is associated with the preview of Hippocrates Wept on our website.

<iframe frameborder="1" scrolling="auto" style="border:15px" src="http://books.google.com/books?id=LgTjBwAAQBAJ&lpg=PP1&pg=PP1&output=embed" width=500 height=800></iframe>

Now all you have to do is to add the code into your web page. If you’re using a drop and drag elements type of web hosting site (like Yola, Squarespace, or Go Daddy’s Website Tonight) just drop and drag the HTML Code widget where you want the preview on your web page. Then copy and paste the iframe code there and you’re good to go. If you know enough code to code your own website, you didn’t need this tutorial in the first place...

If you’re using Blogger, you’ll have little more coding to deal with. Blogger doesn't really like the iframe command when using Google Book Preview. So you'll have to use the hunk of code below. You can change the height and width of the preview by altering the height and width values towards the bottom of the code. To change the book that is previewed, simple change the ISBN number to which ever book you'd like to show up on your blog. Simply go to the HTML tab on your compose screen and drop your modified code in where you want the preview to show up. The easiest way to do this if you're not very familiar with coding is to look for text within a paragraph. After the code for the paragraph terminates, hit the enter key and paste the code. We've included a couple of <br /> (single line break) codes above and below the preview code to make sure the preview doesn't overlap the text of your blog post. The code below will yield the preview you see in this blog post.

<br />
<br />
<html xmlns="http://www.w3.org/1999/xhtml">
    <title>Google Books Embedded Viewer API Example</title>
    <script src="https://www.google.com/jsapi" type="text/javascript"></script>
    <script type="text/javascript">
      google.load("books", "0");

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

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

That’s about it for embedding a Google Book Preview in your website or Blogger post. The preview can be a powerful tool for promoting your book, and we hope you sell a million.

Google Books Embedded Viewer API Example

No comments:

Post a Comment