So, you want to insert Amazon product ads some where in your WordPress blog posts (like the screenshot below).
Maybe you want to insert the ad at the beginning, in the middle, or at the end of your content. I assume you want to manually pick and choose products from Amazon.com to insert into each post you write, right? Because if you’d rather have the Amazon ad automatically displayed (while sacrificing a bit of control over what’s displayed), I have another guide for that.
You can insert Amazon product ads by:
- using the tools of the Amazon Site Stripe, or
- you can utilize WordPress plugins
If decide to go with Amazon Site Stripe, you’ll have to visit Amazon.com and navigate to the product and copy Amazon Associates embed code that is provided to you by Amazon. Alternatively, with WordPress Amazon plugins, you just enter the ASIN and the plugin will be your interface with Amazon.
Manual Amazon Product Linking
Amazon Associates Central has already made it very easy to link to their products from any web page.
If you’re logged in to Amazon Associates Central, you’ll see Amazon Site Stripe when you are browsing products on Amazon.com.
Using Site Stripe you can create text links, image links, or enhanced display links (like the screenshot above) and embed those associate links into your WordPress post content.
Here’s a quick overview:
Get the HTML code from Link to this page on Site Stripe
The HTML code you get will look something like the one below. Copy the code given to you by Amazon.
<iframe src="http://rcm.amazon.com/e/cm?lt1=_blank&bc1=000000&IS2=1&bg1=FFFFFF&fc1=000000&lc1=0000FF&t=ms084d-20&o=1&p=8&l=as1&m=amazon&f=ifr&md=10FE9736YVPPT7A0FBG2&asins=1402712162" style="width:120px;height:240px;" scrolling="no" marginwidth="0" marginheight="0" frameborder="0"></iframe>Edit your WordPress post
Go to WordPress post editor and switch to HTML view.
Now find a spot in your post where you’d like to add the product link, and, in that spot, paste the code that you got from the previous step.
For example, I added the code at the very beginning, and here’s what I got:
Notice how there is big empty white space next to the product ad. It’s ugly. We can fix that by getting the text to wrap around the ad. Simply add the CSS class alignleft or alignright to your iframe tag.
For example, in the WordPress HTML editor, I modified my code to this:
<iframe class="alignleft" src="http://rcm.amazon.com/e/cm?lt1=_blank&bc1=000000&IS2=1&bg1=FFFFFF&fc1=000000&lc1=0000FF&t=infoabouduba-20&o=1&p=8&l=as1&m=amazon&f=ifr&md=10FE9736YVPPT7A0FBG2&asins=1402712162" style="width:120px;height:240px;" scrolling="no" marginwidth="0" marginheight="0" frameborder="0"></iframe>And now my product ad in the post looks like this:
Much better, I think.
Note: if you switch editors back and forth from HTML to Visual, WordPress could mess with your iframe code. If you want a reliable way to keep your iframe from being messed with, I strongly recommend that you install and activate this plugin.
Similarly, you can insert text links and image links to your WordPress posts manually.
Use WordPress Plugins to Show Amazon Product Ads
Instead of adding Amazon ads manually, you can utilize WordPress plugins. Plugins let you more conveniently insert ads, control how the ads appear, and whole lot more.
Most of the plugins below allow you to insert Amazon products conveniently using a shortcode.
The shortcode usually looks like [amazon]XXXXXXX[/amazon] where XXXXXXX is the ASIN.
You can insert the shortcode any where in your posts. The plugin will do the rest of the work. It will replace the shortcode with an Amazon product.
All the plugins listed below allow you to style and customize the appearance of the ad. So here’s the list of plugins — along with a screenshot of each one’s default ad style and a brief description:
phpZon
phpZon is very versatile. The screenshot above is of the most basic ad format it can display. phpZon allows you to also display product description and features. This plugin doesn’t only allow you to insert an Amazon product ad, it is capable of powering full Amazon-based affiliate stores using WordPress, so it maybe an over kill for you. Anyway, you can download phpZon here >>
AmazonSimpleAdmin
AmazonSimpleAdmin is a free WordPress plugin. It can display a single Amazon ad, like the one above, or multiple ads. Download AmazonSimpleAdmin here >>
Amazon Product in a Post
Amazon Product in a Post is the plugin I used in creating a WordPress Amazon store for free. It’s a great plugin, but the way it displays ads can be garbled by the theme that you use. You may need to adjust the appearance of the ad manually. Download Amazon Product in a Post here >>
WordPress-Amazon-Associate
WordPress-Amazon-Associate (WAA) is a cool WordPress plugin that lets you easily insert Amazon widgets right from your WordPress post edit screen. The screenshot above just shows the carousel widget. WAA can also insert MP3 Clips Widget, My Favorites Widget, Search Widget, and Omakase Widget. Download WordPress-Amazon-Associate here >>
ReviewAZON
ReviewAZON is another plugin that can do whole lot more than inserting single product ads within posts. You would choose this plugin over others if you didn’t want to be limited in how you integrate Amazon products with your content in the future. Download ReviewAZON here >>
Thank you. Worked like a charm when I inserted:
class=”alignleft”
If only Amazon offered more options on how product ads look…..
I’m in the process of migrating my cheesy looking website from the existing platform to WordPress. I use lots of affiliate ads and love how your plug-in works so far during the testing. I do have a question, though: How can I make sure there’s a space around the product ad? I’m finding that my text is bumping up against the product ad and I would like there to be a small space between the ad and the text. Is that possible?
Just what I’ve been looking for. Works a treat. Thank you.
I needed to center my iframe contents, when I saw you used class=alignleft I tried class=aligncenter and that seems to have worked. I spent so long seeking a solution to my amazon iframe alignment issue. Finally found it here, many thanks.
I’ve been going bonkers trying to solve the disappearing iframe problem, thanks for the heads up about tsl-iframe-unfilter, it seems to do the trick.
Thank you for a well-explained solution to getting WP text to wrap around an iframe – I’m delighted!
Clare
I tried the manual one and it doesn’t work. I copied the html code from amazon and pasted it on one of my wp pages(website) and published. When I go back and open my website there’s nothing there. I am sure I am doing something wrong, but I can’t figure it out. PLEASE SOMEONE HELP.
Thanks
Hi Audrey, Install and activate this plugin and tell me if the problem persists.
Been at it 3 hours – Doesn’t work for me pal – just wont wrap. Been thru every google wp search forum – nothing.
This:
Will not wrap.
Hi rob, Sorry for the delay in responding to you.
Have you figured out your problem?
I don’t know what the source of your problem is, and the code you pasted in the comment didn’t show correctly. Perhaps you could re-post your comment after reading the “make your comment cool” link so that your source code will show correctly.
Thanks for this. Needed the text to flow around the ad and this was what I was looking for!
Glad it worked for you, Lindsey!
this is great. worked well with the ‘alignleft’ text, but the problem that i have – and maybe this is the problem rene had is that when you update the html and then you go back and make ANY other changes on the visual tab, then it just completely deletes the iframe box. i don’t know how to make sure that the iframe box stays when i make any other update….
Thanks for the feedback, bobby. Yeah, I should have mentioned in my instructions how to protect iframes from WordPress post editor messing with them.
This plugin can protect iframes. I tried it and it works great. So, try it and let us know if it solves your problem.
I've tried the manual process you describe as follows but the code isn't retained on my site. [YOUR CODE] or [YOUR CODE].
Any thoughts?
Rene, You got iframe code from Amazon, right? All you do is go to the HTML editor in WordPress, paste the iframe code in there. If you want your text to wrap around the iframe, insert the CSS class alignleft or alignright in the iframe, like this:
<iframe class="alignleft" src="http://rcm.amazon.com/e/cm?lt1=_blank&bc1=000000&IS2=1&bg1=FFFFFF&fc1=000000&lc1=0000FF&t=infoabouduba-20&o=1&p=8&l=as1&m=amazon&f=ifr&md=10FE9736YVPPT7A0FBG2&asins=1402712162" style="width:120px;height:240px;" scrolling="no" marginwidth="0" marginheight="0" frameborder="0"></iframe>My example in the post wasn’t the best one, so I updated as a result of this question
I would include Amazon Reloaded for WordPress. Is a more mature plugin.
Kelvin
Amazon Reloaded is broken. I think you posted this comment before you realized that. I saw your post in the Amazon Reloaded support forum.
Check out this other page where I listed all the available Amazon plugins for WordPress. Amazon Reloaded is grouped with the broken Amazon plugins.
By the way, I used your tips regarding the iframe in the Amazon Reloaded support forum in this article. Hope you don't mind!