Incorporate and Integrate Amazon aStore with Wordpress Page
aStore is a new Amazon product for Amazon Associates that gives affiliates the ability to create a professional online store in just several minutes and without the need for knowledge or skills of advanced HTML programming. Best of all, Amazon aStore not only can be linked directly from your website, it also can be embedded within and integrated into your website or blog. So you can start your online business selling Amazon or its partners products and earn affiliate referral commissions without even letting your visitors leaving your website.
Amazon has provided 3 options and ways to integrate and publish Amazon aStore, i.e. link directly to your aStore as a stand-alone site, embed your aStore using an inline frame and integrate your aStore using a frameset for websites that use frame layout structure. If you own a normal HTML-based website, integration and incorporation of aStore into the website is very easy and straight forward. Just create a link directly to the aStore online store, or create a new page and insert the iframe or frame layout embeding code that provided by Amazon to the new page, then link to the new page from your main index page. However, if you’re blogging on Wordpress platform, the steps to integrate Amazon aStore with Wordpress are not so straightforward. However, aStore and Wordpress can still be integrated by using Wordpress page template, so that the aStore will appear inside the framework or layout of Wordpress, without the need of any Wordpress plugin.
To insert and embed Amazon aStore into Wordpress so that aStore is integrated with Wordpress, follow these instructions:
- Join and sign up as an Amazon.com Associates.
- Build the aStore by Amazon by following 4 simple steps, where you can select your featured Amazon products that the visitors to your online store will first see, choose which product categories and sub-categories that will display on sidebar, customize the color and design of aStore, and customize aStore sidebar by using Sidebar Widgets.
- After building and customizing the aStore, get your personal link code for aStore. Choose embed my store using an inline frame option to get the link to publish in the Wordpress page.
- Create a custom page template for Wordpress based on your existing Page template, but without the sidebar by deleting the <?php get_sidebar(); ?> line. This is because 800 pixels wide, and for most of the themes for Wordpress, aStore won’t fit within the page if there is any sidebar. As Wordpress templates are heavily aligned and positioned by using CSS DIV tags, you may need to remove DIV in CSS layout that restrict the width of the layout in your aStore page template. Generally, a aStore page template would like similarly like this (comments on template code in italic, can be safely ignored):
<?php
/*
Template Name: aStore Page
*/
?>
The above section is important so that Wordpress will identify the new theme’s php file as a Page template. You can change the template name though.<?php get_header(); ?>
In Wordpress theme’s header, there may be also DIV tag that controls the width in the Page layout. If it’s the case, the remove this line, the copy and paste the everything from Header template, and modify accordingly.<div class=”content”>
Again, this may restrict the width of layout, if so, replace it with your own DIV structure, or simply with <center></center> (which I used) or just remove the line.<iframe src=”http://astore.amazon.com/techgadgetrev-20″ width=”90%” height=”1000″ frameborder=”0″ scrolling=”yes”></iframe>
Replace above line with your own Amazon aStore link, unless you want to donate your commission to me. I personally found that the height is too big, so I reduced it and modified the scrolling to yes. If your layout is just 800 pixels, you might need to modify the width to 100% too.</div>
If you don’t use any DIV above, just remove this line too. If you use <center>, replace with </center>.<?php get_footer(); ?>
Note: You can also exclude the theme’s header and footer (basically mean empty template file just just a line of aStore affiliate link, but that defeat the purpose of integration with Wordpress.
- Upload the new template with aStore code to your Wordpress theme’s directory. So if you’re using Blogsome or Wordpress.com, you may be out of luck.
- Create a new Wordpress static Page by clicking on “Write” then “Write Page”.
- Key in any Title you like, then on the Page Template at the side, choose aStore Page (or whichever name you gave to the new template).
Then save the page. - You’re done. Your integrated Wordpress aStore page has been published.
Related Articles
- Integrate and Display Google AdSense for Search and Co-Op Custom Search Engine Results in WordPress Blog Page Template
- Paginating or Split WordPress Post or Page with NextPage in WordPress Not Working
- Integrate WordPress including Comments with bbPress Forum using bbSync
- How to Change the Frequency or Interval WordPress Auto Saves An Editing Post or Page
- How to Customize, Modify or Change WordPress Database Connection Error Page
- Adding Extra More Fields to WordPress Write/Edit Post/Page Right Column
- 3 Column Relaxation WordPress Theme comments-paged.php for Paged-Comments WordPress Plugin
- Pirates of the Amazon Attacks Amazon.com
- Add NoFollow Relationship to WordPress Blogroll to Increase PageRank
- Amazon Announces New Mobile Shopping Application For iPhone And iPod Touch (With ‘Amazon Remembers’ Feature)
Entries (RSS)
May 18th, 2007 02:51
[...] des Blogs in die Quere kommt. Die Lösung: Die Sidebar muss weg! Wie das funktioniert steht auf My Digital Life und hier auf [...]
April 23rd, 2007 00:31
Thanks, these were very easy instructions to follow: I’ve created a store about Spaina and Spanish things.
April 7th, 2007 11:48
[...] Recommends, which allows us to showcase the products we recommend. There’s a great article on My Digital Life on techniques for integrating your aStore into your [...]
April 6th, 2007 01:18
[...] and customized would appear to the visitors. To do it your selves just google around or visit MyDigitalLife. (also don’t scratch your blog’s design by following this and you need to have a little [...]
April 3rd, 2007 12:22
[...] was also able to incorporate my store (check it out). Major thanks to My Digital Life for a fab tutorial on adding the store page. I never could have done it without the [...]
April 3rd, 2007 11:58
Thank you so much for this tutorial. I would never have had the courage to try this without your guidance!
January 10th, 2007 11:45
Sorry, I’m just confused now, I’ll try again in the morning. I have enabled scroll and placed a 1 pixel border to the inline frame code so you can see here… http://wedreaming.com/?page_id=36
Thanks again for your help, I will keep at this until I understand:)
January 10th, 2007 11:17
You don’t remove div from header.php. You should remove get_header from your astore template, then copy everything from header.php and paste into astore template, and remove the div in astore template.
January 10th, 2007 11:10
I still do not know where the div is coming from.
In the shop.php there is no div code. The only div code that I see is in the header.php. When I edit the header.php to remove this, the other pages are mis-aligned.
I’m stuck.
January 10th, 2007 10:53
Once you remove get_header and copy back the code manually, left out the div i mentioned just now, then check if it works. If fit in proper once your astore align a little bit to the left, then you no need to modify the width of the page in CSS.
January 10th, 2007 10:49
I removed get_header, saved and the shop displayed pretty good, although without my header;)
I manually typed the get_header code back in and save and the right side was cut off a bit again.
I am left with editing my stylesheet code for page widths. I have tried that and was able to get it wide enough to display, but then all the other pages were mis-aligned. I will keep tinkering with it and see if I can solve this. If not, I’ll just remove the header code for the shop page and go from there.
Again, when editing the shop.php page, I do not see any div code. I do see this code in the header.php, but I have tried removing that and that produced more mis-alignments on other pages.
I’m sorry to have been a bother;) I’ll post back when (and if) I get this solved.
Thanks for taking the time with me.
Adam
January 10th, 2007 10:20
Read the post above carefully, you may need to remove get_header and copy and paste the code manually to your template, without the said div.
January 10th, 2007 10:05
I’m sorry, I’m editing the shop template page from the admin–>theme editor–>shop…..this does not show that code.
When I view source from browser, I see that code to be removed….where is that coming from?
January 10th, 2007 09:51
I check your page, you still haven’t try to remove the <div id=”page”> and </div>. If not, you may need to modify your CSS on body.
January 10th, 2007 09:31
After header is the center tag and then the inline frame astore code, then the center end tag.
January 10th, 2007 09:30
I’m sorry to keep bugging you, but I have also removed that code. This is my code minus the php tags…
php start
/*
Template Name: Shop
*/
php end
php start get_header(); php end
php start get_footer(); php end
January 10th, 2007 09:24
Seems like the width of your page is too small, try to remove <div id=”page”> and its respectively close at the bottom.
January 10th, 2007 09:13
I see I can’t post code here…whoops…
January 10th, 2007 09:13
I have removed the sidebar, this is the code in my “shop” page template…
The page is here…
http://wedreaming.com/?page_id=36
I am using the Default Kubrick theme.
January 10th, 2007 09:09
Adam, you may need to remove your sidebar.
January 10th, 2007 08:49
I just found your excellent and esy directions! Thank you! It’s working almost perfecty, but my store is a bit cut off on the right hand side. Any chance you could take a look at the page and the code?
Thanks for any help you can provide:)
Adam
January 6th, 2007 03:27
This was the easiest set of instructions I have encountered since using Wordpress. Now I will be using a-stores as much as possible. Thanx for all you do.
December 14th, 2006 23:31
I’m rebuilding my site (not yet published as I write this) and this trick came in so handy.
Thank you!
October 31st, 2006 00:16
[...] Google AdSense for Search features the ability to let web publishers to open and display search results within the website itself. In other word, the results of a user search performed in Google AdSense for Search box will appear within a frame on a page from the site, so that rather the users need not to leave the publishers’ websites and being taken to Google, while still able to search for information with Google web search. Beside, Google AdSense for Search, Google Co-op also has Custom Search Engine that can be placed and integrated, together with the search results into website, and comes with more customization options such as search refinements, ads positioning, prioritize or limit sites to include in search results, change and modify the look and feel, collaboration with users, ability to create multiple search engine, make money with AdSense, and of course, ability to integrate into existing website and blog templates. To integrate, incorporate, embed and display Google search results from Google AdSense for Search and Google Co-Op Custom Search Engine within the template and theme of WordPress blog, we use the similar steps that used to integrate and embed Amazon aStore into WordPress blog by using additional Page template. You can embed the search results code snippets on a new post if you want to display search results based on your WordPress theme’s Post template. However, as Post doesn’t allow you to select a unique custom template for a single post, you will have the same layout among all the post entries and search results. This is not advisable, as sidebar may take up a lot of space, and the theme’s Post template has contains AdSense ads itself or other customisation that will make the embedded search results appear odd. So using a new Page template is better choice, and the Google search results can be made display on WordPress itself without any need of plugin. [...]
October 14th, 2006 05:47
[...] The implementation into wordpress was extremely easy with the help of the instructions at My Digital Life. Very well done. [...]