Using the Google Ajax Feed API to aggregate feeds
From Shopify Wiki
So you want to pull the latest titles from your Wordpress blog and publish them on your Shopify site. Or you want to aggregate some news from various RSS feeds out there, news that have to do with the products you sell, etc.
There are many ways to accomplish this. When it comes to Shopify, you'll use Ajax. There is one method that involves very little coding and it goes like this:
Get a Google AJAX Feed API key
Where do you get such a thing? Right here: http://code.google.com/apis/ajaxfeeds/signup.html
Note: you can only get 1 API key per website per Google Account.
Create a snippet called 'feeds'
Go to your Theme Editor page and click on the 'Add a new snippet' link under Snippets.
In your snippet, paste the following code
{{ 'http://www.google.com/jsapi?key=[your API key]' | script_tag }}
{{ 'http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' | script_tag }}
{{ 'jquery.gfeed.js' | asset_url | script_tag }}
<script type="text/javascript">
jQuery.noConflict();
// when the DOM is ready, convert the feed anchors into feed content.
jQuery(function($) {
$('a.feed').gFeed( { target: '#feeds', tabs: true } );
});
</script>
Notes
- If your theme is already using jQuery, then you do not need to include the framework again.
- Replace [your API key] with your Google APi key.
- If you're interested in aggregating only 1 feed, by all means don't use the tabs option.
- The target option is essential though as it tells the gFeed plugin where to insert your feed(s)' content.
- For a list of all options, and more documentation on the gFeed plugin, head over here: http://malsup.com/jquery/gfeed/
In theme.liquid, in the head element, paste the following code
This code will include the snippet feeds.liquid in the head element of your web page:
{% include 'feeds' %}
Upload the gFeed jQuery plugin to your Theme Assets
Here's where you can download the jFeed plugin: http://malsup.com/jquery/gfeed/
In theme.liquid, in the body element, use the following HTML
<div id="feeds"> <a class="feed" href="http://url.to.my.first.feed">First Feed</a> <a class="feed" href="http://url.to.my.second.feed">Second Feed</a> </div>
Notes
- You don't need to use a list if you are to aggregate only 1 feed.
- Make sure that your anchor elements have a class name set to feed.
- Make sure that the div where you want your feed content to be inserted has an id attribute set to feeds.
- Disregard the last 2 notes if you're using your own jQuery code with different selectors.
Super Important
Use the URL(s) to the actual feed(s) !! Do NOT use http://url.to.my.first.feed nor http://url.to.my.second.feed. Yes, people have used those bogus URLs and complained that this tutorial was not working... --Caroline Schnapp 17:04, 10 January 2011 (UTC)
Example
Example shown here: http://mrgoogle.myshopify.com/ Look in the sidebar.


