Placing Amazon Ads In Your WordPress Blog

0
424
Amazon Associates and Wordpress

Want to make money with your WordPress blog using Amazon ads? Sure you do! Here’s how!

The Plugin

I tried many WordPress plugins to insert Amazon ads in the posts and this one I like the best because it is very flexible to use and has a good deal of short code tags with feature support. Get the Amazon Product In A Post plugin. It is one of a few Amazon WordPress plugings that are actively in development and being maintained. Read the installation instructions carefully as you will need to register to get an Amazon’s Product Advertising API and be an Amazon Affiliate. I won’t go into this here as there are instructions on how to do this after you install the plugin.

What Its Going To Look Like

Before I continue discussing the CSS and HTML code, lets get a sense of what we are striving for. In this blog, I wanted to monetize my content with appropriate Amazon ads.

In the post below about an Ubuntu subject (see here), I chose four products on Amazon that I felt would be good for my readers to consider. It looks something like this:
Amazon Ads in WordPress post

This ad block can be placed anywhere within the post. I chose to do this at the end. All I simply do now are the following steps:

  1. Consider the topic
  2. Sign in at Amazon and search for products suitable for my readers on the topic
  3. Note the ASIN/ISBN numbers
  4. Use the element short code with just the title description and large image
  5. Cut and paste the HTML table code (discussed below) in the post

CSS Coding

The following CSS code is a result of studying the HTML output for this plugin. It is based on the element short code. The suggestions made here should make an attractive table to contain each product that you want to advertise for the post.

We want the table to fill it’s parent container fully and each cell to be a evenly spaced fixed percentage width. Here I assume that you create a 2 column table.

.amazon-table {
  width: 100%;
  table-layout: fixed; /* avoid table extending past container */
}
.amazon-table td {
  width: 50%;
}

Images within the table are set to have a minimum width. This makes each image have enough viewable area to be read in the case where the image is too small.

.amazon-table img {
  min-width: 160px;
}

The title h2 heading is set to a fixed font size of 16 pixels. This is to override the existing h2 font setting to make the title appear nicer. An important thing is to set the line-height to 1.0 because in Amazon products, vendors like to put very long title descriptions that create multi lines. As the heading wraps, it leaves big ugly line spacing so we fix that here.

.amazon-table h2 {
  font-size: 16px;
  line-height: 1.0;
}

Finally, we use responsive design to force all table elements to be of block elements. This allows the stacking of table elements one over the other when the screen gets under a certain size. I set this to 640 pixels so adjust accordingly.

Putting this all together, in your WordPress theme custom CSS, copy and paste this CSS code into that section.

.amazon-table {
  width: 100%;
}
.amazon-table td {
  width: 50%;
}
.amazon-table img {
  min-width: 160px;
}
.amazon-table h2 {
  font-size: 16px;
  line-height: 1.0;
}
@media all and (max-width: 640px) {
  table, thead, tbody, th, tr, td {
    display: block;
  }
}

The HTML

As mentioned prior, this design is based on a table to make the ad layout easy to manage and look nice. You will want to save this code in a text file and cut and paste it filling in the ASIN/ISBN numbers for every post you choose to have Amazon ads in it.

Create a table and in each cell, put the short code in for the element. In this example, I will only use the title and the large image.
Place this at the end of the post.

<table class="amazon-table">
<tr>
<td>[amazon-element asin="B00RN14FLO" fields="title,lg-image"]</td>
<td>[amazon-element asin="1499296770" fields="title,lg-image"]</td>
</tr>
<tr>
<td>[amazon-element asin="B00HBLEV2O" fields="title,lg-image"]</td>
<td>[amazon-element asin="1118183525" fields="title,lg-image"]</td>
</tr>
</table>

Because in most WordPress themes the width of the container where the post content appears is small, and because the Amazon title descriptions can be very long, it is best to keep this design to no more than two columns.

If you like what you have read here, please leave a comment and Tweet this article out. I would very much like to hear your success using this approach. Happy blogging!

Of Interest