Amazon Search Widgets

Targeted Amazon Search Widgets in WordPress

This was originally going to be part of the Randomized Sidebar Content post we did a couple of days ago. While we were putting that one together, it occurred to us that each and every Amazon Search Widget on our site was displaying the exact same group of product graphics. Hmmm…. Yeah, kinda boring. That got us to thinking we should try and come up with a way of re-configuring things so that our WordPress site displayed page & category-specific, targeted Amazon Search Widgets on our posts.

If you’ll recall from that earlier post, we used XYZ PHP to randomly insert PHP-generated content into our sidebar (OK, those folks owe us a beverage for yet another shout out 🙂 ). This time, we’ll see if we can use that plugin to get our widgets to load content that is specific to the category or page that we’re on.

So, one of the options that Amazon Associates has to offer is known as the ‘Amazon Search Widget’ (You may have noticed a few of these popping up in the sidebar in various locations around here).

The code that makes the widget work consists of javaScript, and can be generated from within your Amazon Associates account. Basically, all you have to do is copy & paste the code into your page and edit the default search key line so that the widget displays the type of products you want to feature. The innards look something like this (un-minified in order to make it more readable):

<script type="text/javascript">
amzn_assoc_ad_type ="responsive_search_widget"; 
amzn_assoc_tracking_id ="my-tracking-id";
amzn_assoc_marketplace ="amazon";
amzn_assoc_region ="CA";
amzn_assoc_placement ="";
amzn_assoc_search_type = "search_widget";
amzn_assoc_width ="auto";
amzn_assoc_height ="auto";
amzn_assoc_default_search_category ="";
amzn_assoc_default_search_key ="";
amzn_assoc_theme ="light";
amzn_assoc_bg_color ="FFFFFF";
</script>

<script src="//z-na.amazon-adsystem.com/widgets/q?ServiceVersion=20070822&Operation=GetScript&ID=OneJS&WS=1&Marketplace=CA"></script>

Now, the part we want to focus our attention on is the line that determines which type of products actually get displayed within the widget: amzn_assoc_default_search_key ="";

If we want to populate our widget with contents of our choosing we’d do something like this: amzn_assoc_default_search_key ="Game of Thrones";

Amazon Search Widget e.g.

Yeah! Gotta get me one of them there ‘Game of Thrones’ Map of Westeros Plush Blankets!

So anyways, you’d think that if we wanted our Amazon widget to display in the sidebar, all we’d need to do is copy & paste the Amazon code into a Custom HTML widget, add a search term and Bob’s Yer Uncle, right?

Well, yes… But… Let’s think about this for a moment: WordPress sidebars are by default set up so that they display the same items consistently across your site. If you’re simply going to drag and drop your Amazon widget with it’s hard-coded search key into your sidebar, you’d basically be stuck (as we were) with every widget on your site displaying the exact same stuff.

In order to get the sidebar widgets to display page-specific content, we’d have to devise some way of determining A. What page the user is currently on, and then, B. Dynamically inserting an appropriate page-specific search key into our widget code.

Let’s open up the XYZ PHP plugin and see if we can come up with a PHP snippet that’ll do that for us:

<?php

/** find out what page the user is on and assign it to a variable **/
$this_page = basename($_SERVER['REQUEST_URI']);

/** create a default variable for the search key ***/
$amzS="WordPress";

/** Set up our conditional statements... **/
/** if this is the main 'cklg-top-30' page **/
/** OR if it's any page in the 'CKLG Top 30' category **/

if ($this_page=='cklg-top-30' || in_category('CKLG Top 30') ) {

/** change our search key to something 70s Music-related **/
     $amzS="Seventies Music";
}

/** if this is the main 'vancouver-canucks' page **/
/** OR if it's a page in the 'Vancouver Canucks' category **/

if ($this_page== 'vancouver-canucks' || in_category('Vancouver Canucks') ) {

/** change our search key to something Vancouver Canucks-related **/
     $amzS="Vancouver Canucks Jerseys";
}

?>

<script type="text/javascript">
amzn_assoc_ad_type ="responsive_search_widget"; 
amzn_assoc_tracking_id ="my-tracking-id";
amzn_assoc_marketplace ="amazon";
amzn_assoc_region ="CA";
amzn_assoc_placement ="";
amzn_assoc_search_type = "search_widget";
amzn_assoc_width ="auto";
amzn_assoc_height ="auto";
amzn_assoc_default_search_category ="";

/** The search key will be whatever was previously assigned to the $amzS variable **/
amzn_assoc_default_search_key ="<?php echo $amzS; ?>";

amzn_assoc_theme ="light";
amzn_assoc_bg_color ="FFFFFF";
</script>

<script src="//z-na.amazon-adsystem.com/widgets/q?ServiceVersion=20070822&Operation=GetScript&ID=OneJS&WS=1&Marketplace=CA"></script>

Save the snippet as "AMZwidget" or whatever, and then go to Appearance > Widgets. From there, create a Custom HTML widget and paste the short code into it. Or, you could simply drag an ‘Insert PHP Snippet’ widget into your sidebar and select your newly-created snippet from the drop-down menu.

Let’s take a closer look at the above code example and see what it actually does…

  1. Grab the page name that the user is currently viewing and assign that value to the $this_page variable.
  2. Assign a default value to the variable $amzS (in this case, ‘WordPress’).
  3. Set up our conditionals: IF the user is on the ‘cklg-top-30’ page OR they’re on any page in the ‘CKLG Top 30’ category, the value of our $amzS variable will be changed to something appropriate (e.g. ‘Seventies Music’).
  4. If the user is on the ‘vancouver-canucks’ page or on any other page in the ‘Vancouver Canucks’ category, the variable is changed to ‘Vancouver Canucks Jerseys’.
  5. In the Amazon Search Widget code, change the line amzn_assoc_tracking_id ="my-tracking-id"; to reflect your own Amazon Associates ID.
  6. Finally, edit the default search key line by adding the PHP variable:
    amzn_assoc_default_search_key ="<?php echo $amzS; ?>";

So now, whatever value the $amzS variable has been set to will determine the content/product graphics that show up in our search widget.

And that’s all there is to it! All of your Amazon Search Widgets across your site can now display page-specific/category-specific products. Any pages that aren’t included in the PHP conditional section will display whatever our default has been set to.

Think I’ll go and order me one of those awesome Game of Thrones Plush Blankets now!

If you have any questions or if you need assistance getting this to work for you, feel free to leave a comment below or give us a shout via our contact page — we’d be happy to help!