Loading 6 Votes - +

Using Google's AJAX Feed API to Inject RSS into Any Page

2_article_2702_thumb_code_logo

A few days ago I posed a question asking how you keep up with your social networks. Well, I gave it a few days and then came up with a solution (though I don’t know if I’ll ever really keep up). I thought I’d share my answer as it makes use of Google’s AJAX-based Feed API.

I’ve had the domain markmcb.com forever. It was a blog before there were “blogs,” but now given the plethora of highly specialized sites it was losing its utility. But rather than give in altogether and make something like Facebook the place to connect with me, I decided to transform markmcb.com into a hub for both myself and others.

Some sites offered badges that let me easily plug code into markmcb.com. But other sites, like OmniNerd, only offered RSS. I wasn’t too thrilled about the idea of building a custom solution just to inject some RSS. Luckily, Google had my back. You can reference the source code on markmcb.com as it’s pretty short, but here’s the gist of what I had to do.

Get an API key

If you’ve already got a Google account, this takes about 10 seconds.

Build a target

The feed content has to go somewhere. Just make a div or something with a unique id in your html. In my case, “omninerd-markmcb” is my target div tag.


<div id="omninerd_div" class="feed_div">
  <p>Latest Writing:</p>
  <div id="omninerd-markmcb"></div>
</div>

Build a small javascript file (using a Google template)

Google gives you a template you can use. I altered it to point to my feed and only show 2 items. I also changed the javascript a bit to make the article titles links. If you compare my script to Google’s, you’ll see the difference.


google.load("feeds", "1");

function initialize() {
  var feed = new google.feeds.Feed("http://www.omninerd.com/nerds/markmcb/feeds/all_content");
  feed.setNumEntries(2);
  feed.load(function(result) {
    if (!result.error) {
      var container = document.getElementById("omninerd-markmcb");
      for (var i = 0; i < result.feed.entries.length; i++) {
        var entry = result.feed.entries[i];
        var link = document.createElement("a");
        link.setAttribute('href', entry.link);
        link.appendChild(document.createTextNode(entry.title));
        var div = document.createElement("div");
        div.appendChild(link);
        container.appendChild(div);
      }
    }
  });
}
google.setOnLoadCallback(initialize);

Reference Google’s javascript and your own in the header

The last thing you need to do is call your script and a Google script from your header. Note that you should place your API key where it says YOUR-API-KEY.


<script type="text/javascript" src="http://www.google.com/jsapi?key=YOUR-API-KEY">
</script>
<script type="text/javascript" src="google-feed-api-omninerd-markmcb.js">
</script>

That’s it. The result is a fully customizable RSS feed injected into whatever html you like. If you view markmcb.com, the first two stripes use badges offered by the respective sites. The last uses the technique outlined above.

Similarly tagged OmniNerd content:

Information This article was edited after publication by the author on 04 Jun 2009. View changes.

Share & Socialize

What is OmniNerd?

Omninerd_icon Welcome! OmniNerd's content is generated by nerds like you. Learn more.

Voting Booth

America's involvement with the ISIS crisis should be?

6 votes, 0 comments