My Amazon Links Beat Squidoo's Amazon Links

The following template makes a large-font product headline / title above a side-by-side product image and text description. It mimics Squidoo's Amazon Spotlight Module:

J.R.R. Tolkien: Artist and Illustrator

This is similar to the Amazon links showcased on my How to Get More Clicks, Sales tutorial. It's effective for a "five best [product]" page, product comparisons, and book review lenses like this one.

The large product image draws the eye. The text area at the right gives you space for a mini-review. Then there's space for a large or small "Buy on Amazon" button, a good strong Call to Action that looks official.

Depending on the size and shape of the product image, you may wish to play with this layout. For example, you could move the product title to the start of this text area, instead of above the image. Or you could set the width of the "buy" button slightly smaller, or move it to the right-hand side (float: right;) near the end of this paragraph.
 

How to Create This Look:

1. Find the product on Amazon, choose "Link to this Page," and click the "Text Only" tab.
2. Copy the HTML code Amazon gives you and paste it into a Squidoo text module.
3. Add a style to the link's text: bold, underline, and larger size. Do this by inserting the code marked red into the Amazon link:

<a href="LongAmazonLink" style="font-size: 150%; font-weight: bold; text-decoration: underline;">Product Title</a>

4. Now we'll add the image. In the Squidoo Text Module, hit return and add the following:

<p style="float: left; margin-right: 20px; width:200px;">

5. Copy the "Image Only" HTML code from Amazon's linkbuilder, and paste it into your Text Module.

6. Now we'll increase the size of the image (change "S" to "M" -- see the code example below) and add padding as needed. Insert this into the MAIN image tag, and watch out; there's a second image with 1x1 height/width which is NOT the product image, but something Amazon uses to track views.

<a href="longAmazonLink"><img border="0" src="http://ws.assoc-amazon.com/widgets/q?_encoding=UTF8&Format=_ML110_&ASIN=B003O6EATE&MarketPlace=US&ID=AsinImage&WS=1&tag=greekgeek-20&ServiceVersion=20070822" style="width: 200px; padding-bottom: 10px;" /></a>

7. Copy the code that makes the Amazon link: the long <a href="longAmazonLink"> which ends in something like &creativeASIN=#####.

8. Now we wrap that link around the Amazon "Buy" button.

<a href="longAmazonLink"><img src="http://tinyurl.com/amzbtn" style=" width: 180px; margin-left: 10px;"></a>

In step 6, you may need to adjust the size of the image or add extra padding above (padding-top), below (padding-bottom), right (padding-right). If the image Amazon serves up has a lot of white space in the graphic on the left-hand side, you can even compensate by setting its marging to something like margin-left: -50px to tell it to scoot 50 pixels farther left.

The New Amazon Kindle

The showcase example I gave above is HUGE. Big pictures and big buttons tend to get more clicks. But sometimes, you want a smaller product image and more text. Or, perhaps, you just want a more subtle approach -- especially if you're listing five or six products with mini-blurbs next to them for comparison.

How to Create This Look:

1. Click "Link to This Page" while viewing an Amazon product. Choose "Image Only" and "Large Image." Copy the HTML code and paste it into your text module.

2. Insert the code in RED to make the image float to the left with text filling in the space to its right:

<img border="0" src="http://ws.assoc-amazon.com/widgets/q?_encoding=UTF8&Format=_SL160_&ASIN=B0051VVOB2&MarketPlace=US&ID=AsinImage&WS=1&tag=greekgeek-20&ServiceVersion=20070822" style="float: left; padding-right: 10px;">

(If the product image already has whitespace built into it, you may not need any padding.)

3. Now to make the headline. Copy the long <a href="blahblahblahblah"> link from the start of the image code you just put in the text module.

Paste this link at the end of what you've got so far.

4. Add some style to the headline's link:

<a href="reallyreallyLONGAmazonLink" style="font-weight: bold; font-size: 120%; text-decoration: underline;">

5. Write the headline (clickable text) and close it off with </a>

6. (Optional) I haven't really figured out the best place for the "buy" button, but this is where I stuck it. Again, you'll need to copy that really long Amazon link and paste it: <a href="reallyreallyLONGAmazonLink">

Then paste the code to make the "buy" button image and close off the link:

<img src="http://tinyurl.com/samzbtn" style="float: right; vertical-align: middle;"></a>

7. Skip two lines and write your blurb.

8. (Optional) Repeat steps 1-7 for more products.

I actually like "thumbnail mode" in Squidoo's Amazon module. It works best with interesting-looking images that tantalize the reader into clicking them (for example, funny posters with captions they might want to read).

You may or may not want the link in the headline; it will tend to get more clicks than the images. (People often click on images, but it's not quite as obvious they're links.)

Check Out These Adorable Webkinz Toys!

HedgehogRaccoonWolfHimalayan Cat

How to Create This Look:

1. (Optional) Start a paragraph for the headline:

<p style="text-align: center; font-weight: bold; font-size: 130%;">

2. (Optional) Go to Amazon and try different search terms -- maybe searching in just one department -- until you get an attractive list of products. Click my "Adorable Webkinz Toys" link above and you'll see what I mean.

3. Once you're satisfied with the selection, click "Link to This Page" at upper left, change "Name Your Link" to whatever clickable text you wish (here, I chose "Adorable Webkinz Toys"), then copy the HTML code and paste it right after the paragraph code in step 1.

4. Finish off that paragraph with </p> hit enter/return, and start a new paragraph with <p>     This begins the row of product images.

5. Now find a product you want to feature. Click "Link to This Page," and choose "Image Only." Copy that code and paste it without skipping a space.

6. Now we adjust the image's size. If you look closely at the image code, you'll see something like:

http://ws.assoc-amazon.com/widgets/q?_encoding=UTF8&Format=_SL110

Change "110" (pixels wide) to "150".

7. Now, farther along in that same image code, we're going to add a style so that all the graphics line up vertically, like beads on a string held horizontally. Insert the RED code:

<img border="0" src="http://ws.assoc-amazon.com/widgets/q?_encoding=UTF8&Format=_SL150_&ASIN=B0051VVOB2&MarketPlace=US&ID=AsinImage&WS=1&tag=greekgeek-20&ServiceVersion=20070822" style=" vertical-align: middle;">

8. Without skipping a line, repeat steps 5-7 for each product image. You'll have room for about 3 more.

9. Finish off the row with </p>

10. Is one image a lot taller than the rest, so that it looks silly? Go back to step 6 and change the pixel size as needed (probably, you want it smaller, or you may want to increase the size of the other images instead).

11. (OPTIONAL) Now, about those captions. They're a bit of a PITA, but can be handy. Want to try? Then, WITHOUT starting a new line, begin the row with:

<p style="clear: left; text-align: center; font-size: 9pt; font-weight: bold; ">

12. Now hunt in your code above for the first product's link, which will look something like:

<a href="http://www.amazon.com/reallyREALLYlongLINK">

Copy it, and paste it at the end of what you've got. Include the > at the end.

13. However, you're going to insert the following RED code into the link:

&lta href="http://www.amazon.com/gp/product/B0013B0I0C/ref=as_li_ss_il?ie=UTF8&tag=greekgeek-20&linkCode=as2&camp=217145&creative=399369&creativeASIN=B0013B0I0C" style="display: block; width: 140px; float: left; margin-right: 5px; margin-left: 5px;">

NOTE: the width here should be ten less than the image's width (because of the margins). If you adjusted the image width, you'll need to adjust the width here.

14. Without skipping a line, write the clickable text you want. (For example "Himayalan Cat" in the example above). Then finish of the link with &lt/a>

15. Repeat steps 12-14 for each product.

16. When you finish the row, close it off with

</p>

1. While viewing a product in Amazon in a spare browser tab, cick "Link to This Page." Set it to "Image Only" and copy the HTML it gives you.

2. Paste it into the "description" at the top of an Amazon Spotlight Module.

3. Change/Add the RED code (change S to M to get a larger format graphic):

<img border="0" src="http://ws.assoc-amazon.com/widgets/q?_encoding=UTF8&Format=_ML160_&ASIN=0596001622&MarketPlace=US&ID=AsinImage&WS=1&tag=greekgeek-20&ServiceVersion=20070822" style="float: left; margin-right: 20px; width: 180px; margin-top: 30px;">

You may have to fiddle with the image's margins a bit.

4. Copy the long product link at the very start of the mess Amazon gave you:

<a href="http://www.amazon.com/gp/product/0596001622/ref=as_li_ss_il?ie=UTF8&tag=greekgeek-20&linkCode=as2&camp=217145&creative=399369&creativeASIN=0596001622"

Paste that at the end of what you've got so far. Notice I did NOT grab the final > yet.

5. Without skipping a line, add the following code: style="text-decoration: underline; font-size: 140%; font-weight: bold;"

6. Without skipping a line, add:

>Headline Goes Here!</a>

Replace "Headline Goes Here!" with whatever clickable text you want.

7. Write the product review as you normally would in the "Why is this worth spotlighting?" box.

8. Click the "Display Options" tab and turn off Picture and Title. You've added those manually!

9. Save.