Usa la API de Google para hacerte un lector de RSS

No solo de JQuery vive el programador de Javascript. Google tiene una preciosa y extraña API que sirve como catalizador y centralizador de otras APIs de Google a modo de que no tengas que «preocuparte» en tener que meter muchas lineas o incluso en las versiones de las mismas.

Esta API nos puede servir, rapidamente, para desarrollar a traves del cliente, desde la lectura de un WebService hasta, por ejemplo, hacer un lector de feeds sencillo.

Podeis encontrar la API en la siguiente URL: https://www.google.com/jsapi

En el ejemplo que os voy a hacer, consiste en 1 única página HTML donde mezclamos un poco de JQuery y esta API para jugar. La aplicación web hara lo siguiente, tendra un formulario donde le indicamos el feed (la URL) que queremos leer y el numero de elementos que nos queremos que devuelva y, simplemente la pintara.

Para ello comencemos con el fichero HTML:
[code]

–

---

[/code]

Podemos observar que en el head lo que hacemos es cargar la API de JQuery (por si acaso) del propio Google y la API de JSAPI ademas de cargar un js externo llamado lector.js donde tenemos todo el javascript que lo monta. Esto se hace por comodidad, simplemente.

Destacamos la linea:
[code][/code]

Con esta linea estamos indicando a la API de Google que cargue la API de Feeds, cuya información podemos encontrarla en esta URL.

Tenemos una lista de como funciona google.load en esta otra URL donde se nos indica las APIs que podemos cargar automáticamente desde el.

El fichero lector.js seria como indicamos:
[code]
// Javascript

function mostrar_ocultar(i) {
// i = identificador del elemento

// Toglemos el mostrar o no
$(«.texto_completo_»+i).toggle(«slow»);

// Cambiamos el icono del + o el –
if ($(«.ocultar_»+i).html()==»+»){
$(«.ocultar_»+i).html(«—»);
} else {
$(«.ocultar_»+i).html(«+»);
}
}

function envia_form(){
// Prevenimos el formulario y le inyectamos a la funcion la url y las cosas
// Esto es solo para probar
$(«#form»).submit(function(event){
event.preventDefault();
url = $(«#form_url»).val();
total = $(«#total»).val();
lee_rss (url, total);
});
}

function lee_rss(url, total) {
// url = url del feed
// total = numero de elementos

// Creamos el elemento del feed con el objeto del feed
var feed = new google.feeds.Feed(url, total);

// Le inyectamos el numero total de elementos a mostrar
feed.setNumEntries(total);
var texto = «»;

feed.load(function (data) {

texto += «

«+data.feed.title+»

«;
texto += «

»
$(«.rss-respuesta»).html(texto);

for (var i=0; i< data.feed.entries.length; i++) { $(".texto_completo_"+i).hide(); } }); } [/code] Como vemos son 3 funciones. - mostrar_ocultar es una función meramente gráfica para ampliar y ocultar cierto texto que montamos en lee_rss.

– envia_form como, su nombre indica es para enviar el formulario que no permitimos que haga el post y lo que hacemos es enviar el contenido a lee_rss, la función principal.

– lee_rss es la función principal que crea el objeto feed, y arma el texto que muestra la pagina.

En esta ultima función os he dejado un «truco» donde, de un array, podemos sacar sus indices sin saberlos. Se puede usar para saber todos los indices, en este caso de cada entrada y así sacar los que nos sea conveniente.

Y luego, para finalizar, si queremos darle un poco de estilo, en nuestro caso tenemos un estilo.css que será así:
[code]
/* CSS */
body {
font: 12px Arial;
}

.rss-respuesta {
width: 320px;
height: 325px;
border: 1px solid #005d8c;
}

.rss-respuesta h2 {
background-color: #005d8c;
color: white;
margin: 0;
padding: 2px 5px;
box-shadow: 0px 0px 2px #292929;
}

.caja_rss_respuestas {
height: 300px;
overflow: auto;
}

.rss_respuesta {
margin-bottom: 5px;
padding-top: 2px;
padding-left: 5px;
padding-right: 5px;
padding-bottom: 2px;
}

.rss_respuesta:nth-child(even) {
background-color: #f4f3f5;
}

.rss_respuesta a {
text-decoration: none;
color: #005d8c;
}
[/code]

El resultado, sin tocarlo mucho, sera algo como esto:

Este post esta muy mal explicado y si tenéis alguna duda, preguntadmela.