I like book cover images because they provide clues about genre, tone, or publisher that help me decide if I want to click for more detailed information. Used sparingly, cover images stand out as spots of color in a sea of text. I use a method of creating image links that is easy for me. You may find a method that works better for you.
Here's an example of an image link:
The novel American Gods by Neil Gaiman, is a SciFi/Fantasy tale about how Old Norse gods migrated to the new world, exist among us disguised as humans, and battle the new gods of World, Money, Internet, etc. The invisible life of an ordinary human named Shadow becomes both tragic and heroic after he signs on as Odin's aide, sees more than he should, and asks life's big questions.
Task Summary
- Log in to Amazon so that your affiliate ID will be embedded into links you make with the Site Stripe widget or affiliate bookmarklet.
- Find the product page for your link destination
- Copy the product image to your computer
- Upload the image to a free image storage site (such as PhotoBucket) or to your web hosting server
- Add an img tag to your blog post, and set its src attribute to the location of the image file
- Create and copy the product link, then wrap the image in the <a> [anchor] tag
Procedural Details
1. After you find the product page for your link, copy the product or book cover image to your computer. There are two methods for getting the image.
- Method 1 - Use Amazon Site Stripe
If you use Site Stripe, click, "Link to this page." When the link builder wizard opens, right-click the image and save it to your computer, anywhere that's easy to remember. It's okay to change the image filename to something memorable. Images may not be altered except to resize.
- Method 2 - Add the product ASIN to the following link pattern:
| Size (approx) | Link |
|---|
| Small 50x75 | images.amazon.com/images/P/ASIN.01.THUMBZZZ.jpg |
| Medium 107x160 | images.amazon.com/images/P/ASIN.01.MZZZZZZZ.jpg |
| Large 317x475 | images.amazon.com/images/P/ASIN.01.LZZZZZZZ.jpg |
2. Get the product link using Site Stripe or the Affiliate Bookmarklet. The shortest link follows this pattern:
http://www.amazon.com/dp/ASIN/?tag=YOURTAGID
Plug in the ASIN and your affiliate tag:
http://www.amazon.com/dp/0060558121/?tag=myTag-20
If you use Site Stripe, click "Link to this page" at the far left of the toolbar. The link wizard makes a link that you can copy and paste. To make the link shorter, change gp/product to dp, and delete everything after the ? except your tag.
The Completed Link
The finished image link will look something like the one for American Gods, shown above. I've added an inline style to the img tag to float it left and wrap text around the right side:
<a href="http://www.amazon.com/dp/0060558121/?tag=myTag-20">
<img style="display:block; float:left; margin:0 15px 15px 0;
height:160px; width:107px;"
src="http://greenetea.com/images/amergods.jpg"
alt="book cover image" /></a>
In practice, it's better to add a style for .floatleft to your style sheet that you can reuse whenever you need to float an image left. A .floatright style would be the same except for the horizontal margins. The right margin would be 0, and the left one, 15px. The shorthand CSS for margins is clockwise: top right bottom left.
Blogger's upload image feature
Another way to add an image link to a post is to click the picture icon in blogger's post editor. Follow the prompts to upload your image to Picasa, where you have 1GB of storage. Then, in blogger, edit the image link's href attribute to point to the Amazon page instead of Picasa. Here's the result:
As you can see, using blogger with Picasa works fine with the medium-sized Amazon product image. I don't use this method because I have a website where I can corral and control images. If I were creating a shared photo album, Picasa would be a fitting choice for that purpose
I hope these instructions make sense of a task that should be simple.
