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.