How to Embed an Amazon aStore into Backpage Ads
The Whole aStore?
Got your Amazon aStore configured and ready, do you? And you advertise on Backpage... a product here, a product there... Tedious, isn't it?
What if you could publish your whole aStore into those Backpage ads of yours? What if your potential customers could see every product in your aStore without ever browsing to another ad? And, what if those customers could explore and buy your products within the ad itself?
Well, I have some very good news for you. They can! With the code provided by Amazon and a very simple HTML trick, you can add your whole aStore to a single ad, enable full functionality (including checkout) for your customers, and make some money.
Ready to Start?
I assume that (since you're reading this) you already know how to create an aStore, so I won't go into that here. There are plenty of instructional articles online to help you with the process if necessary. Of course, there's always the Amazon help section(s), too. Moving on...
Being the opportunist that I am, I decided to leverage Paula Deen's recent "attention" and structure an Amazon aStore based on her name. That's what we'll be working with for this example.
As a note, this Hub is not intended to be about whether Paula is or isn't in the wrong. Let's not start that discussion here...
Get Your aStore Code
In Amazon's Associate Central:
- Use the drop down menu at the upper left of the screen to select the proper tracking ID of your aStore. (This is only necessary if you have multiple aStores in the same account... if you have only one aStore, don't worry about this step.)
- Click "Get Link" in the left menu.
- The page will display a new screen titled "Your store has been published!" Directly below the announcement, you'll see several versions of your aStore link.
- Select the "Embed my store using an inline frame" option. We'll modify this code slightly to optimize it for Facebook integration.
- Copy all of the code in the text box and paste it into a text editor, like Notepad.
The code we'll be working with should be something like:
<iframe src="http://astore.amazon.com/YOURamazonID" width="90%" height="4000" frameborder="0" scrolling="no"></iframe>
Some time ago, when we reviewed how to embed an aStore into a Facebook page, we discussed a potential security issue that would cause problems with certain browsers. Obviously, allowing a customer's browser to exclaim that your store is not secure would not be the best way to win over the public. So, first thing's first...
- Change the http:// within your code to https://
Your new "secure" code should look like:
<iframe src="https://astore.amazon.com/YOURamazonID" width="90%" height="4000" frameborder="0" scrolling="no"></iframe>
Adjust Display Dimensions
Notice that the width is set to 90%? Well, that's 90% of what the browser calculates as the current page size. You can keep this if you like, but I prefer to define the width in pixels. I've found that 800 pixels is just right for an aStore.
- Change width="90%" to width="800px"
I also recommend significantly shortening the height to 1000 pixels or so. Smaller "packaging" is neater.
- Change height="4000" to height="1000px"
Your code should now look like:
<iframe src="https://astore.amazon.com/YOURamazonID" width="800px" height="1000px" frameborder="0" scrolling="no"></iframe>
NOTE: If necessary, you can get a better understanding of Pixels here.
Your aStore can get quite lengthy (even longer than the original 4000 pixels specified). This generally happens if product descriptions are long and there are several product reviews posted as well. By default, scrolling is disabled... and that'll cut off content beyond the specified height. Since we don't want to limit your aStore, we'll enable scrolling.
- Change scrolling="no" to scrolling="yes"
Now, the code should look like:
<iframe src="https://astore.amazon.com/YOURamazonID" width="800px" height="1000px" frameborder="0" scrolling="yes"></iframe>
Your code is just about right... except for one small problem. Backpage doesn't allow the <iframe> attribute in their ads. Nope, simply won't work. Won't happen, no matter how hard you try.
But Eddie! Why did you make me do all that editing for nothing?!
Have I used the term "embed" enough in this Hub? Making this work really is quite simple.
- Replace "iframe" and "/iframe" with "embed" and "/embed," respectively.
Your code should now look like:
<embed src="https://astore.amazon.com/YOURamazonID" width="800px" height="1000px" frameborder="0" scrolling="yes"></embed>
And You're Done
Copy and paste your code into the body of a Backpage ad, add a nice title, and submit...
Note: Backpage will not display the embedded content (your aStore) in the preview part of ad submission (step 2). You'll see a blank screen, as though you've submitted nothing at all. Don't panic... that's just the way the system works. After you've submitted the ad, the content will display as expected. Try one out and see for yourself.