Pinceladas da Web

O Google JSAPI é uma ferramenta muito poderosa. Ao invés de carregar uma biblioteca separada para cada API do Google você pode simplesmente carregar a JSAPI e através do google.load chamar a biblioteca de que precisa.

Nesse tutorial vou carregar a biblioteca de Feeds para ler um Feed RSS externo. O que você deve simplesmente é incluir a biblioteca do JSAPI na sua página:

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
	//Carrego a Google Ajax API Feed  (versão 1)
	google.load("feeds", "1");
       //Feed.init é a função de Callback
	google.setOnLoadCallback(Feed.init);	
</script>

Após isso, vamos criar a função responsável por fazer o parser do feed:

//O endereço do Feed que desejo ler
var rss = "http://feeds2.feedburner.com/pinceladasdaweb";
//Número de itens a serem mostrados
var itens = 8;

var Feed = function() {
	return {
		init: function() {
			var blog = new google.feeds.Feed(rss);
			blog.setNumEntries(itens);
			blog.load(function(data) {
				if (!data.error) {
					Feed.parser(data.feed.entries);
				}else{
					$("#feed").empty().html("<p>Ocorreu um erro ao ler o Feed</p>");	
				}
			});
		},
		parser: function(entries) {
			var view = [];
			view.push('<ul>');
			for (var i = 0; i < entries.length; i+=1) {
				view.push('<li><h2><a target="_blank" title="'+entries[i].title+'" href="'+entries[i].link+'">'+entries[i].title+'</a></h2><p>'+entries[i].contentSnippet+'</p>');	
			}
			view.push('</ul>');
			$("#feed").empty().append(view.join(''));
		}
	}	
}();

E no HTML simplesmente adiciono uma div com o id ‘feed’, com uma imagem de loading que a removo assim que o Feed for carregado:

<div id="feed"><img src="img/ajax-loader.gif" alt="Carregando" title="Carregando" /></div>

Aqui vocês podem ver um exemplo.