Adding Amazon widgets to your webpage with WebMatrix

Amazon Web Services offers many different ways to include Amazon products on your website. A simple and easy way to include Amazon Web Services on your website is through their widgets. Amazon currently has 15 widgets ranging from a simple search of Amazon to showing a slideshow of chosen Amazon products.

This article will focus on adding a few of these Amazon widgets using WebMatrix. WebMatrix is a free tool that allows you to create, customize, and publish webpages. It gives a number of different ways that you can create websites. One of the features is providing existing open sources applications such as WordPress, Joomla, DotNetNuke or Umbraco. WebMatrix can be downloaded for free at www.microsoft.com/web/webmatrix.

Download and Install WebMatrix

WebMatrix can be downloaded for free at microsoft.com/Web/WebMatrix. If you need help downloading and installing WebMatrix, it may be a good idea to read Getting Started with WebMatrix. The article provides step by step instructions on installing WebMatrix

After you've successfully installed WebMatrix we must create an Amazon Associate account.

Create your Amazon Associates account

Visit Amazon's affiliate program page to get started on making your account.

If you already have an Amazon account, choose if you are the main contact for the account. Click "Next" when you're done.

Amazon will now ask you to specify some information about your website and it's purpose. Fill in the form and agree to the contract terms.

When you're done, click the "finish" button.

When you're done you will be taken to a thank you page where you associate id is listed.

Create your aStore

Amazon has numerous widgets that we could add to our WebMatrix website. In this article we will be looking at multiple widgets that we can add to our page. All of the Amazon widgets can be found at widgets.amazon.com.

First, we will create and add an aStore to our website. The aStore is an easy to create store without the need for programming. You can now keep people on your site longer. You can begin setting up your aStore by going here or clicking the "aStore" tab at the top of the page.

To get starting creating your aStore click the "build an aStore now" button on the right on the aStore page. You can see that there are a few steps to get your Amazon aStore created.

The first step is to create your aStore pages. On these pages you can hand pick Amazon products to feature in your aStore. We need to add a category page. To do this, click "add category page." Give your category page a name and choose a category for it.

We now need to add products to our store. With a product category selected, hit the "add products" button.

You will be taken to the "Add Products to Our Products" page. Here you can add up to 540 products to your aStore. You can search for products by category and keywords.

Once you have selected products to add, your added products will be visible on your aStore.

When you're done adding products you can get back to setting up your aStore by using the site navigation on the left site of the browser.

Once you're back to your aStore and when you're done adding products, hit the "continue" button at the bottom of the page.

Next you will set up the color and design of your webpage.

Once you're done choosing your design settings, click the "continue" button at the bottom of the page. Next you'll choose your sidebar widget placement and which widgets will be displayed.

Click the "finish and get link" button at the bottom of the page when you're done. You will be taken a page notifying you that your store has been published. There are three different options on how to display your store on your webpage: a link, an iframe, or a frameset.

Choose how you want to add your store to your webpage. Copy the code or keep the page open. Now head over to WebMatrix.

Create a Website with WebMatrix

Now we can create a webpage with WebMatrix. Open WebMatrix. For this article, we will use the Empty Site template. This is a full-featured HTML5 site. Select ‘Site from Template’ on the WebMatrix welcome screen.

Select the ‘Empty Site’, give the site a name and press OK.

Clicking ok will take you to your WebMatrix workspace. This contains information about your local host as well a provides resources on developing your site.

You’ll notice that WebMatrix allows you to move between different workspaces by selecting the buttons on the left hand side. At present the Site button is selected which gives you details on your web site, such as the URL of the site, and other tools that you can use such as monitoring your site requests. You can look into this workspaces as you work but for this article, we will be working with our Files workspace. To get to your Files workspace, click the "Files" tab on the lower left hand of WebMatrix.s

Now you will be in your files workspace. This is where all of the files that make up your website will be located. Since we chose the empty site template we will not have any files. Let's create a webpage now. You can create a webpage for your site by clicking on the "new" icon on the menu ribbon. There are many different file types to choose from but for this example, create a .cshtml file.

You will now have a simple, empty HTML5 valid webpage.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
    </body>
</html>

Let's now add our Amazon aStore that we created to our webpage.

Add our Amazon aStore to your Webpage

Somewhere between <body> and </body>, add the code that you copied for your aStore. If you chose the iframe option, your code should look similar to this:

<iframe src="http://astore.amazon.com/amapex-20" width="65%" height="650" frameborder="0" scrolling="no"></iframe>

Run your file by clicking the "run" icon on the menu ribbon.

This will open your page in a browser. Depending on your choices for color and design, your aStore may look similar to this:

Add an aStore widget

In addition to adding an aStore to your website, you can also add an aStore widget. This is displayed as a banner on your webpage with products from your aStore. Clicking on it will take the user to your aStore.

Let's replace our aStore with an aStore widget. To begin adding the widget, go here. You can also get there by visiting widgets.amazon.com and navigation to the aStore widget.

Once on the aStore widget page, you can choose to configure the layout and color options. Below is a preview of what your current aStore widget looks like.

Once you are done configuring your widget, copy the HTML code below. We will simply paste this code onto our webpage.

Now head back to WebMatrix. Replace your aStore code (in this case, our iframe) with your aStore widget code. This code can appear anywhere between the <body></body> tags on your page.

Run your page. Your aStore widget should be displayed on your page.

Clicking on one of the product displayed on our widget will navigate you to the product page in your aStore.

Add the Carousel Widget

Another way to add Amazon products to your webpage is by using the Carousel widget. The Carousel widget displays products of your choosing in a 3D carousel display.

To get started adding the Carousel widget, click on the carousel widget on the widgets page.

The first thing you will need to do is to choose products to be displayed on the carousel. Amazon requires at least 6 products to be displayed.

You can search or browser products and add them to your carousel.

When you've added at least 6 products, click the "next" button. Now you will need to customize your widget.

When you're done customizing your widget, click the get code button. A copy button will appear on the screen. Click the button to copy the code to the clipboard.

Head back over to your WebMatrix site. Copy and paste your code somewhere between the <body> </body> tags. You code should be similar to this:

<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" 
codebase="http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab" id="Player_87ca3844-0ba9-4a65-9373-cc2187e5e967"  
WIDTH="600px" HEIGHT="200px"> 
    <PARAM NAME="movie" VALUE="http://ws.amazon.com/widgets/q?ServiceVersion=20070822&MarketPlace=US&ID=
V20070822%2FUS%2Famapex-20%2F8010%2F87ca3844-0ba9-4a65-9373-cc2187e5e967&Operation=GetDisplayTemplate">
    <PARAM NAME="quality" VALUE="high">
    <PARAM NAME="bgcolor" VALUE="#FFFFFF">
    <PARAM NAME="allowscriptaccess" VALUE="always">
    <embed src="http://ws.amazon.com/widgets/q?ServiceVersion=20070822&MarketPlace=US&ID=V20070822%2FUS%2
Famapex-20%2F8010%2F87ca3844-0ba9-4a65-9373-cc2187e5e967&Operation=GetDisplayTemplate" 
id="Player_87ca3844-0ba9-4a65-9373-cc2187e5e967" quality="high" bgcolor="#ffffff" 
name="Player_87ca3844-0ba9-4a65-9373-cc2187e5e967" 
allowscriptaccess="always"  type="application/x-shockwave-flash" align="middle" height="200px" width="600px"></embed>
</OBJECT>
<NOSCRIPT><A HREF="http://ws.amazon.com/widgets/q?ServiceVersion=20070822&MarketPlace=US&ID=V20070822%2FUS%2Famapex-20%
2F8010%2F87ca3844-0ba9-4a65-9373-cc2187e5e967&Operation=NoScript">Amazon.com Widgets</A></NOSCRIPT>

Run your page. Your Carousel widget should now be displayed on your page.

Amazon offers many other widgets that can easily and quickly be added to any website. These were just a few examples how you can utilize the web services that Amazon offers it's affiliates.

Additional Resources

Download WebMatrix http://www.microsoft.com/web/webmatrix/

Learn how to Download and Install WebMatrix http://www.microsoft.com/web/post/web-development-101-part-1-getting-started-with-webmatrix

Learn more http://www.microsoft.com/web/post/Web-Development-101-using-WebMatrix

Create a website with a WebMatrix site template http://www.microsoft.com/web/post/create-a-website-from-a-webmatrix-site-template

Publish your website http://www.microsoft.com/web/post/how-to-publish-a-web-application-using-webmatrix

Learn to download, edit and republish your website http://www.microsoft.com/web/post/download-edit-and-republish-your-website-with-webmatrix

You can discuss this article using the adjacent Facebook talkback.

For technical questions please visit our discussion forums, where we have a vibrant community of developers like you, as well as Microsoft engineers who are ready to answer your questions!