Response title
This is preview!
Move this topic
[jQuery] Google AJAX Feed API
in Using jQuery
•
16 years ago
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>
Replies(25)
Re: [jQuery] Google AJAX Feed API
16 years ago
<HTML><BODY style="word-wrap: break-word; -khtml-nbsp-mode: space; -khtml-line-break: after-white-space; ">Thanks for that, Mike! Very cool. I'll have to check it out.<DIV><BR class="khtml-block-placeholder"></DIV><DIV>(and thanks for including learningjquery.com in the feed list.) :-)<BR><DIV> <SPAN class="Apple-style-span" style="border-collapse: separate; border-spacing: 0px 0px; color: rgb(0, 0, 0); font-family: Helvetica; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; text-align: auto; -khtml-text-decorations-in-effect: none; text-indent: 0px; -apple-text-size-adjust: auto; text-transform: none; orphans: 2; white-space: normal; widows: 2; word-spacing: 0px; "><BR class="Apple-interchange-newline"><SPAN class="Apple-style-span" style="border-collapse: separate; border-spacing: 0px 0px; color: rgb(0, 0, 0); font-family: Helvetica; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; text-align: auto; -khtml-text-decorations-in-effect: none; text-indent: 0px; -apple-text-size-adjust: auto; text-transform: none; orphans: 2; white-space: normal; widows: 2; word-spacing: 0px; "><DIV><BR class="khtml-block-placeholder"></DIV><DIV>--Karl</DIV><DIV>_________________</DIV><DIV>Karl Swedberg</DIV><DIV>www.englishrules.com</DIV><DIV>www.learningjquery.com</DIV><DIV><BR class="khtml-block-placeholder"></DIV><BR class="Apple-interchange-newline"></SPAN></SPAN> </DIV><BR><DIV><DIV>On Apr 20, 2007, at 10:21 AM, Mike Alsup wrote:</DIV><BR class="Apple-interchange-newline"><BLOCKQUOTE type="cite"><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; min-height: 14px; "><BR></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">In case anyone missed it, Google recently released an API for mashing</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">feeds on the client.</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; min-height: 14px; "><BR></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><A href="http://googleajaxsearchapi.blogspot.com/2007/04/announcing-google-ajax-feed-api.html">http://googleajaxsearchapi.blogspot.com/2007/04/announcing-google-ajax-feed-api.html</A></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; min-height: 14px; "><BR></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">It's really quite cool (and fast).<SPAN class="Apple-converted-space"> </SPAN>Below is a short demo of how it</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">works.<SPAN class="Apple-converted-space"> </SPAN>To try it, replace [your key] with your Google API key.</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; min-height: 14px; "><BR></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">Mike</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; min-height: 14px; "><BR></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; min-height: 14px; "><BR></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><html></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><head></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><style type="text/css"></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">body { font-family: 'trebuchet ms'; color: #555; font-size: small; }</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">div.feed { margin: 20px; padding: 20px; border: 1px dashed #ddd;</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">background: #ffd }</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">div.date { font-size: smaller; color: #aaa }</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">h1.blog { font-size: large; padding: 5px; margin: 2px 0; text-align: center }</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">h2.feed { font-size: medium; padding: 0; margin: 2px 0 }</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "></style></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><script type="text/javascript" src="../rel/jquery-1.1.2.js"></script></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><script type="text/javascript"</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">src="<A href="http://www.google.com/jsapi?key=[your">http://www.google.com/jsapi?key=[your</A> key]"></script></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><script type="text/javascript"></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><SPAN class="Apple-converted-space"> </SPAN>google.load("feeds", "1");</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><SPAN class="Apple-converted-space"> </SPAN>google.setOnLoadCallback(function() {</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><SPAN class="Apple-converted-space"> </SPAN>var sites = [</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><SPAN class="Apple-converted-space"> </SPAN>'<A href="http://jquery.com/blog/feed/'">http://jquery.com/blog/feed/'</A>,</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><SPAN class="Apple-converted-space"> </SPAN>'<A href="http://feeds.feedburner.com/JohnResig'">http://feeds.feedburner.com/JohnResig'</A>,</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><SPAN class="Apple-converted-space"> </SPAN>'<A href="http://bassistance.de/feed/'">http://bassistance.de/feed/'</A>,</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><SPAN class="Apple-converted-space"> </SPAN>'<A href="http://www.stilbuero.de/feed/atom/'">http://www.stilbuero.de/feed/atom/'</A>,</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><SPAN class="Apple-converted-space"> </SPAN>'<A href="http://www.learningjquery.com/feed/'">http://www.learningjquery.com/feed/'</A>,</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><SPAN class="Apple-converted-space"> </SPAN>'<A href="http://www.reybango.com/rss.cfm'">http://www.reybango.com/rss.cfm'</A>,</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><SPAN class="Apple-converted-space"> </SPAN>'<A href="http://feeds.feedburner.com/WebDeveloperBlog'">http://feeds.feedburner.com/WebDeveloperBlog'</A></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><SPAN class="Apple-converted-space"> </SPAN>];</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; min-height: 14px; "><BR></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><SPAN class="Apple-converted-space"> </SPAN>jQuery.each(sites, function(j,site) {</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><SPAN class="Apple-converted-space"> </SPAN>var feed = new google.feeds.Feed(site);</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><SPAN class="Apple-converted-space"> </SPAN>feed.load(function(result) {</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><SPAN class="Apple-converted-space"> </SPAN>if (!result.error) {</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><SPAN class="Apple-converted-space"> </SPAN>var max = Math.min(result.feed.entries.length, 5);</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">// 5 at most</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><SPAN class="Apple-converted-space"> </SPAN>var f = $('<div class="feed"></div>').appendTo('body');</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><SPAN class="Apple-converted-space"> </SPAN>f.append('<h1 class="blog">'+result.feed.title+'</h1>');</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><SPAN class="Apple-converted-space"> </SPAN>for (var i = 0; i < max; i++) {</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><SPAN class="Apple-converted-space"> </SPAN>var entry = result.feed.entries[i];</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><SPAN class="Apple-converted-space"> </SPAN>var title = entry.title;</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><SPAN class="Apple-converted-space"> </SPAN>var snip<SPAN class="Apple-converted-space"> </SPAN>= entry.contentSnippet;</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><SPAN class="Apple-converted-space"> </SPAN>var link<SPAN class="Apple-converted-space"> </SPAN>= entry.link;</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><SPAN class="Apple-converted-space"> </SPAN>var date<SPAN class="Apple-converted-space"> </SPAN>= entry.publishedDate;</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; min-height: 14px; "><BR></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><SPAN class="Apple-converted-space"> </SPAN>f.append('<h2 class="feed"><a</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">href="'+link+'">'+title+'</a></h2>')</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><SPAN class="Apple-converted-space"> </SPAN>.append('<div class="date">'+date+'</div>')</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><SPAN class="Apple-converted-space"> </SPAN>.append('<div class="snip">'+snip+'</div> ');</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><SPAN class="Apple-converted-space"> </SPAN>}</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><SPAN class="Apple-converted-space"> </SPAN>}</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><SPAN class="Apple-converted-space"> </SPAN>});</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><SPAN class="Apple-converted-space"> </SPAN>});</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><SPAN class="Apple-converted-space"> </SPAN>});</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "></script></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "></head></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><body></body></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "></html></DIV> </BLOCKQUOTE></DIV><BR></DIV></BODY></HTML>
Leave a comment on kswedberg's reply
Re: [jQuery] Google AJAX Feed API
16 years ago
Hi Karl,
I just realized that Ajaxian highlighted the API recently so I guess
this is old news to most folks (unless they've been busy writing a
book!).
Mike
Leave a comment on malsup's reply
Re: [jQuery] Google AJAX Feed API
16 years ago
I'm going to let my ignorance show here for a second :o)
Can you explain what you mean by "mashing feeds on the client"? I'm not really
well versed in RSS feeds (which is what I'm assuming you mean by "feeds") so I'm
interested in what this means.
Thanks Mike!
Chris
Mike Alsup
Leave a comment on chris.s.jordan's reply
Re: [jQuery] Google AJAX Feed API
16 years ago
Hi Chris,
Typically you need a server-side component to pull off a mashup
because you're combining content from multiple sources. JavaScript
employs a same origin policy to prevent XHR requests to foreign
domains so you need to do your mashing on the server. But with this
new Google API you can mash feed urls on the client because they're
providing the server-side logic for you. Thanks, Google!
Mike
Leave a comment on malsup's reply
Re: [jQuery] Google AJAX Feed API
16 years ago
So by "mashing" you mean supplying multiple feeds from different domains? Maybe
I should just google "mashing feeds" or "feed mashing defined" or something.
Chris
Mike Alsup
Leave a comment on chris.s.jordan's reply
Re: [jQuery] Google AJAX Feed API
16 years ago
I have the api key, it is indeed sharp. Did some yesterday with it.The code
below looks interesting, but when I do it I get a blank page.
Have the latest jquery1.1.2.js and key, page remains blank? Any demo of this
to see whats wrong>
Bruce P
----- Original Message -----
From: "Mike Alsup" <malsup@gmail.com>
To: "jQuery Discussion" <jquery-en@googlegroups.com>
Sent: Friday, April 20, 2007 10:21 AM
Subject: [jQuery] Google AJAX Feed API
Leave a comment on bruce.jquery2's reply
Re: [jQuery] Google AJAX Feed API
16 years ago
Hi Bruce,
Make sure the path to jquery and the file name are correct. I can't
post a demo from behind my firewall but I can put something online
later.
Mike
Leave a comment on malsup's reply
Re: [jQuery] Google AJAX Feed API
16 years ago
Mike,
Understood thanks for answering. Paths tripple checked
Your way of writing it looks interesting, didn't know you could specify a
feed like that.
Google uses:
executeList : "Google News","Digg", "Technorati","Google", "Yahoo"] etc
Maybe something is lost in code by email dunno:
http://www.bkdesign.ca/1jqrss.html
Bruce P
----- Original Message -----
From: "Mike Alsup" <malsup@gmail.com>
To: <jquery-en@googlegroups.com>
Sent: Friday, April 20, 2007 12:51 PM
Subject: [jQuery] Re: Google AJAX Feed API
Leave a comment on bruce.jquery2's reply
Re: [jQuery] Google AJAX Feed API
16 years ago
Yeah, you've got a js error on the line that got wrapped.
Mike
Leave a comment on malsup's reply
Re: [jQuery] Google AJAX Feed API
16 years ago
phenomenal!
Thanks that was it!
Nice work, will play with this a while as its quite different than Google's
examples.
Thank you very much,
Bruce P
----- Original Message -----
From: "Mike Alsup" <malsup@gmail.com>
To: <jquery-en@googlegroups.com>
Sent: Friday, April 20, 2007 1:22 PM
Subject: [jQuery] Re: Google AJAX Feed API
Leave a comment on bruce.jquery2's reply
Re: [jQuery] Google AJAX Feed API
16 years ago
It's actually quite similar to the example posted here:
http://code.google.com/apis/ajaxfeeds/documentation/
My code just uses jQuery instead of DOM code to create the page.
Mike
Leave a comment on malsup's reply
Re: [jQuery] Google AJAX Feed API
16 years ago
Well, not to me lol.
Nice work!
Is there a way to get it to say:
Published 5 minutes ago?
Bruce
----- Original Message -----
From: "Mike Alsup" <malsup@gmail.com>
Leave a comment on bruce.jquery2's reply
Re: [jQuery] Google AJAX Feed API
16 years ago
What would one add to this to get it to update in real time?
That would be super cool!
bruce P
----- Original Message -----
From: "Mike Alsup" <malsup@gmail.com>
To: <jquery-en@googlegroups.com>
Sent: Friday, April 20, 2007 2:42 PM
Subject: [jQuery] Re: Google AJAX Feed API
Leave a comment on bruce.jquery2's reply
Re: [jQuery] Google AJAX Feed API
16 years ago
> Is there a way to get it to say:
> Published 5 minutes ago?
Well, you have the pub date so from that you can calculate whatever
you want to display.
> What would one add to this to get it to update in real time?
You can reload the feeds as often as you want but ultimately you're at
the mercy of Google's FeedFetcher cache. For details:
http://code.google.com/apis/ajaxfeeds/documentation/#Caching
Mike
Leave a comment on malsup's reply
Re: [jQuery] Google AJAX Feed API
16 years ago
Hi, This is a very cool use for JQuery!
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.
See <a href="http://web20.originalsignal.com/">http://web20.originalsignal.com/</a> for a great RSS viewer written with prototype
regards
<div><span class="gmail_quote">On 4/20/07, <b class="gmail_sendername">
BKDesign Solutions</b> <<a href="mailto:bruce@bkdesign.ca">bruce@bkdesign.ca</a>> wrote:</span><blockquote class="gmail_quote" style="border-left: 1px solid rgb(204, 204, 204); margin: 0pt 0pt 0pt 0.8ex; padding-left: 1ex;">
What would one add to this to get it to update in real time?
That would be super cool!
bruce P
----- Original Message -----
From: "Mike Alsup" <<a href="mailto:malsup@gmail.com">malsup@gmail.com
</a>>
To: <<a href="mailto:jquery-en@googlegroups.com">jquery-en@googlegroups.com</a>>
Sent: Friday, April 20, 2007 2:42 PM
Subject: [jQuery] Re: Google AJAX Feed API
>
> It's actually quite similar to the example posted here:
>
> <a href="http://code.google.com/apis/ajaxfeeds/documentation/">http://code.google.com/apis/ajaxfeeds/documentation/</a>
>
> My code just uses jQuery instead of DOM code to create the page.
>
> Mike
>
>> Nice work, will play with this a while as its quite different than
>> Google's
>> examples.
>
>
</blockquote></div>
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.
See <a href="http://web20.originalsignal.com/">http://web20.originalsignal.com/</a> for a great RSS viewer written with prototype
regards
<div><span class="gmail_quote">On 4/20/07, <b class="gmail_sendername">
BKDesign Solutions</b> <<a href="mailto:bruce@bkdesign.ca">bruce@bkdesign.ca</a>> wrote:</span><blockquote class="gmail_quote" style="border-left: 1px solid rgb(204, 204, 204); margin: 0pt 0pt 0pt 0.8ex; padding-left: 1ex;">
What would one add to this to get it to update in real time?
That would be super cool!
bruce P
----- Original Message -----
From: "Mike Alsup" <<a href="mailto:malsup@gmail.com">malsup@gmail.com
</a>>
To: <<a href="mailto:jquery-en@googlegroups.com">jquery-en@googlegroups.com</a>>
Sent: Friday, April 20, 2007 2:42 PM
Subject: [jQuery] Re: Google AJAX Feed API
>
> It's actually quite similar to the example posted here:
>
> <a href="http://code.google.com/apis/ajaxfeeds/documentation/">http://code.google.com/apis/ajaxfeeds/documentation/</a>
>
> My code just uses jQuery instead of DOM code to create the page.
>
> Mike
>
>> Nice work, will play with this a while as its quite different than
>> Google's
>> examples.
>
>
</blockquote></div>
Leave a comment on jmalv04's reply
Re: [jQuery] Google AJAX Feed API
16 years ago
example:
http://www.bkdesign.ca/update-rss.php
One would need some kind of refresh div?
bruce
----- Original Message -----
From: "Mike Alsup" <malsup@gmail.com>
To: <jquery-en@googlegroups.com>
Leave a comment on bruce.jquery2's reply
Re: [jQuery] Google AJAX Feed API
16 years ago
> 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>
Leave a comment on malsup's reply
Re: [jQuery] Google AJAX Feed API
16 years ago
<HTML><BODY style="word-wrap: break-word; -khtml-nbsp-mode: space; -khtml-line-break: after-white-space; ">Here is a really cool RSS viewer written with jQuery:<DIV><BR class="khtml-block-placeholder"></DIV><DIV><A href="http://www.osxcode.com/feedsearch/">http://www.osxcode.com/feedsearch/</A><BR><DIV> <SPAN class="Apple-style-span" style="border-collapse: separate; border-spacing: 0px 0px; color: rgb(0, 0, 0); font-family: Helvetica; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; text-align: auto; -khtml-text-decorations-in-effect: none; text-indent: 0px; -apple-text-size-adjust: auto; text-transform: none; orphans: 2; white-space: normal; widows: 2; word-spacing: 0px; "><BR class="Apple-interchange-newline"><SPAN class="Apple-style-span" style="border-collapse: separate; border-spacing: 0px 0px; color: rgb(0, 0, 0); font-family: Helvetica; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; text-align: auto; -khtml-text-decorations-in-effect: none; text-indent: 0px; -apple-text-size-adjust: auto; text-transform: none; orphans: 2; white-space: normal; widows: 2; word-spacing: 0px; "><DIV><BR class="khtml-block-placeholder"></DIV><DIV>--Karl</DIV><DIV>_________________</DIV><DIV>Karl Swedberg</DIV><DIV>www.englishrules.com</DIV><DIV>www.learningjquery.com</DIV><DIV><BR class="khtml-block-placeholder"></DIV><BR class="Apple-interchange-newline"></SPAN></SPAN> </DIV><BR><DIV><DIV>On Apr 20, 2007, at 3:07 PM, Jose wrote:</DIV><BR class="Apple-interchange-newline"><BLOCKQUOTE type="cite">Hi, This is a very cool use for JQuery!<BR><BR>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. <BR><BR>See <A href="http://web20.originalsignal.com/">http://web20.originalsignal.com/</A> for a great RSS viewer written with prototype<BR><BR>regards<BR><BR><BR><DIV><SPAN class="gmail_quote">On 4/20/07, <B class="gmail_sendername"> BKDesign Solutions</B> <<A href="mailto:bruce@bkdesign.ca">bruce@bkdesign.ca</A>> wrote:</SPAN><BLOCKQUOTE class="gmail_quote" style="border-left: 1px solid rgb(204, 204, 204); margin: 0pt 0pt 0pt 0.8ex; padding-left: 1ex;"> <BR>What would one add to this to get it to update in real time?<BR><BR>That would be super cool!<BR><BR>bruce P<BR>----- Original Message -----<BR>From: "Mike Alsup" <<A href="mailto:malsup@gmail.com">malsup@gmail.com </A>><BR>To: <<A href="mailto:jquery-en@googlegroups.com">jquery-en@googlegroups.com</A>><BR>Sent: Friday, April 20, 2007 2:42 PM<BR>Subject: [jQuery] Re: Google AJAX Feed API<BR><BR><BR>><BR>> It's actually quite similar to the example posted here: <BR>><BR>> <A href="http://code.google.com/apis/ajaxfeeds/documentation/">http://code.google.com/apis/ajaxfeeds/documentation/</A><BR>><BR>> My code just uses jQuery instead of DOM code to create the page.<BR> ><BR>> Mike<BR>><BR>>> Nice work, will play with this a while as its quite different than<BR>>> Google's<BR>>> examples.<BR>><BR>><BR><BR><BR></BLOCKQUOTE></DIV><BR></BLOCKQUOTE></DIV><BR></DIV></BODY></HTML>
Leave a comment on kswedberg's reply
Re: [jQuery] Google AJAX Feed API
16 years ago
Excellent Mike. I've started using it in my application as a feed
reader, was very easy to implement with a backend for defining feeds,
I just loop them out and include the JS :)
Tane
Leave a comment on digitalspaghetti's reply
Re: [jQuery] Google AJAX Feed API
16 years ago
I decided to make this a more polished plugin. You can find the new
version here:
http://malsup.com/jquery/gfeed/
Mike
Leave a comment on malsup's reply
Re: [jQuery] Google AJAX Feed API
16 years ago
<HTML><BODY style="word-wrap: break-word; -khtml-nbsp-mode: space; -khtml-line-break: after-white-space; ">Very cool, Mike! Excellent job.<DIV><BR class="khtml-block-placeholder"></DIV><DIV>I started playing around with the Google Feed API this weekend. Lots of fun.<BR><DIV> <SPAN class="Apple-style-span" style="border-collapse: separate; border-spacing: 0px 0px; color: rgb(0, 0, 0); font-family: Helvetica; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; text-align: auto; -khtml-text-decorations-in-effect: none; text-indent: 0px; -apple-text-size-adjust: auto; text-transform: none; orphans: 2; white-space: normal; widows: 2; word-spacing: 0px; "><BR class="Apple-interchange-newline"><SPAN class="Apple-style-span" style="border-collapse: separate; border-spacing: 0px 0px; color: rgb(0, 0, 0); font-family: Helvetica; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; text-align: auto; -khtml-text-decorations-in-effect: none; text-indent: 0px; -apple-text-size-adjust: auto; text-transform: none; orphans: 2; white-space: normal; widows: 2; word-spacing: 0px; "><DIV><BR class="khtml-block-placeholder"></DIV><DIV>--Karl</DIV><DIV>_________________</DIV><DIV>Karl Swedberg</DIV><DIV>www.englishrules.com</DIV><DIV>www.learningjquery.com</DIV><DIV><BR class="khtml-block-placeholder"></DIV><BR class="Apple-interchange-newline"></SPAN></SPAN> </DIV><BR><DIV><DIV>On Apr 23, 2007, at 9:02 PM, Mike Alsup wrote:</DIV><BR class="Apple-interchange-newline"><BLOCKQUOTE type="cite"><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; min-height: 14px; "><BR></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">I decided to make this a more polished plugin.<SPAN class="Apple-converted-space"> </SPAN>You can find the new</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">version here:</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; min-height: 14px; "><BR></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><A href="http://malsup.com/jquery/gfeed/">http://malsup.com/jquery/gfeed/</A></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; min-height: 14px; "><BR></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">Mike</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; min-height: 14px; "><BR></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; min-height: 14px; "><BR></DIV> <BLOCKQUOTE type="cite"><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">Excellent Mike.<SPAN class="Apple-converted-space"> </SPAN>I've started using it in my application as a feed</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">reader, was very easy to implement with a backend for defining feeds,</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">I just loop them out and include the JS :)</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; min-height: 14px; "><BR></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">Tane</DIV> </BLOCKQUOTE></BLOCKQUOTE></DIV><BR></DIV></BODY></HTML>
Leave a comment on kswedberg's reply
Leave a comment on tuupola's reply
Leave a comment on lists.jquery19's reply
Re: [jQuery] Google AJAX Feed API
16 years ago
I don't know why this didn't show up on the list. I sent it hours ago...
Mike Alsup
Leave a comment on lists.jquery19's reply
Re: [jQuery] Google AJAX Feed API
16 years ago
Google recently announced a "Feed Control" to go along with their Feed
API. This mostly obviates the need for my gFeed plugin, but I've
updated it to use their control so that you can still have a layer of
unobtrusive jQuery goodness if you like.
http://malsup.com/jquery/gfeed/
Mike
Leave a comment on malsup's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic
Reply to malsup's discussion
{"z2655295":[14737000000214089,14737000000214093,14737000000214097,14737000000214103,14737000000214107,14737000000214111,14737000000214117,14737000000214123,14737000000214129,14737000000214139],"z2949206":[14737000000214133],"z2964309":[14737000000214135,14737000000214137],"z2973313":[14737000000214101,14737000000214105,14737000000214109,14737000000214113,14737000000214115,14737000000214121],"z2964658":[14737000000214095,14737000000214099],"z2973241":[14737000000214127],"z2969506":[14737000000214119],"z464496":[14737000000214091,14737000000214125,14737000000214131]}
Statistics
- 25 Replies
- 23393 Views
- 0 Followers