ArtsAutosBooksBusinessEducationEntertainmentFamilyFashionFoodGamesGenderHealthHolidaysHomeHubPagesPersonal FinancePetsPoliticsReligionSportsTechnologyTravel
  • »
  • Business and Employment»
  • Marketing & Sales

How to Embed an Amazon aStore into Backpage Ads

Updated on October 1, 2013
Source

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...

Partial screen shot of aStore embedded in Backpage ad.
Partial screen shot of aStore embedded in Backpage ad.

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>

I know your screen doesn't look like this... this is a screen shot from a Facebook app.  Don't panic, this is for illustrative purposes.
I know your screen doesn't look like this... this is a screen shot from a Facebook app. Don't panic, this is for illustrative purposes.

Secure URL

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.

Allow Scrolling

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>

Almost There

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?!

The Trick!

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.

Tell Me What You Think?

Was this Hub helpful to you?

See results

Comments

    0 of 8192 characters used
    Post Comment

    • rebeccamealey profile image

      Rebecca Mealey 4 years ago from Northeastern Georgia, USA

      I will try this with my blog. (I hope I can do it). Sounds promising. Thanks. Bookmarked and share!

    • Eddie Dagstanyan profile image
      Author

      Eddie Dagstanyan 4 years ago from California

      Thanks, Rebecca! Let me know how it goes. :)

    • profile image

      Dominic Ferro 3 years ago

      I followed everything you showed but I'm having an severe problem.. when I click on any of my categories or shopping cart...nothing happens

    • Eddie Dagstanyan profile image
      Author

      Eddie Dagstanyan 3 years ago from California

      Hi Dominic, sorry for the delayed reply. I've just had a look at an embedded aStore (the one from this example, actually). In Chrome 29, I have no problems accessing categories or the shopping cart. I am having a slight (new) issue with getting IE to see the embedded aStore. However, accessing the aStore directly yields no navigation problems. I'll work on getting this back to normal, assuming it can be fixed with adjustments to the code. Stay tuned.

    Click to Rate This Article