Hackernoon logoUsing Rainforest API With WordPress [A How-To Guide] by@ryan-geddes

Using Rainforest API With WordPress [A How-To Guide]

Ryan Geddes Hacker Noon profile picture

@ryan-geddesRyan Geddes

Rainforest API is an alternative to the Amazon Product API provided to Amazon Associates. If you are thiking of building shopping comparisson sites with Amazon links and you don’t have an API key, or if you want to build a lot of pages very quickly without limitation, using Rainforest API is the answer. If you are serious about earning money as an Amazon Affiliate and want to make thousands of pages, do yourself a favor and start the project off right.

Amazon’s API limit is tied to your revenue and number of calls. The last thing you need is Amazon throttling your site and limiting your revenue. Consider building using the Rainforest API.

Many companies choose to run WordPress no matter what the project. Creating shopping comparison engines or top product lists are not the first thing most people think of when they think of WordPress the CMS. However, when you look at WooCommerce and other highly functional plugins, you can see why companies are ensisting WordPress be used in all applications even if its not the easiest integration. Rainforest API has excellent documentation, but their documentation begins with the call and ends with the output. The guide is for the WordPress user.

How To

This “How To” guide will walk you through creating API calls and displaying data on a WordPress page. By the end of the guide you will have a page displaying the Top 10 products for the category “Musical Instruments”. Once you have completed this guide you will be comfortable working with the API to output data to Wordress pages.

What You Need

Getting Started

  1. Sign into WordPress as Admin.Click on Plugins, Then Add New Plugin.
  2. Search for Json Content Importer, Install and Activate.
  3. If you are using a caching plugin make sure it is setup to automatically detect changes or make sure you clear your cache when testing.
  4. Click on Pages then “Add New“, give your page the title Top 10 Musical Instrument Best Sellers List.
  5. Click on Publish.View your page, it should be empy with no errors showing.
  6. Leave the tab with your WordPress site open. and open two additional tabs. On one go to rainforestapi.com and the other go to amazon.com.

How To Get Your API Link

1. At rainforestapi.com click on “Log in” and enter the credentials you used when you signed up. If you haven’t signed up, do so now and login.

2. Click on API Playground on the left side of the screen.

3. Go to Amazon.com in your other open browser tab and navigate to the Best Sellers https://www.amazon.com/Best-Sellers/zgbs/

4. Click on Musical Instruments on the left hand side.

5. Copy the URL from the Musical Instruments Best Sellers page and navigate back to the Rainforest API tab thats open in your browser.

You should still be in the API Playground (if not click on it).

7. The first Dropdown box in API Playground says Type and has Product set by default. Select BestSellers from the drop down list.

8. In the URL box paste the link from the Musical Instrument Best Seller list we copied from Amazon.com: https://www.amazon.com/Best-Sellers-Musical-Instruments/zgbs/musical-instruments/ref=zg_bs_nav_0

9. The rest of the boxes on this page should be blank except for output which should be JSON and Associate ID which is your Amazon Associate ID. You can find this ID by logging in to your Amazon Associates account, or leave blank if you dont have one yet.

10. Press the Send API Request button.

11. Scroll up to the top of the page. You should have the output from the API request displaying on the right hand side. You will see in the output something called bestsellers, this array contains all the information needed. Click on this array and click on one of the numbers to display the single product information.

*Note that inside bestsellers there is another array called price. The code accesses the price array to demonstrate this with the JSON Content Importer shortcode for WordPress.

12. In the Rainforest API dashboard click on “Code Sample“.

13. Rainforest API offers Code Samples in URL, Curl, Node.JS, Python and PHP. For our purposes, select URL and click the copy button to copy the URL to clipboard. Paste this URL somewhere safe, the URL should begin with https://api.rainforestapi.com — NOT the Amazon link from earlier.

Configuring WordPress For Rainforest API

14. Go back to the browser tab that has your WordPress session open. Open the page you created earlier called Top 10 Musical Instrument Best Seller List.

15. Copy the code between the leading /* and ending */ comment tags:

<code class="markup--code markup--pre-code">/* [jsoncontentimporter url=”https://api.rainforestapi.com/request?api_key=XXXXXXXXXXXXXXXXXXX&amp;type=bestsellers&amp;associate_id=quadrant0d-20&amp;output=json&amp;url=https%3A%2F%2Fwww.amazon.com%2FBest-Sellers-Musical-Instruments%2Fzgbs%2Fmusical-instruments%2Fref%3Dzg_bs_nav_0”]<br>&lt;div style="overflow-x:auto;"&gt;<br>&lt;table class="tenstyletable"&gt;<br>&lt;tr&gt;&lt;td&gt;&lt;hr&gt;&lt;/td&gt;&lt;/tr&gt;<br>{subloop-array:bestsellers:10}{subloop:bestsellers.price:10}<br>&lt;tr&gt;<br>&lt;td&gt;&lt;b&gt;&lt;center&gt;{bestsellers.rank}. &lt;/b&gt;&lt;a href="{bestsellers.link}" rel="nofollow"&gt;{bestsellers.title}&lt;/a&gt;&lt;/center&gt;&lt;/td&gt;<br>&lt;/tr&gt;<br>&lt;tr&gt;<br>&lt;td&gt;&lt;center&gt;&lt;a href="{bestsellers.link}" rel="nofollow"&gt;&lt;img src="{bestsellers.image}"&gt;&lt;/a&gt;&lt;/center&gt;&lt;/td&gt;<br>&lt;/tr&gt;<br>&lt;tr&gt;<br>&lt;td&gt;&lt;center&gt;&lt;b&gt;Rating: {bestsellers.rating}&lt;/b&gt;&lt;/center&gt;&lt;/td&gt;<br>&lt;/tr&gt;<br>&lt;tr&gt;<br>&lt;td&gt;&lt;center&gt;&lt;a href="{bestsellers.link}" rel="nofollow"&gt;&lt;b&gt;{bestsellers.price.raw}&lt;/b&gt;&lt;/td&gt;<br>&lt;/tr&gt;<br>&lt;tr&gt;<br>&lt;td&gt;&lt;center&gt;&lt;img src="https://i.ibb.co/wMt3hy2/homebtn-1.jpg"&gt;&lt;/center&gt;&lt;/a&gt;&lt;/b&gt;&lt;/center&gt;&lt;/td&gt;<br>&lt;/tr&gt;<br>&lt;tr&gt;&lt;td&gt;&lt;hr&gt;&lt;/td&gt;&lt;/tr&gt;<br>{/subloop:bestsellers.price}{/subloop-array:bestsellers}&lt;/table&gt;&lt;/div&gt;<br>[/jsoncontentimporter] */</code>

16. Replace the URL after [jsoncontentimporter url=” with the URL you copied from Rainforest API when we sent the request for the Top 10 Musical Instrument Best Seller List. At this point the code should start displaying products if you preview the post. Click Here to see the finished example.

As an alternative, you can simply replace the XXXXXXXX’s in the above code with your API key.

17. The product list will likely look malformed, but the data should show up. If you look at the code, class=”tenstyletable” is defined by the table tag. We need to add CSS to Worpress to style the table.

18. On your Top 10 Musical Instruments page, click customize on the WordPress Admin bar, then click on Additional CSS, and paste the following code:

<code class="markup--code markup--pre-code">table.tenstyletable td {<br>	border-collapse: collapse;<br>	display: table-cell;<br>  vertical-align: middle;<br>  border:0;<br>}</code>

19. Your table should now be showing the Top 10 list. If your formatting is off simply adjust the CSS. Click Here to see an example page.

This guide provides the logic to build out more complicated pages using the Rainforest API and WordPress. With a few minor changes to the boilerplate code above, you can display other information the feed provides or change the way the JSON output is handled. If you want to increase the the number of products displayed for example, simply change the numbers in {subloop-array:bestsellers:10} and {subloop:bestsellers.price:10} — instead of 10 use a another number.

For more advanced configurations be sure to read the JSON-content-importer documents.


Join Hacker Noon

Create your free account to unlock your custom reading experience.