Use Your Own Associate Codes with the Amazon Spotlight Module


Er. This is a bit fly-by-the-seat-of-the-pants, and you'll probably want to adjust margins and spacing as you see fit, but here's what I did.

  1. Add an Amazon Spotlight Module and turn OFF everything in the "Display" tab except for the Amazon Price. You'll probably want to leave the module subtitle blank, as it starts looking too crowded up there.

  2. Go ye to Amazon Product Page and click "Link to This Page" up at the top. (I'm assuming you've got the Associates toolbar turned on.)

  3. Choose "Text Only" link and copy it. PASTE it into the Description Field of the Amazon Spotlight.

  4. Now we tinker. I suggest wrapping <p style="font-size: 20pt; padding: 10px 20px; background-color: [pick a color]; font-weight: bold;"> .... </p> around the whole kit and kaboodle. This makes the colored rectangular area, the background, and sets the font big.

  5. Next we need to make the link jump out. I STYLED the link, thusly: <a href="very long associates link" style="color: yellow; text-decoration: underline;">

    Now we've got the big bold headline across the top. Next, we're going to do something diabolical to force the "Amazon Price: Blah [BUY BUTTON]" over to the right, out of the way. I could do this any old way, but I'm lazy, and it just so happens that Amazon gives us this invisible one-pixel image which it uses as a security measure to make sure our link isn't being hijacked. The image's URL includes our associates code, and if it doesn't match the link, someone's pulling something funny. So anyway. A 1x1 pixel transparent image doesn't show up. But we can MAKE IT BIGGER with CSS, forcing what's under it to scoot over. I only had to do this because I chose to make my image BIGGER than the space the Amazon Spotlight reserves for an image!!! So.

  6. Still in the Description field of the Amazon spotlight module, look for some code that Amazon gave you to place wee image. Right now, it's got a margin of zero. Let's start editing right there. DELETE the part that says width="1" height="1".

  7. REPLACE everything in the STYLE of the image as follows:

    <img src="weird-ass long URL with your associate name in it" border="0" alt="" style="border:none !important; margin:0px !important; float: left; width: 220px; height: 40px; ">

    Float makes it sit side-by-side with whatever it bumps into. 220 pixels is the width of the image I chose plus a little extra. The height makes our spacer-image extend down into the area where the Amazon Price info is, forcing it over to the right. Amazon surely doesn't care if we stretch its graphic; it's just looking at the data in that URL to make sure we're legit.

    OKAY. NOW. Let's place the product image.

  8. Back to Amazon. When you say you want an "Image Only" link, it tells you to download the graphic and host it yourself. Curse you, Amazon! Okay. Do that.

  9. Copy the "Image Only" associates code Amazon gives you.

    Paste it into the BLURB BOX in your Amazon spotlight module, where you'd normally tell why this is a spiffy-cool product. (I.e. the gray area in my example above.)

  10. Replace Amazon's totally useless "something something .jpg" with the URL of your graphic.

    Now we need to scoot our graphic over. I made mine a big honking 200 pixels wide, much bigger than Squidoo's Amazon Spotlight module's graphic, so big it's pushing into the area normally reserved for the text blurb. That's okay, as long as I set the image to FLOAT LEFT so the text to the right scoots over to make room.

  11. So now we add a STYLE to the product image.

    <a href="big long associates link">*lt;img border="0" src="http://www.istad.org/lenses/amazon/sushi-cat-poster.jpg" alt="Funny Cat Poster: Sushi Chef" style="width: 200px; margin-left: -175px; margin-top: -38px; float: left;"></a>

    See what I did? I set the picture to 200 pixels wide. Then I scooted it LEFT 175 pixels, and UP a bit too to get it level with the Amazon price.

    Okay, we're in the home stretch. Time to make that blurb look pretty!

  12. You could just leave it as plain text, Squidoo's squinchy default. But let's add more visual weight to balance the rest of the stuff. So. After all the gobbledygook in the BLURB area, including another invisible img thingie, start coding:

    <p style="margin-left: 20px; background-color: lightgray; font-size: 16px; line-height: 22px; padding: 10px;">

  13. Okay, FINALLY, write the text part of the blurb! This is where I yakked about cats.

  14. If you want to add another associates text link in here for visual reinforcement, again, you can add CSS style to the link to color it. That is, after the a href="blah blah blah" put a style="color: something; text-decoration: underline;" or whatever CSS funky fontness you like.

  15. IMPORTANT: Copy and paste everything you've done to a spare text window, NOW, before you save, in case you make a typo and Squidoo punishes you by losing part of what you just did.

  16. SAVE. Examine the result to see if it looks wonky, and tinker with it.

  17. Once it looks PERFECT, save all the codes to a text document as a template and don't touch it.

  18. Then copy the template into a new, spare text window. For each new Amazon product, copy and replace the product code of the new product EVERYWHERE it appears in the template... download, upload, and change the URL of the image, and don't touch anything else!

    If you haven't used the template in a while, when you go to make a new Amazon Associates text link, copy the code they get STRAIGHT into a spare window, eyeball it, and make sure that the only difference between the URL they just gave you and the one in the template is the product number. If in doubt, replace the whole URL. But do NOT replace any of the styling, or you'll have to do that again.

    I could've given you a template. Except I couldn't, because it really varies by the shape product image you want, and how you want to lay it out. So instead I'm teaching you the IDEA, which you can apply. The good news is, once you've created a template you like, you can keep reusing it with minimal upkeep. The bad news is, if Squidoo ever changes the layout of the Spotlight module, you'll have a LOT of editing to do if it's pushed things around.

    I think my method works in such a way that even if Squidoo shifts things around, my codes will override it and do their own thing. But I can't promise.