How To Display Amazon Affiliate Enhanced Display Ads Side-by-Side in WordPress

Amazon Enhanced Display Ads in WordPress

Amazon Enhanced Display Ads in WordPress

Amazon Enhanced Display Ads in WordPress

Adding the “Enhanced Display’ (Image + Text) Amazon Affiliate ads in WordPress can be a pain in the neck – for some reason WordPress and Amazon Enhanced Display Ads don’t work together well. Luckily, there is a way it can be done, it just requires a little extra work.

    1. Edit the post in HTML mode, not in the Visual Editor (the Visual Editor will strip out the iFrame code) – you can create a draft of the post in the Visual Editor, but you’ll want to switch to the HTML editor when its time to add the Amazon Enhanced Display Ads
    2. Copy & Paste the Amazon Affiliate Enhanced Display Ads where you want them in the HTML editor once the post is ready for them
    3. If you have multiple Enhanced Display Ads and you want them to appear side by side (instead of each one appearing on top of each other), then you’ll need to add the iframe align attribute.  It should be inserted right before or after the scrolling=”no” attribute. Update, Amazon changed the code for these so the method is slighty different. I have both illustrated below to help:

OLD VERSION: <iframe src=”http://rcm.amazon.com/…” style=”width:120px;height:240px;” scrolling=”no” align=”left”></iframe>

NEW VERSION: <iframe marginwidth=”0″ marginheight=”0″ scrolling=”no” align=”left” frameborder=”0″…

 

This will ensure your Enhanced Displays are left aligned, and allow you to have multiple Enhanced Displays side-by-side if they are also left aligned. You’ll also need to add a “<p>” before the first Enhanced Display ad, and a “</p>” before the last display ad. A series of left aligned Enhanced Display Ads would look like this:

<iframe src=”…” height=”240″ width=”320″ frameborder=”0″ marginwidth=”0″ marginheight=”0″ scrolling=”no” align=”left”></iframe>

Other tips:

  1. You will probably need to enter line breaks after the Ad. This can be done by inserting “&nbsp;” on seperate lines to create line breaks. Add a few and see how many more you need to make it look right.
  2. Update the post (while still in HTML Editor) and do not switch to Visual Editor otherwise you’ll lose everything
  3. Tweak the code in the HTML editor by adding extra line breaks until you get the desired result.

And that’s it! For an example of this in the live, check out my guide on how to hardwire an Escort Passport Radar Detector which the above screenshot was taken from. I hope this helps you earn money and enhance your blog posts 🙂

10 thoughts on “How To Display Amazon Affiliate Enhanced Display Ads Side-by-Side in WordPress

    1. I’m not familiar with that being an option – how do I get a Table instead of iFrame output for Enhanced Display affiliate links?

  1. I am fairly new to WordPress and I couldn’t figure this out. I was searching for WordPress widgets and possible solutions until I came across this page.

    Thanks for sharing this tip, your steps made this so simple to follow.

  2. It doesn’t work for me… 🙁 Not only the boxes are one under the other, also there is a big space between them! Nothing changes after doing the things you have explained. Any ideas?

    1. I’m sure this isn’t how you’re supposed to do it but the above didn’t work for me either so I added a float:left; to the style of each Amazon link box and then added after them to get a line break.

  3. Thanks! However, my iframe looks different. Here’s two ads that I’m trying to put next to each other and center (not working):

    Please help?

  4. This was extremely helpful. One other suggestion, if you have text that you want to display after the images, be sure to include the following after the last iFrame end tag.

Comments are closed.