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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
<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.
|
1 2 3 |
<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.
Deja un comentario