How to format Amazon Associates ads for WordPress

This article was last updated on April 16, 2022

Canada: Oye! Times readers Get FREE $30 to spend on Amazon, Walmart…
USA: Oye! Times readers Get FREE $30 to spend on Amazon, Walmart…With some HTML edits placement of Amazon.com links is easy

Placing Amazon.com ads where you want them in your WordPress blog is easy with a few tweaks of the HTML code. As they say, code or be controlled in this world. It should also work for any webpage and other iframes.

Amazon.com is adamant that Associates are not allowed to edit the HTML of their banner or link ads. That creates problems when you want to do things like wrap text around the ad to make it fit better on the page.

There is a simple way to format the ads that does not violate Amazon.com policy. There are simple HTML functions like “float” and “margin” that control placement of the iframe ads.

In the previous story Review – Morgan Davis Drive My Blues Away, I wanted to place two Amazon.com links so that people could find the CD in the United States or Canada.

The code that Amazon.com provides is great except there is no word wrap. The ad stands out from the text like this –

Not very classy. It creates too much white space.

The Amazon.com code for the iframe ad looks like this –

   <iframe style="width: 120px; height: 240px;" src="http://rcm.amazon.com/e/cm?lt1=_blank&bc1=000000&IS2=1&bg1=FFFFFF&fc1=000000&lc1=0000FF&t=njne-20&o=1&p=8&l=as4&m=amazon&f=ifr&ref=ss_til&asins=B005HANGHM" height="240" width="320" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>

The part of the code you will have to change is inside the “style” statement. I will break out the changes.

Changing page location and word wrap

To float the iframe ad left or right insert the code

   float:left;

or

   float:right;

after style= and before width:120px;height:240px;

Each HTML function has to use the proper coding so watch the colon : and semi-colon ;.

“Right” floats the iframe ad to the right side of your page and “left” to the left. If you check the story, the first iframe is placed right and the second one to the left.

Adding an iframe margin

The Amazon.com ad link has no margin. You need a margin between the iframe ad and text. You can do this two ways: 1. add your own overall margin statement or 2. create individual margins.

The first margin change tweak is simple but not precise. Delete the marginwidth="0" marginheight="0" statements.

and add

   margin:10px;

within the style statement for 10 pixels of margin space. That’s a one margin size fits all statement. Of course, you can select any size margin, up to the width of the page.

The second margin change tweak allows you to vary the size of the margin -top, left, right, and bottom.

Again, delete the marginwidth="0" marginheight="0" statements.

Then enter

   margin-right:20px; margin-top:20px; margin-bottom:20px

as part of the “style” statement (after the “float” parameter) which will add 20 pixels of margin on the sides and top and bottom of the iframe. You can specify different margin size in pixels by changing the number 20 to whatever you wish.

In the story, the right iframe ad is uses the 1st tweak and the left iframe ad uses “20&Prime or 20 pixels for the margin, except on the left which has no margin.

Code example – right float, 10 pixel margin

   <iframe style="margin: 10px; width: 120px; height: 240px; float: right;" src="http://rcm.amazon.com/e/cm?lt1=_blank&bc1=000000&IS2=1&bg1=FFFFFF&fc1=000000&lc1=0000FF&t=njne-20&o=1&p=8&l=as4&m=amazon&f=ifr&ref=ss_til&asins=B005HANGHM" height="240" width="320" frameborder="0" scrolling="no"></iframe>

Which looks like this on the page –

“Linden is a great producer and musician and has put his stamp on this CD.

“Drive My Blues Away” got inside my head. It is on my computer, phone, the network, in the car. I probably drove my wife a little crazy listening to it.

The CD is very much like Morgan’s live shows, basic without much ornamentation. Colin Linden plays guitar on “Happy Song”. Franz plays percussion on “Sure As You Live.” Seymour Townes plays harmonica.”

Code example – left float, 20 pixel margin

   <iframe style="width: 120px; height: 240px; margin-top: 20px; margin-right: 20px; margin-bottom: 20px; float: left;" src="http://rcm.amazon.com/e/cm?lt1=_blank&bc1=000000&IS2=1&bg1=FFFFFF&fc1=000000&lc1=0000FF&t=njne-20&o=1&p=8&l=as4&m=amazon&f=ifr&ref=ss_til&asins=B005HANGHM" height="240" width="320" frameborder="0" scrolling="no"></iframe>

Which looks like this on the page –

“He has presented it at blues festivals and takes bookings.

Morgan Davis also gives paid house parties called The M.D. House Call. He will come to your party and entertain your guests. “M.D. will show up with all the gear and put on a private show of live blues for you and your invited guests… in your house!”

I was driving along with my wife before the night at Bearly’s and she told me she got an invitation to one of the house parties but didn’t know I would want to go. Arghh!

She doesn’t know he is playing tomorrow night December 13th at Bearly’s again. I’ll see if she has a hankering for the ribs again.”

Amazon.com approval

I checked with Amazon.com and they approved these edits since they did not remove their logo, product information or privacy statement.

To learn more about HTML

If you are blogging it never hurts to learn a little code. At least you will feel in control of your site to some extent and HTML coding is not that hard. There is a great sense of satisfaction when you solve a problem with coding.

Try the free site CSS Beginner Tutorial.

I found it helpful to take some online courses like Lynda.com’s HTML Essential Training (2012) and XHTML and HTML Essential Training.

It’s also handy to search WordPress.org for helpful tips from expert users in the WordPress Community. I used a new plugin for this story to correctly display the HTML code – Preserve Code Formatting. It allows the use of “code” and “pre” functions to format HTML on the page. Then I found a CSS patch that wrapped the HTML code within the box.

So now you know what’s going on if NJN Network looks a little odd from time-to-time. I’m coding.