How to Add Amazon Search Box to WordPress Using HTML
There are two ways with which you can add an Amazon search box to your WordPress site (or any site, for that matter).
- You can use one of the inflexible search widgets that are provided in the Amazon Associates Central, or
- You can create your own Amazon search box using HTML and have total control over how it works
I’ll show how Amazon search box widgets work, but I’ll then talk about the better way to create an Amazon search box using plain HTML and how to add it to WordPress.
Amazon Search Box Widgets
Amazon has two search box widgets. One is simply called Search Box and the second is called Search 2.0.
Standard Amazon Search Box
As you see in the screenshot below, all you can do with the standard search box widget is set its size and embed it somewhere on your site. You don’t have any other configuration options. That’s pretty inflexible, I think.
Amazon Search 2.0 Widget
The second option is using the Search 2.0 widget. It’s a lot different from the standard search box.
As you can see, it has a lot more configuration options, but in my opinion, it provides an awkward search experience to the user. It returns the search results within the widget itself! I, for one, don’t like that.
Amazon HTML Search Box
So, why not just have a normal HTML search box that looks like this?
Or this actual live version:
It is possible. And using this normal HTML, you have complete control over the CSS and HTML.
The Actual HTML
The actual HTML for the search box is simple
<form action="http://www.amazon.com/exec/obidos/external-search" method="get"> <input type="hidden" name="tag" value="ms084d-20" /> <input type="text" name="keyword" size="20" value="" /> <input type="submit" value="Search Amazon" /> </form>
Replace ms084d-20 with your own Amazon Associate ID and embed this HTML where ever you like. You can embed it in the sidebar using the WordPress Text widget that allows you to add any arbitrary text or HTML to the sidebar.
And because this is a simple HTML search box, you can modify its appearance using CSS.
When the user clicks on the Search Amazon button, they’ll be taken to the results page on Amazon.com and the commission for any purchase they make will be credited to you!