How To Format Amazon Associates Ads In WordPress

With some HTML edits placement of Amazon.com links is easy

By Stephen Pate – Placing Amazon.com ads where you want them in your WordPress blog is easy with a few tweaks of the HTML code.

Update – this post need a serious update as Amazon.com has changed their ad system.

As they say, “code or be coded” in this world.

The techniques I discuss should also work for any webpage and other iframes.

Amazon.com is adamant that cAmazon 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. HTML functions like “float” and “margin 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 –

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 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.

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

If you look at your code after posting it will shorten the “margin-right” etc. like this –

"margin: 10px 0px 10px 20px; width: 120px; height: 240px; float: right;"

You can use the single expression as long as you keep the order in your head – top,right,bottom, left – which only proves there is more than one way to code something.

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

Code example – right float, 10 pixel margin

Which looks like this in the  story –

—————————————-

“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.”

——————————————-

Code example – left float, 20 pixel margin

Which looks like this in the  story –

———————————————

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!

—————————————————-

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. 🙂