To view the api example, you can open the file from the browser (no need to
have a API key and put it on a server). Also, If someone has the time, a
cool plugin idea is an RSS viewer.
Here's a quick and dirty plugin to convert anchors into feed divs.
Modify it to suit your needs:
(function($) {
$.fn.toFeed = function(options) {
return this.each(function() {
var opts = jQuery.extend({
url: this.href,
max: 5
}, options || {});
var $this = $(this);
var feed = new google.feeds.Feed(opts.url);
feed.load(function(result) {
if (!result.error) {
var max = Math.min(result.feed.entries.length, opts.max);
var f = $('<div class="feed"></div>');
f.append('<h1 class="feed">'+result.feed.title+'</h1>');
for (var i = 0; i < max; i++) {
var entry = result.feed.entries[i];
var title = entry.title;
var snip = entry.contentSnippet;
var link = entry.link;
var date = entry.publishedDate;
f.append('<h2 class="feeditem"><a
href="'+link+'">'+title+'</a></h2>')
.append('<div class="feeddate">'+date+'</div>')
.append('<div class="feedsnip">'+snip+'</div> ');
}
$this.after(f).remove();
}
});
});
};
})(jQuery);
Here's a page that uses the above plugin:
<html><head>
<style type="text/css">
#main { width: 300px }
body { font-family: 'trebuchet ms'; color: #555; font-size: small; }
div.feed { margin: 20px; padding: 20px; border: 1px dashed #ddd;
background: #ffd }
div.feeddate { font-size: smaller; color: #aaa }
h1.feed { font-size: large; padding: 5px; margin: 2px 0; text-align: center }
h2.feeditem { font-size: medium; padding: 0; margin: 2px 0 }
</style>
<script type="text/javascript" src="../rel/jquery-1.1.2.js"></script>
<script type="text/javascript" src="feed-from-above.js"></script>
<script type="text/javascript"
src="http://www.google.com/jsapi?key=[your key]"></script>
<script type="text/javascript">
google.load("feeds", "1");
$(function() {
$('a.feed').toFeed();
});
</script>
</head>
<body><div id="main">
<a class="feed" href="http://jquery.com/blog/feed/";>jQuery</a>
<a class="feed" href="http://feeds.feedburner.com/JohnResig";>Resig</a>
<a class="feed"
href="http://www.learningjquery.com/feed/";>Learning jQuery</a>
</div></body>
</html>
