Thanks for that, Mike! Very cool. I'll have to check it out.
(and thanks for including learningjquery.com in the feed list.) :-)
--Karl
_________________
Karl Swedberg
www.englishrules.com
www.learningjquery.com
On Apr 20, 2007, at 10:21 AM, Mike Alsup wrote:
In case anyone missed it, Google recently released an API for mashing
feeds on the client.
http://googleajaxsearchapi.blogspot.com/2007/04/announcing-google-
ajax-feed-api.html
It's really quite cool (and fast). Below is a short demo of how it
works. To try it, replace [your key] with your Google API key.
Mike
<html>
<head>
<style type="text/css">
body { font-family: 'trebuchet ms'; color: #555; font-size: small; }
div.feed { margin: 20px; padding: 20px; border: 1px dashed #ddd;
background: #ffd }
div.date { font-size: smaller; color: #aaa }
h1.blog { font-size: large; padding: 5px; margin: 2px 0; text-
align: center }
h2.feed { 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="http://www.google.com/jsapi?key=[your key]"></script>
<script type="text/javascript">
google.load("feeds", "1");
google.setOnLoadCallback(function() {
var sites = [
'http://jquery.com/blog/feed/',
'http://feeds.feedburner.com/JohnResig',
'http://bassistance.de/feed/',
'http://www.stilbuero.de/feed/atom/',
'http://www.learningjquery.com/feed/',
'http://www.reybango.com/rss.cfm',
'http://feeds.feedburner.com/WebDeveloperBlog'
];
jQuery.each(sites, function(j,site) {
var feed = new google.feeds.Feed(site);
feed.load(function(result) {
if (!result.error) {
var max = Math.min(result.feed.entries.length, 5);
// 5 at most
var f = $('<div class="feed"></div>').appendTo
('body');
f.append('<h1 class="blog">'+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="feed"><a
href="'+link+'">'+title+'</a></h2>')
.append('<div class="date">'+date+'</div>')
.append('<div class="snip">'+snip+'</
div> ');
}
}
});
});
});
</script>
</head>
<body></body>
</html>
