em
gdlogo

Ler Feeds com o Google JSAPI

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.

Comentários

  1. Pingback: Ajax RSS Widget » CSS no Lanche - Ingerir CSS na hora do lanche não engorda

  2. Parabéns pelo artigo. E se eu quiser ler o feed de mais de um site, tem como?

    por Marques — Responder
    1. Marques,

      Não sei ao certo lhe dizer se é possível, não encontrei isso na documentação, mas eu si que com a utilização de YQL isso é possível, como mostrei aqui: http://www.pinceladasdaweb.com.br/blog/2011/09/21/introducao-ao-yql-yahoo-query-language/

      por Pedro Rogério Responder
  3. Como eu faço para a url de imagem de cada post que esta no feed no campo MediaGroups?

    por Tiago — Responder
  4. É possível criar um agregador de links como esse leitor de feeds? Gostaria muito de ver um tutorial sobre o assunto

    por Carlos Luiz da Silva Bomfim Júnior Responder

Deixe uma resposta

O seu endereço de email não será publicado Campos obrigatórios são marcados *

Você pode usar estas tags e atributos de HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>