Get external RSS on your website using Google AJAX Feed API - Is it easy?

Google is without any doubt a very innovative player on the internet! In this post I want to try out Google AJAX Feed API. What is that you might ask: Well it is a way to publish RSS feed easily on your website, without conflicting with cross-domain scripting.
I will try in this post to implement it and write what I did... Enjoy!

Step 1 – Locating project under Google Code area00:00

Well, that area is huge! So after logging in, I had to locate the Feed API project.
Found it here: http://code.google.com/intl/da/apis/ajaxfeeds/.

As my other posts which asks "is it easy?", I will follow the instruction on the page.

Step 2 – Read the "How do I start?"00:06

All I had to do was to sign up for a free API key! After that I got the key and an example!

Step 3 – Paste in the example code00:09

I pasted in the example code from Google AJAX Feed "API How do I start" area and voila!
The feed should be live now!

Step 4 – Viewing this page (to see if it works)00:14

It works! But there is (ofcause) no styling and no links on each RSS feed item:
The explanation:
div.appendChild(document.createTextNode(entry.title));
After reading the information about the JSON Result Format, I change it to:
var a = document.createElement('a'); a.innerHTML = entry.title; a.href = entry.link; a.target = entry.link; div.appendChild(a);

Step 5 – View result with link00:26

The link worked, but why only 4 results? I read further in the documentation and found the answer...
I needed to setNumEntries:
feed.setNumEntries(12);

Conclusion00:29

Yes! It is easy! The well documented feature from Google including examples ready to copy, paste and run makes life very easy!
Before I end I will make a small change which will put the result into a <ul>, but in 29 minutes (+0.5 hour brushing up on layout) I did it!

If you have any comments, please comment on the refering post on my BLOG: http://www.netsi.dk/wordpress.

Step 6 – Finishing the post + upload/link01:03

Example

The final code

<script type="text/javascript"
  src="http://www.google.com/jsapi?key=[MYKEY]"></script>

<script type="text/javascript">
google.load("feeds", "1");

function initialize() {
  var url = "http://feeds.feedburner.com/tedtalks_video";
  var feed = new google.feeds.Feed(url);
  feed.setNumEntries(12);
  feed.load(function(result) {
    if (!result.error) {
      var ul = document.createElement('ul');
      var container = document.getElementById("feed");
      for (var i = 0; i < result.feed.entries.length; i++) {
        var entry = result.feed.entries[i];
        //var div = document.createElement("div");
        // div.appendChild(document.createTextNode(entry.title));
        var li = document.createElement('li');
        var a = document.createElement('a');
        a.innerHTML = entry.title;
        a.href = entry.link;
        a.target = entry.link;
        li.appendChild(a);
        ul.appendChild(li);
      }
      container.appendChild(ul);
    }
  });
}
google.setOnLoadCallback(initialize);
</script>