Lector de RSS para una página web

Lector de RSS para una página web

16 de septiembre 2016

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 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.

Publicado por Jesús Tovar

Categorías: JavaScript, Programación

Etiquetas: ,

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio web utiliza cookies, si continúas navegando estás dando tu consentimiento. Consulta nuestra política de cookies y de privacidad.

ACEPTAR
Aviso de cookies