Amazonian Sidebar for Wordpress
Purpose
This widget has a very specific purpose. It displays product images in your sidebar with an optional text link below. So, if you’re looking for something that will embed product links in your posts, this probably isn’t the right widget for you (might I suggest WP-Amazon?).
Configuration
I wanted to make the configuration process as easy as possible. Here are the steps to setting it up:
- Download the zip file, unzip it, and upload the file amazonian.php to your wp-content/plugins/widgets folder. If you don’t have a widgets folder, create one. If that didn’t make much sense, this page has a lot of useful information about installing Wordpress plugins.
- Log in to Wordpress Admin, click the Plugins tab, and click the Activate link for Amazonian Sidebar.
- At the top of the page, click Options, then click the Amazonian link in the sub-menu. Follow the steps presented on that page to configure the sidebar to work with your Amazon Associates account.
The widget will glean everything it needs to know from the HTML you paste into the box in step eight. When you’ve completed the steps and saved your changes, click Presentation at the top of the page, then click the Widgets sub-menu. In the box marked Amazonian Sidebar at the bottom of the page, choose how many widgets you want. Drag-and-drop the widgets into your sidebar, then click the configuration button on the right side of the widget to enter product information.
Usage
At the very least, you must enter a product id and the name of the product’s image; the title of the widget and product names can be left blank. Also, if you have room in your widget for three products, you don’t have to put three products in the widget; products can be left blank.But where do you get the product ids and image names from?Create a new HTML snippet on the Amazon Associates site using steps one through six on the Amazonian Sidebar configuration page (mentioned above). You can uncheck the Use larger image checkbox if you’re sidebar is tight on space. The HTML snippet that Amazon generates will look something like this:<a href=”http://www.amazon.com/gp/product/B000X9PNOQ?ie=UTF8&tag=youraffiliateid&linkCode=as2&camp=1789&creative=9325&creativeASIN=B000X9PNOQ”><img border=”0″ src=”21JJzGcrfWL._AA_SL160_.jpg“></a><img src=”http://www.assoc-amazon.com/e/ir?t= youraffiliateid&l=as2&o=1&a=B000X9PNOQ” width=”1″ height=”1″ border=”0″ alt=”" style=”border:none !important; margin:0px !important;” />The first highlighted section is the product id; it will always come after /product/ and before the question mark. The second highlighted section is the image name; it will always be what falls between the quote marks after src=, and it will end with .jpg. Copy and paste each of these into the appropriate fields in your widget. Do this for each product you want displayed. When you’re done, close the widget, save your changes, and your sidebar will be updated. You now have products displayed in your sidebar.
Presentation:
Each widget comes ready to be styled with CSS. Here are the classes that are assigned to the elements generated by the widget:
- The title is an h2 with the standard widgettitle class.
- The list of items is a ul and is assigned the class amzn_list.
- The list items (li tags) containing images are classed amzn_image.
- The list items (li tags) containing text links are classed amzn_link.
That’s it! May you become a rich and successful blogger thanks to your easier-to-use Amazon Associates account. If you find this widget particularly useful, why not buy me a latte for $3.52? You can do so using the button below. Thanks, and happy blogging.
