Amazon Affiliates
Now Reading
How to Insert Amazon Widgets in WordPress
45

How to Insert Amazon Widgets in WordPress

updated by DeOren Ra-Ki RobinsonJuly 11, 2013
by M. K. SafiDecember 14, 2010

Amazon provides lots of useful widgets to its associates at http://widgets.amazon.com. If you want to display one of those widgets on your WordPress powered website, you’re in luck. You have plenty of flexible options to accomplish that.

There are 15 different Amazon widgets:

Search, Carousel Widget, My Favorites, Deals Widget, MP3 Clips Widget, Slideshow, Auto Part Finder Widget, Amazon Blogs Widget, Product Cloud, Wish List, aStore Widget, Search Box, Recommended Product Links, and Omakase.

Each and every single one of them can be inserted in WordPress in at least one of four ways:

Configure any of the widgets above to your liking and copy its code. Then, let’s get started.

Add Widget Code While Writing a WordPress Post

You can add your widget code any where in your WordPress post. At the beginning, in the middle, at the end or at whatever spot you prefer. It’s really easy.

While you’re writing your WordPress post, switch to the HTML editor. Now simply copy your Amazon widget code to the spot where you’d like it to appear.

Add Widget Code by Editing WordPress Template Files

Among all the methods outlined here for adding Amazon widgets to WordPress, this one requires most technical knowledge.

Yet, it provides you with the most flexibility because with this method you can insert Amazon widgets any where on your WordPress powered site: the front page, the header, the footer, between posts, inside post pages, in archives pages…you get the point.

But you do need to have some understanding of HTML and PHP to be able to do this. I’ll show you an example of how to insert an Amazon widget between the header of your blog and the list of posts, like this:

amazon-widget-in-template

In the admin area, go to Appearance >> Editor. And under Templates click Main Index Template (index.php). Now the index.php file is opened up in the editor.

In the screenshot above, I have the Omakase widget. Amazon gave me the following code for it:

<script type="text/javascript"><!-- amazon_ad_tag = "ms084d-20"; amazon_ad_width = "468"; amazon_ad_height = "60";//--></script>
<script type="text/javascript" src="http://www.assoc-amazon.com/s/ads.js"></script>

I pasted that code in the following position of the index.php of my theme TwentyTen.

widget-code-insertion-screen

I also added some in-line CSS for styling. If you don’t know how to do that, then…oh well…here are some good CSS books from Amazon Winking smile


Add Widget Code to WordPress Sidebar

Unlike editing template files to insert Amazon widgets, adding a Amazon widget to the sidebar is really easy.

First, let’s clear something up. WordPress has what’s called sidebar widgets. These are not related to Amazon widgets in anyway — they just share the word widget.

To insert an Amazon widget in WordPress sidebar, use the WordPress sidebar Text widget, which can be found at Appearance >> Widgets of the WordPress admin dashboard. Add it to your sidebar. Now all you have to do is paste your Amazon widget code into the text area of the Text widget.

amazon-search-sidebar-widget

And here’s how that looks on my blog

amazon-search-widget-sidebar-screen

Any Amazon widget can be inserted in WordPress sidebar using this method — just make sure that your Amazon widget is not wider than your sidebar so it doesn’t break the layout of your site.

Utilizing WordPress-Amazon-Associate Plugin

The most up to date and useful plugin in WordPress for inserting Amazon widgets is WordPress-Amazon-Associate (yeah, that’s what the plugin is called). In addition to allowing you to insert and interact with Amazon widgets, this plugin does a bunch of other useful things. But here I’ll just focus on its ability to insert Amazon widgets.

This plugin works with the following widgets:

It doesn’t work with: Deals Widget, Slideshow, Auto Part Finder Widget, Amazon Blogs Widget, Product Cloud, Wish List, aStore Widget, Search Box, or Recommended Product Links. If you want to use one of these, you can use one of the three widget insertion methods described above.

So, first install the plugin and configure it. Now, the easiest way to insert a widget using this plugin is from the WordPress post editor. While you’re in the editor, click on the “a” button and choose the widget that you want to insert.

wordpress-amazon-associate-insert-widget-screen

Now you’ll see the widget configuration screen.

configure-waa-widget

Configure the widget to your liking, click Insert and you’re done!

So, those were the four ways with which you can insert an Amazon widget in WordPress. If you have questions, suggestions, comments or tips, I’d love to hear ‘em!

What's your reaction?
Wink It
0%
Interested
0%
Meh...
0%
What?
0%
Sad
0%
Kill It
0%
About The Author
Profile photo of M. K. Safi
M. K. Safi
45 Comments
1 2
  • Allan
    October 14, 2014 at 1:03 pm

    UPDATE:

    This might assist those having the same issue as myself. I could not get the amazon widget html code to work in posts, until I pasted from the text tab but *also clicking the “code” button above. WordPress 4.0

    example html..

  • October 27, 2013 at 3:51 pm

    Hmm it seems like your blog ate my first comment (it was super long) so I guess I’ll
    just sum it up what I submitted and say, I’m thoroughly
    enjoying your blog. I too am an aspiring blo blokgger
    but I’m still new to everything. Do you have any recommendations for novice blog writers?
    I’d certainly appreciate it.

  • July 28, 2013 at 9:51 pm

    Thanks , I’ve just been searching for information approximately this topic for a long time and yours is the greatest I have came upon so far. But, what about the bottom line? Are you positive concerning the source?

  • July 26, 2013 at 2:23 am

    However, there are several online interfaces available where
    one needs to click on different types of options to send HTML code in email
    or to generate HTML code. It won’t take you extremely long to work out what way to employ it. Decide now because if you are a weight lifter, you will not build the chest that you are looking for.

  • April 27, 2013 at 8:52 am

    cheers for the great post! I have been searching for things similar
    to this. ill be subscribing your rss so i wont miss out the good
    things! once again, amazing page remember to keep this up!

    Please pardon me if my english is not good.

  • February 16, 2013 at 7:57 am

    Hi, recently im having a similiar problem as one other person. Underneath the title “Amazon Picks” on my blog, i use to have a slideshow of products. It was there for a year, n i even added products a few months ago, n i just checked a few days ago, n the slideshow is no longer ther. When i go back to WP widget, the code is still there.
    After researching on my own, i had a friend open my site from her computer, she also uses firefox, she can see the products/slideshow. I tried Enternet Explorer from my computer, it still doesn’t show the products but i has a big invisible space underneath the title.
    I tried uninstalling Simple Adblock which i thought could be the problem, went back to check my blog, it’s still not displaying the slideshow.
    Plzzz help

  • December 26, 2012 at 6:01 pm

    Thank you very much!!Now I know how to put the banner correctly :)

  • December 25, 2012 at 9:06 pm

    HELP

    My amazon widget or something is not working.

    It must be because of some wordpress setting. and it is NOT the minify problem .

    The console section of my store (which is a game-clone amazon affiliate store) is not showing, i have tried checking everything and nothing works. It was working fine yesterday and now nothing. Stressed!

    :O(

  • December 1, 2012 at 5:52 am

    Great article M.K. Thanks for the screenshots and the clear explanations. It was just what I was looking for

You must log in to post a comment