logoBrett Rawlins

Display an RSS feed using the Google Feed API

August 23, 2013

Some time you may want to grab an RSS feed from another site and display it on yours. Here's how you can do it using the Google Feed API.

1. Include the Google Loader script

The "recommended" place for this is inside the <head> tags of your page, but you can really put it anywhere. It just has to be included before your script in step 3.

<!-- include Google Loader script -->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>

 2. Add a container element for your feed

Put this wherever you want the feed to be displayed. Give it an id attribute so you can reference it in your script.

<div id="feed-container"></div>

 3. Add your script

A good place to put this is just before the closing </body> tag of your page. You'll want to adjust the URL of the feed and the number of entries to show. You can also completely control the markup that is output. Inside the for loop you can access the properties of each entry with the entry object. See the documentation on the JSON result format for details.

<script type="text/javascript">
    // load Google Feed API
    google.load("feeds", "1");
    // specify callback function
    // define function
    function showFeed() {
        // get feed container
        var container = document.getElementById("feed-container");
        // set up feed
        var feed = new google.feeds.Feed("http://feeds.feedburner.com/nettuts");
        // load it
        feed.load(function(result) {
            if (!result.error) {
                // add heading
                var heading = document.createElement("h3");
                heading.innerHTML = '<a href="' + result.feed.link + '">' + result.feed.title + '</a>';
                // add entries
                for (var i = 0; i < result.feed.entries.length; i++) {
                    var entry = result.feed.entries[i];
                    var li = document.createElement("li");
                    li.innerHTML = '<a href="' + entry.link + '">' + entry.title + '</a>';

4. Here's the output: