Create an Amazon Image link

There are several ways to create Amazon image links in WordPress. This post describes how to download a product image from Amazon (or construct a direct URL to a product image), and then use the WordPress Upload/Insert Media wizard to upload the image (or specify the image URL), and create the image link.

Experienced web developers may prefer to upload images using the Dashboard/media library panel (or simply FTP) and create links manually. Newbies and other WordPress users will find the WordPress wizard convenient for uploading and creating an image link within the post editor.

The procedure for creating the Amazon image link above (to a book I read last summer) includes the following steps:

• Download the book cover image from Amazon's link builder wizard. You can right-click the image and save it to your computer OR right-click the link under the image and "Save target as" a file on your hard drive.

  If you do not want to download the image and then upload it to WordPress, you can link directly to the image on Amazon's image server. Be sure the test the link before you use it! The direct link pattern for the medium-sized image is:
  images.amazon.com/images/P/ASIN.01.MZZZZZZZ.jpg
  Replace ASIN with the 10-digit product ID, in this case, 0060558121:
  images.amazon.com/images/P/0060558121.01.MZZZZZZZ.jpg
   

• Highlight and copy the product link from the wizard. I suggest pasting it in Notepad or a text editor to keep it handy until you've finished creating the post.
  
  You can shorten the link from this (line breaks added for readability):
  http://www.amazon.com/gp/product/0060558121?ie=UTF8&
tag=greehaml-20&linkCode=as2&camp=1789&
creative=390957&creativeASIN=0060558121
  
  to this:
  http://www.amazon.com/dp/0060558121/?tag=greehaml-20
  
  using this pattern:
  http://www.amazon.com/dp/ASIN/?yourTagID
   
• In WordPress, add a new post, and in the HTML post editor, click the Upload/Insert image icon for guided instructions. Note that you could also use the wizard with an image already uploaded to your Media Library or with the direct URL you constructed.

Screenshots of the procedure for adding an Amazon image link in a post are shown below. See instructions for adding an image link to a WP sidebar following the screenshots.

Step 1 - Click the Upload/Insert Media icon

Step 2 - Click the Select Files Button

[Important! If you are using the direct link to Amazon's image, select the "From URL" tab instead of the "From Computer" tab, and enter the direct link you constructed as the "Image URL" instead of selecting a file as shown in Step 3.]

Step 3 - Choose the file to upload

Step 4 - Enter title and URL, click Insert into Post

Note that you don't have to include text for both the link's "alt" and "title" attributes. The alternate text displays when images are disabled in the visitor's browser and, in some browsers, on mouseover. Title text always displays on mouseover.

Step 5 - Check your link code in HTML view

Steps for adding an image link to your WP sidebar

• Copy the image to your computer.
   
• Highlight and copy the product link from the Amazon link builder and paste into Notepad.
   
• Open the WP Dashboard Media panel and click Add New. Follow the prompts to add the image to your WP Media Library. Copy the new image URL.
   
• Go back to notepad. In the <img> tag, find src="filename.jpg" and paste the image URL, starting with "http://", replacing the old src value. Copy the whole modified link.
   
• Open the Dashboard Widgets panel and drag a Text widget into your sidebar. Paste the link. A title is optional. Save the Text widget.

The link should look something like this:
<a href="http://www.amazon.com/dp/0060558121/?tag=greehaml-20"><img src="http://www.greenetea.com/wp-content/uploads/2009/10/417QGN93XKL._SL160_.jpg" alt="American Gods by Neil Gaiman" title="American Gods by Neil Gaiman" width="107" height="160" /></a>