Display Multiple Kindle Samples on One Page

If you have more than one “Kindle for the Web” sample on a single page, the display may be mangled. Yesterday, someone showed me an example on a multiple-post blog page. The second book sample was literally “jumping up” from its own post into the previous post, directly under the first book sample.

If you have this problem, there is a very easy fix. You’ll have to change one tiny thing in the “embed” code Amazon supplies for each sample book except the first one. Once you see the explanation, it will make perfect sense.

Like the Edsel, Kindle for the Web has come and gone, replaced by Kindle Cloud Reader. When the examples stop working altogether, I’ll trash this page. Until then, they’re an example of a flash-in-the-pan that had a few brilliant, but somewhat buggy moments.

Let’s say our first sample is for Ken Follett’s new bestseller, Fall of Giants and the second, for Peter Carey’s Parrot and Olivier in America. The embed code for the book samples looks something like this (with added line breaks for clarity):

<div id='kindleReaderDiv'></div>
<script type='text/javascript'
src='http://kindleweb.s3.amazonaws.com/app/KindleReader-min.js'></script>
<script>KindleReader.LoadSample({containerID:
'kindleReaderDiv', asin: 'B0052RDHTM', width: '500', height: '411', assoctag:
'AffiliateID-20'});</script>

<div id='kindleReaderDiv'></div>
<script type='text/javascript'
src='http://kindleweb.s3.amazonaws.com/app/KindleReader-min.js'></script>
<script>KindleReader.LoadSample({containerID:
'kindleReaderDiv', asin: 'B0036S4AOU', width: '500', height: '411', assoctag:
'AffiliateID-20'});</script>

Notice that the first part of each code block is a div with an id of kindleReaderDiv. Also, each book sample is supposed to be rendered inside this div because there is a command in the script that specifies it as the containerID:

KindleReader.LoadSample({containerID: 'kindleReaderDiv' ... });

Since the containerIDs are identical, the second sample will pop into the first div named “kindleReaderDiv”. To prevent this ugly and confusing problem, just change the name of the second book sample div to kindleReaderDiv2 and make the KindleReader.LoadSample command specify kindleReaderDiv2. Increment the number for as many samples as you have on the page. Problem solved!

The two samples below have an empty paragraph between them, as they should, because Peter Carey’s book container has been renamed in the code block. Without renaming, the two samples are abutted without the blank line: