The Business of Writing: Advanced Applications of the Amazon Kindle Book Previewer

STOP WISHING. START DOING.
c2015 by zzoplanet.
Depositphotos ID:86051516.

Being a programmer for the past four decades means I like to experiment with software to get it to do exactly what I want.

Strike that. I =LOVE= enhancing code! And now you get to benefit from my experimentation. :)

Last time, I introduced you to the nifty book-blogging tool that is the Kindle book previewer. In case you need to catch up, you may find my commentary on this blog post.

Today on The Maze, I get even more technical by offering ways to tweak the code to better fit the needs of your blog.

I offer two customization options, both of which refer to making modifications to the default HTML code fragment that Amazon gives you when you click on the "<Embed>" hyperlink on your Kindle book's product page (located with the other share options below the "Add to List" command bar).

The default HTML code fragment Amazon gives you follows this format:

<!-- AMAZON EMBED CODE DEFAULT HTML FRAGMENT: -->

<iframe type="text/html" width="336" height="550" frameborder="0" allowfullscreen style="max-width:100%" src="https://read.amazon.com/kp/card?asin=Your_Books_ASIN&preview=inline&linkCode=kpe&ref_=cm_sw_r_kb_dp_mUS4wb0MK4WVG&tag=Your_Affiliate_ID" ></iframe>

<!-- END DEFAULT HTML FRAGMENT -->

Once you replace Your_Books_ASIN and Your_Affiliate_ID (or delete &tag=Your_Affiliate_ID if you are not an Amazon Affiliate), this will cause the preview to be displayed on the page with no blog text beside it, like so:



This display is fine for a quick spotlight post, but blog visitors can be impatient, so if you have a lot of information to impart, you might want to consider:

Modification 1A: Making the book preview smaller

The basic way to reduce the preview size is to change the height= parameter from its default of 550, as in this code fragment:

<!-- AMAZON EMBED CODE HTML FRAGMENT 1A:
HALF HEIGHT  -->

<iframe allowfullscreen="" frameborder="0" height="250" src="https://read.amazon.com/kp/card?asin=Your_Books_ASIN&preview=inline&linkCode=kpe&ref_=cm_sw_r_kb_dp_mUS4wb0MK4WVG&tag=Your_Affiliate_ID" style="max-width: 100%;" type="text/html" width="336"></iframe>

<!--END FRAGMENT 1A -->

I went through several iterations, modifying the height= parameter to get a version that was as small as possible without adding a clunky-looking scroll bar. Applying my book's ASIN in place of Your_Books_ASIN, the result looks like:




Note that all of Amazon's options to buy, share, and preview are available. My sidebar needed a narrower version, however, so with further experimentation I hit upon:

Modification 1B:
Making the book preview narrower as well as smaller

To get the preview pane to appear narrower, you must modify the max-width parameter AND enclose it in a table. Just modifying max-width isn't enough, nor will it work if you enclose the <IFRAME></IFRAME> within a <DIV></DIV> section.

If you don't believe me, I invite you to copy the following code fragment, and strip out the <TABLE>, </TABLE>, <TBODY>, </TBODY>,<TR>, </TR>, <TD>, and </TD> tags:

<!-- AMAZON EMBED FRAGMENT 1B:
HALF HEIGHT AND HALF WIDTH: -->
<table>
<tbody>
<tr>
<td>
<iframe allowfullscreen="" frameborder="0" height="250" src="https://read.amazon.com/kp/card?asin=Your_Books_ASIN&amp;preview=inline&amp;linkCode=kpe&amp;ref_=cm_sw_r_kb_dp_ABj3wb11WCT68&amp;tag=Your_Affiliate_ID" style="max-width: 50%;" type="text/html" width="336"></iframe>
</td>
</tr>
</tbody>
</table>
<!-- END FRAGMENT 1B -->

Note that I changed max-width to 50% in addition to making height=250. These changes yield:



The Amazon "SHARE" option disappears, but of the three, that was the option I was most willing to sacrifice for the sake of blog aesthetics.

And now for an even more advanced application:

Modification 2: Floating the book preview

I like to display a book cover on one side with text flowing along the other side. My default post layout when I'm spotlighting someone else's book is to display their cover in the top left corner of the post with text flowing past on the right. At the end of the post—as with today's—I display whatever book of mine that I'm featuring on the right, with the text on the left.

Fragment 2 gives you the former option:

<!-- AMAZON EMBED CODE HTML FRAGMENT 2:
BOOK COVER WITH TEXT BESIDE IT -->

<div class="separator" style="clear: left; float: left; text-align: center;">

<iframe allowfullscreen="" frameborder="0" height="550" src="https://read.amazon.com/kp/card?asin=Your_Books_ASIN&amp;preview=inline&amp;linkCode=kpe&amp;ref_=cm_sw_r_kb_dp_Omd4wb0K7BQ5Q&amp;tag=Your_Affiliate_ID" style="max-width: 96%;" type="text/html" width="336"></iframe>

</div>

<!-- END FRAGMENT 2 -->

This fragment yields the following display, with subsequent blog text flowing past it on the right:

To display the cover on the right and the text on the left, change clear: left; float: left; to clear: right; float: right; within the <DIV> tag.

Also, I changed the max-width attribute to "96%" so that the blog's text does not appear crowded, but the "BUY", "SHARE", and "PREVIEW" options still appear within the book's preview pane. I discovered that at 95%, the "SHARE" option disappears, which isn't entirely a bad thing, but it looks a little odd underneath an otherwise large book cover.

The other way to simulate floating would be to set up a table with two columns, one for the cover and the other for the text. The basic layout for a one-row, two-column table is:

<TABLE><TBODY>
<TR>
<TD>Whatever goes in row 1, column 1</TD>
<TD>Stuff for row 1, column 2</TD>
</TR>
</TBODY></TABLE>

The disadvantage (other than the HTML's complexity, which can lead to more mistakes being made) is that if you have a great deal more text to display than the book's cover is tall, the you will wind up with a lot of space above and below the cover, while the text's table cell is completely full. But if those issues don't bother you, then by all means go for it.

Happy coding! :D

***

BTW, I'm running a giveaway for an e-copy of Dawnflight!
To enter, click HERE.

Last month's copies of Kings got snapped up fast, so don't delay; enter today!

MailChimp subscribers to The Dawnflier receive exclusive giveaway opportunities.
Subscribe today so you don't miss out!

***

All this month, you are invited to…

— Follow Kim on Twitter
— Follow Kim on Pinterest
— Subscribe to Kim's YouTube channel
— Leave a comment on any page of The Maze, especially if you have done the Twitter, Pinterest, and/or YouTube follow<

… and each action this month is good for one chance to win a copy of any of Kim's e-books.

Please enter often, and good luck!