さまざまの言葉… random items

July 3, 2008

How to Put Amazon Affiliate Links on Your WordPress.com Blog

Filed under: How To — rithban @ 4:51 am
Tags: , , , ,

Amazon associates have had some gripes with the free WordPress.com (WP) site. WP places some technical restrictions on blog features in order to

  1. prevent nasty people turning WP into an anti-security weapons platform, and to
  2. prevent the avaricious from turning WP into the scam capitol of the world.

This, unfortunately breaks some of the shiny tools that Amazon provides to their associates. This is neither good nor bad, it’s just an unfortunate collision between two companies with mismatched goals.

Here are my personal notes for adding an Amazon associate link to a WordPress.com blog. It doesn’t look as nice as the other Amazon tools, but it’s completely functional. I’m placing them in a public space for others’ benefit.

The Familiar Part

The following should be familiar.

  1. Log into your Amazon Affiliate account.
  2. Click on “Build Link/Widgets”.
  3. Click on “Product Links”.
  4. Search for the product you desire to showcase.
  5. Click on the corresponding “Get HTML” button.

At this point, you cannot use the fancy “Text an Image (Enhanced Display)” option. WordPress.com will automatically strip out the floating “iframe” code. The iframe code allows Amazon to insert its web content into a rectangle on your screen.

The next best thing is to use the “Image Only (Basic Display)” option. You’ll need an extra couple of steps to get this to work — but it will work.

Copy the Picture to Your Blog

  1. Under “1. Select Link Type”, click on “Image Only (Basic Display)”. Wait for your browser to refresh.
    ScreenCapture-001.png
    Illustration for Step 1.

  2. Copy the HTML displayed in the box below, and paste it into your blog article. Keep moving; we’re not done yet.
  3. We need to upload the picture into your WordPress blog. Right click on the picture of your item, and save the image to you hard drive. Mac OS X users can simply drag and drop. Note! Do not change the name of the file. The name will be long and ugly, but that’s how it is in the HTML that you copied into your blog article in the previous step. (True geeks, yes, you may hack the HTML if you wish. You know how.)
    ScreenCapture-002.png
    Illustration for Step 3.

  4. In your WordPress.com blog, click on the “Add Media” picture button. If you’re not sure which is the picture button, hold the mouse over the first icon. A balloon will appear saying “Add an Image”.

    Illustration for Step 4.

  5. Click on the “Choose files to upload” button.
  6. Select the picture’s file.
  7. Give appropriate text in the “Caption” and “Description” boxes.

The Tricky Part

Here’s the tricky part. We have some objectives:

  1. Fix the Amazon.com HTML so the picture appears and the associate link works.
  2. Upload the picture to WordPress.com
  3. Prevent WordPress.com from inserting new HTML.

Here are the steps to do that.

  1. Look in the “Link URL” box. This displays the URL of the picture after it is uploaded. Highlight, then copy everything.

    Illustration for Step 1.

  2. Click on “Save all changes”. Do not click on “Insert into Post”!

    Illustration for Step 2.

  3. You’ll see the screen clear, and the word “Saved” appear. It doesn’t stand out very well, but if you see it, then all is well.

    Illustration for Step 3.

  4. Close the file upload screen by clicking on the small “X” in the upper right.

    Illustration for Step 4.

  5. Go to the HTML code that you copied and pasted from Amazon.com. Locate the HTML for the picture. It begins with:
    <img border="0" src="

    It may also look like:

    <img src="

    The variations don’t matter. The important thing is the src="" part.

  6. Notice that the name of the picture file comes immediately after that last quotation mark ("). Highlight everything up to (but not including) the next quotation mark (").

    Illustration for Step 6.

  7. Paste the missing HTML in (1) above.

    Illustration for Step 7.

  8. Now save your draft and check it. You’ll know that you have it right if you (1) see the picture, and (2) see the Amazon.com preview come up when you hover over the picture.

    Illustration for Step 8.

You did it!

Extras

I was asked, “How do I get the picture to justify right, left, or center?”

That’s a great question. In HTML, pictures start with the text:

<img

Options appear (separated by spaces) afterwards. Finally, the end of the picture is denoted by a single right angle bracked (>) also known as a “greater than sign”.

To cause the picture to center, make the starting text look like:

<img align="center"

Remember to ensure that a space follows the final double quote (“).

To cause the picture to stick to the left side of the text, use:

<img align="left"

And finally, to cause the picture to stick to the right side of the text, use:

<img align="right"

A (Maybe) Helpful Tool

You may also want to try a free helpful tool for fixing Amazon associate links.


Edits:

2008-0703
Made corrections and simplifications.

Post Script: The WordPress.com restrictions only exist on the free WordPress.com blog hosting service. The restrictions do not exist on sites that run their own personal WordPress.org installations. (Note the .com vs. .org difference.)

92F3C843-9836-48C1-876A-B086F7164BE1.jpg

This specific article is licensed under a Creative Commons Attribution-Noncommercial-Share Alike License. Click the link for details.

About these ads

28 Comments »

  1. Hi there,
    I can’t seem to make it work and not really sure why this is. I hope you have a few min to help me diagnose this issue.

    The product Amazon URL is:

    My image URL is: http://innersky.files.wordpress.com/2008/07/41kth2txnsl__sl160_.jpg

    For my final HTML input, I inserted:

    The picture doesn’t appear and not certain what I did wrong. Would love your assistance!! thank you!

    Comment by innersky — July 22, 2008 @ 8:08 am | Reply

  2. Thank you so much for this very helpful entry. I was able to put picture and link on my website just by following the simple instructions.

    I have also taken it a step further and put the graphic in the first column of a simple table and a description in the second column.

    Comment by yourhottopics — July 30, 2008 @ 4:57 pm | Reply

  3. I just wanted to say thanks for the tips. I got it to work on my site without any problems.

    Comment by generalmcnugget — October 15, 2008 @ 3:10 pm | Reply

  4. Hi,

    Really helpful, thankyou so much.

    Precilla:-)

    Comment by precilla3066 — October 26, 2008 @ 2:14 pm | Reply

  5. thanks for your info. this is what i want

    Comment by grand — June 17, 2009 @ 5:00 am | Reply

  6. Thank you so much. It works !!!!!!! Yahooo !!!

    Malar

    Comment by microshepherd — October 3, 2009 @ 3:24 pm | Reply

  7. Hi i got to “The Tricky Part” but there wasn’t a link in the “Link URL” Box!
    Where have I gone wrong? :/

    Comment by djheroblog — October 25, 2009 @ 9:15 pm | Reply

  8. Hi, there are two tags in the HTML code. Do you need to change the src attribute for each?

    Comment by Angus Miranda — November 1, 2009 @ 1:31 am | Reply

  9. Many thanks – really helpful. Nice clear instructions. Top dog!

    Comment by The Facilitator — December 9, 2009 @ 9:01 pm | Reply

  10. I developed friends who need a tool for Blog Site by WordPress.

    Free WordPress Plugin for Amazon Affiliate : http://8plus2.Co.CC

    Comment by deepcheap — March 23, 2010 @ 1:29 am | Reply

  11. Thank you! This was so much help!

    Comment by fakinittechsupport — March 25, 2010 @ 3:12 am | Reply

  12. Cheers, I really appreciate the info. I have wanted to do this for ages, and so far I have only been able to do the boring text links! I need to also work out how to get the text to wrap around it as that will make the blog look more professional but you may have covered this too!

    Comment by FinancialRadDeveloper — April 28, 2010 @ 9:34 am | Reply

  13. thanks a lot!

    Comment by drexu — June 14, 2010 @ 9:09 am | Reply

  14. Ahhhhh you saved me! Thanks for putting these instructions up!

    Comment by fifteenspatulas — December 2, 2010 @ 12:03 am | Reply

  15. Very nice! Is there some way you can make a guide on how to do this with clickbank affiliate links? I’d really appreciate it.

    Comment by jarondawizard — December 5, 2010 @ 11:06 pm | Reply

  16. It seems to work for me, but without the mouse hover image.

    Comment by Lyle Raymond — February 21, 2011 @ 5:54 am | Reply

  17. Hi, took me a few goes but I finally got it working. Thank you for the clear instructions and the images, they really helped.

    Comment by mrslangford — March 5, 2011 @ 1:31 am | Reply

  18. It seems the “image only” feature is now missing in Amazon’s HTML generator. Anyone else notice this?

    Comment by Lyle Raymond — March 15, 2011 @ 3:48 am | Reply

  19. This is pretty easy to do using widgets on WordPress.com. Upload your image, use the image widget, link to your image then and just put your amazon affiliate link in the link section. Ta-da.

    Comment by Chris — September 24, 2011 @ 9:10 pm | Reply

    • Thanks for the tip. It worked great and was easy.

      Comment by Michael Wilson — May 30, 2012 @ 11:20 pm | Reply

    • Hi Chris, I did this. The thing is, when I paste the amazon affiliate link in the link section and hit save, the link is gone. When I click the image on the blog It’s not going anywhere. What can you suggest? Thanks.

      Comment by porschecadiz — October 4, 2012 @ 5:01 pm | Reply

      • Don’t be bothered. I just missed the http:// part. It’s working now. Great idea of yours. Thanks.

        Comment by porschecadiz — October 4, 2012 @ 5:04 pm

  20. Thanks it work for me, it is really nice and interesting
    information, it make me very happy to know about a such tips, very cool…

    Comment by Shamoon (@Shamoon633206) — March 16, 2012 @ 9:22 am | Reply

  21. Very helpful! Thank you very much. (fwiw, I run my own WP site, and it still didn’t like the Amazon iframe.)

    Comment by David Kay (@dbkayanda) — June 18, 2012 @ 4:59 pm | Reply

  22. Thank you! This is exactly what I needed

    Comment by traigo12 — April 24, 2013 @ 6:26 pm | Reply

  23. thanks.

    Comment by jzbodyjewelry — May 24, 2013 @ 7:06 am | Reply


RSS feed for comments on this post.

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

The Rubric Theme. Blog at WordPress.com.

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: