Lector de RSS para una página web
Una de las cosas que nos vamos a encontrar a la hora de desarrollar una página web es querer incorporar un lector de RSS para mostrar artículos externos al propio portal. Esto es especialmente interesante por ejemplo cuando estamos creando una web corporativa y el blog se encuentra en una ubicación diferente.
Existen múltiples modos de lograr este objetivo, sin embargo el que comentaré a continuación es bastante sencillo de implementar y si no buscamos una excesiva personalización cumplirá perfectamente con el cometido.
Para el script siguiente vamos a utilizar la API Feed de Google para la sindicación de contenidos. Para hacerlo cargaremos primero la API de Google y luego usaremos un poco de JavaScript. Todo esto lo meteremos en el <head> de nuestro portal. Podéis ver cada parte comentada para que conozcáis el funcionamiento.
SCRIPT OBSOLETO: Desde que Google desactivó el servicio API Feed este código ha quedado obsoleto. Mantendré el artículo activo con fines de consulta.Octubre 2020
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
//lector de rss usando google feed api
google.load("feeds", "1"); //especificamos el módulo y la versión a cargar
function initialize() {
var feed = new google.feeds.Feed("https://www.jesustovar.es/feed"); //aquí indicas la ruta del RSS
feed.setNumEntries(2); //número de entradas a mostrar (por defecto carga 4)
feed.load(function(result) {
if (!result.error) {
var container = document.getElementById("feed"); //utilizamos el id 'feed' para el contenedor
for (var i = 0; i < result.feed.entries.length; i++) {
var entry = result.feed.entries[i];
var titulo = document.createElement("h3"); //creamos un elemento h3 para que sea el título
var ruta = entry.link; //capturamos la ruta en la variable
var enlace = document.createElement("a"); //creamos un contenedor de tipo enlace
enlace.setAttribute('href', ruta); //en el href volcamos el valor de ruta
enlace.setAttribute('target','_blank');
enlace.appendChild(document.createTextNode(entry.title)); //introducimos el título como hijo
titulo.appendChild(enlace); //metemos el enlace en el título
container.appendChild(titulo); //metemos el título en el contenedor principal
var entradilla = document.createElement("p"); //creamos un contenedor de tipo párrafo
entradilla.appendChild(document.createTextNode(entry.contentSnippet));
//contentSnippet: versión de 120 caracteres de la entrada
container.appendChild(entradilla);
}
}
});
}
google.setOnLoadCallback(initialize);
</script>
Con este código ya tenemos configurada la estructura con la que se imprimirán las entradas. Ahora sólo nos queda crear el contenedor donde se mostrarán y asignarle el id ‘feed’ para que la función anterior lo reconozca.
<div id="feed"> ...aquí es donde se cargarán las entradas </div>
El resto de la personalización la podemos llevar a cabo con CSS para aplicar los estilos del diseño con el que estemos trabajando. Si necesitamos modificar las para los textos cambiando los tipos de encabezados por ejemplo, podemos hacerlo si problemas.
Hola Jesús
Estoy tratando de implementar tu script, y obtengo los siguientes errores en la consola Javascript:
Uncaught Error: Must call google.charts.load before google.charts.setOnLoadCallback
R https://www.google.com/jsapi:136
https://bitcu.co/hola.php:49
jsapi:136:298
Uncaught Error: Module «feeds» is not supported.
hd https://www.google.com/jsapi:141
A que se deberá?
Saludos
Hola Jacob,
Parece que Google desactivó el servicio API Feed hace ya tiempo, así que lamento decirte que este código ha quedado obsoleto. Añadiré un aviso en el artículo hasta que mire una alternativa.
Gracias por reportar el problema y disculpa las molestias.
Un saludo.