Amazon Associates book images into a blog post

This may already be on some other blog somewhere, but I couldn't find it, so I figured out how to do it myself.


Let's say you're a member of Amazon Assoc., and you want to embed book images into your post - like our Community Bookshelf. Here's what you do.

1. Just to piss Mathgimp off, we'll use the brilliant and witty Jasper Fforde book The Eyre Affair as our example. Go to "Build A Link" off of your Amazon Associates Page. You're given three options: Text, Image and Text, Image. I'm choosing "Image Only."

2. Right click on the book picture, and save the image somewhere on your computer. Don't rename it.

3. Copy the html in the box under step 3. Mine looks like this:

<a href="http://www.amazon.com/gp/product/0142001805?ie=UTF8&tag=stucinmary
-20&linkCode=as2&camp=1789&creative=9325&creativeASIN=0142001805">
<img border="0" src="21KTRVBW5AL._AA_SL160_.jpg">
lt;/a><img src="http://www.assoc-amazon.com/e/ir?t=stucinmary-
20&l=as2&o=1&a=0142001805" width="1" height="1" 
border="0" alt="" style="border:none !important; margin:0px!important;" /> 

4. Go to your blog, and create a new post. Paste the html from Amazon onto your screen. Then, click on the upload image icon and select the image you saved in step 2.

5. It'll give you a big, messy set of code that looks like this:

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" 
href="http://bp2.blogger.com/_DbpWQkSu3Bw/RqUfg5b0UHI/
AAAAAAAAACI/6L6ViJSGHZI/s1600-h/21KTRVBW5AL._AA_SL160_.jpg">
<img style="display:block; margin:0px auto 10px; 
text-align:center;cursor:pointer; cursor:hand;" 
src="http://bp2.blogger.com/_DbpWQkSu3Bw/RqUfg5b0UHI/AAAAAAAAACI/
6L6ViJSGHZI/s320/21KTRVBW5AL._AA_SL160_.jpg" border="0" 
alt=""id="BLOGGER_PHOTO_ID_5090509603845984370" /></a>

6. OK. Now comes the tricky part, so make sure you follow along exactly. Basically, the code above contains two links to the image: one that is the thumbnail image that appears in the post, and one to a larger version of the image, that will open in a new window. You want to substitute the Amazon link for the enlarged image link.

7. You do that by replacing the bolded part of the blogger image link here:

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) 
{}"

 
href="http://bp2.blogger.com/_DbpWQkSu3Bw/RqUfg5b0UHI/AAAAAAAAACI/
6L6ViJSGHZI/s1600-h/21KTRVBW5AL._AA_SL160_.jpg">

<img style="display:block; margin:0px auto 10px; 
text-align:center;cursor:pointer; cursor:hand;" 
src="http://bp2.blogger.com/_DbpWQkSu3Bw/RqUfg5b0UHI/AAAAAAAAACI/
6L6ViJSGHZI/s320/21KTRVBW5AL._AA_SL160_.jpg" border="0" 
alt=""id="BLOGGER_PHOTO_ID_5090509603845984370" /></a>

With the bolded part of the Amazon link here:

<a 

href="http://www.amazon.com/gp/product/0142001805?ie=
UTF8&tag=stucinmary-20&linkCode=as2&camp=1789&creative=9325&
creativeASIN=0142001805">

<img border="0" src="21KTRVBW5AL._AA_SL160_.jpg"></a><img 
src="http://www.assoc-amazon.com/e/ir?t=stucinmary-20&l=as2&o=1&a=0142001805" 
width="1" height="1" border="0" alt="" style="border:none !important; margin:0px 
!important;" /> 

Important! For a reason I don't understand, it ONLY works with "href" NOT "a href" -- do NOT copy "a href", or it won't work. Just "href," then the url for the Amazon link. Make sense?

8. Now, you have this code:

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) 
{}"href="http://www.amazon.com/gp/product/0142001805?ie=UTF8&tag=stucinmary
-20&linkCode=as2&camp=1789&creative=9325&creativeASIN=0142001805">
<img border="0" src="21KTRVBW5AL._AA_SL160_.jpg"></a<img 
style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; 
cursor:hand;" src="http://bp2.blogger.com/_DbpWQkSu3Bw/RqUfg5b0UHI/
AAAAAAAAACI/6L6ViJSGHZI/s320/21KTRVBW5AL._AA_SL160_.jpg" border="0" 
alt=""id="BLOGGER_PHOTO_ID_5090509603845984370" /></a>

At the very end of the code, delete the /a> so your code is closed with />

Which gives you this!




I think this works. Let me know if you have problems or find improvements!