How to Embed an Amazon aStore into a Facebook Page for Free
An aStore in Facebook?
You've decided that affiliate marketing is for you. You've built an Amazon aStore. You've spent your time, diligently sifting through products to add to it...
Harnessing the power of social media, you even have a Facebook page dedicated to your affiliate marketing efforts... You created a timeline cover photo to clearly express the page visually... You post status updates to that Facebook page with links to specific products in your aStore...
But wouldn't it be awesome if you could show off the whole aStore right in that Facebook page? Well... you can!
Have a look at the Communist Closet Facebook page, for example. Notice the tab titled "Soviet Shop?"
The Soviet Shop is an Amazon aStore embedded directly into the Facebook page with a little HTML and a "Facebook-legal" app. No, we're not hacking anything... just making use of resources.
What You'll Need
- Admin access to a Facebook page (if you created it, you already have admin access)
- Free custom tab app (I like to use Static HTML: iframe tabs)
- Amazon aStore and its associated link
Do yourself a favor... have Facebook and Amazon Associate Central open in separate browser tabs (or even separate browsers, if you prefer). That way, you can go back and forth between the two if the need arises.
Adding the App
Navigate to the app within Facebook (with the link above) and click the "install" button to add the app to your page. On the next screen, the app will ask you to confirm the installation destination (the page in which you will install the app) if you admin more than one Facebook page.
Select the proper destination page and click the "install" button to confirm. Yes, it really is that simple.
Edit the Tab Content
After the app installation is complete, return to your page. You'll find a new tab titled "Welcome!" on your screen. Click it and let's work some magic!
Don't worry about the tab title and image just yet, we'll get to those shortly.
Clicking on your new Welcome tab will bring you to this editing screen. Here, you'll be able to:
- Host your "code" in the index.html section
- Organize code further in the style.css and script.js sections (for more advanced users)
- Change tab settings
- Create a Fan-Gate (we'll do that in another Hub)
By default, you'll land on the index.html section of the app (this is where we'll do all of our work). Please delete the existing text in that section.
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 the app (index.html section) within Facebook.
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>
When first pasting your link code into the app, you'll see a message warning about your aStore URL being insecure. No, the link won't ask you if its source code makes it look fat. But, some browsers may not display your aStore properly because they don't "think" that the store is hosted on a secure server. This is particularly important here because, after all, we don't want to make your potential customers paranoid when shopping.
So, first thing's first... Change the http:// within your code to https://
Adjust Display Dimensions
Now, we'll change the displayed dimensions of your aStore within the Facebook page.
Notice that the width is set to 90%? Well, that's 90% of what the browser calculates as the current page size. This will be absolutely inaccurate... We'll specify the width as 815 pixels to fit into the iframe app.
Change width="90%" to width="815px"
I also recommend shortening the height (significantly) to 1000 or even 1200 pixels. It'll make your content a little more contained...
Change height="4000" to height="1200px"
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"
Your finished code should now look something like this:
<iframe src="https://astore.amazon.com/YOURamazonID" width="815px" height="1200px" frameborder="0" scrolling="yes"></iframe>
Don't forget to hit the "Save & Publish" button in the upper right corner. You may also preview your work at any time with the adjacent "Preview" button...
OK, I'm nitpicking... We have iframe code within an iframe app. Yes, it's redundant. Yes, it should be fixed. But, for ease of use in this beginner's level guide, I'm going to leave it as is. Don't judge me.
Now that your aStore integration is complete, you'll want that pesky little "Welcome!" button on the front page to look a little more meaningful, right?
- Return to the "front end" of your Facebook page.
- Click the small button (with a downward pointed triangle) to the immediate right of all page tabs.
- As the page expands, hover your mouse over the new "Welcome!" tab.
- You'll notice a new icon (pencil) appear over the tab. Click this icon for a new drop-down menu.
- From the drop-down menu, click "Edit Settings."
- A popup window will appear in which you can change the tab's name and add a custom image to display as the button.
- Customize the tab as you please.