How to Use Kindle Instant Preview

As you will have seen on my Books Page, I have covers and previews up using the Kindle Instant Preview system from Amazon.

I find this is the easiest way to make sure I have the latest covers displayed and to give my readers the option to see a preview of the titles quickly and easily. And it's very simple to do!

This is what Amazon has to say: Kindle Instant Book Previews

Now this is a great getting started guide, but here are a few things I picked up along the way.

This is the pop-up as it first appears:
Pop-out from Amazon showing options for linking or embedding our books.

There are 2 options for the preview:

  • get a link (URL) to open to the preview - this is great for dropping into text or when we just want a simple link with no fuss
  • embed on your site (HTML) to allow us to show the cover and various links on our site - this is what I have been using for the displays on my Books Page.
If you have an Amazon Associates ID for commissions then pop it in the box - if you don't then just ignore that part.

Once we have chosen the embed option, we get a different preview and a new set of options at the bottom. We need to click on the "See more options" link (marked in red below) for them to show:

Now there are "Small", "Medium" and "Large" default options for displaying the book and the buttons, but only the "Large" option show the "Buy", "Share" and "Preview" options - the "Small" and "Medium" both miss out the "Share".

However, I don't know about you, but I find the "Large" option far too big for my site and the number of books I wish to display. Hence I did a little playing. To get a smaller cover display and all the buttons do the following:
Put 260 in the left box, which is the minimum width to see all the buttons.
260 in the width (left) box
Code box from the top of the pop-up
Code to copy

  1. Pick the "Custom" option from the bottom of the Image Size list.
  2. Choose 260 for the width (this is the smallest that will show up all the buttons).
  3. Copy the code from box at the top.
  4. Paste it into the webpage.
  5. Edit the "height" value in the code to shrink the cover to whatever size is needed - I use 250.
    <iframe type="text/html" width="260" height="433" frameborder="0" allowfullscreen style="max-width:100%" src="https://read.amazon.co.uk/kp/card?asin=B004UC4YLU&preview=newtab&linkCode=kpe&ref_=cm_sw_r_kb_dp_Y1vmEbNCJTHN4&tag=wittpres-21" ></iframe>
    edit to
    <iframe type="text/html" width="260" height="250" frameborder="0" allowfullscreen style="max-width:100%" src="https://read.amazon.co.uk/kp/card?asin=B004UC4YLU&preview=newtab&linkCode=kpe&ref_=cm_sw_r_kb_dp_Y1vmEbNCJTHN4&tag=wittpres-21" ></iframe>
    Do not touch the width value!
  6. Save it to get the following.


No comments:

Post a Comment

Thank you so much for reading. I love to hear from people. Please leave your comments below.

Subscribe to: Posts (Atom)