Leer, mezclar y mostrar feeds sin PHP

Conocía algunos sistemas para mostrar feeds pero los mejores siempre estaban programados en PHP, algo que en Blogger tiene difícil acople.

Sin embargo, ahí está para resolver problemas Dynamic Drive, un almacén con infinidad de utilidades DHTML y CSS que siempre cumple con mis expectativas. Posiblemente lo hará con las de cualquiera

Allí he encontrado este script que resulta ser una de las formas más rápidas de mostrar feeds RSS de tu propio sitio o del de otros. Utiliza la librería Ajax de Google para alojar en los servidores del gigante buscador los feeds deseados y así lo único que hay que hacer es mostrarlos mediante la inserción del código necesario en nuestro sitio.

Una cosa destacable de esta utilidad es que podremos utilizar más de una fuente, mezclándolas para que podamos verlas como si de una sola se tratara. También será posible seleccionar los campos que deseamos mostrar, ordenar los resultados bajo ciertos criterios e incluso formatear la salida.

Lo vemos...

---

Como el post va a resultar un poco extenso y tampoco sabría explicaros completamente los pormenores del funcionamiento del script, voy directamente a decir cómo instalarlo. Para ello sólo hay que seguir estos dos pasos:

1. Cargar librerías

Antes del </head> cargamos las librerías AJAX de Google y seguido el script gfeedfetcher.js, el alma de esta utilidad.

El en ejemplo se carga desde un almacén que tengo en Google Code pero, como siempre, lo mejor es que descarguéis el fichero, lo alojéis vosotros y sustituyáis la dirección por la vuestra. Es la marcada en verde.

Descargar
gfeedfetcher.js

<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script src="http://olobloggerblog.googlecode.com/files/gfeedfetcher.js" type="text/javascript">
//gAjax RSS Feeds Displayer- (c) Dynamic Drive (www.dynamicdrive.com)
</script>

Google Code ha dejado de servir ficheros, así que la alternativa es poner todo el código JavaScript directamente en vuestra plantilla. Para ello simplemente tenéis que abrir el fichero al que lleva ahora el botón de arriba, copiar el código que veréis y y pegarlo en vuestra plantilla, justo antes de </head>

Recordar que si ya tenemos cargadas las librerías de Google, no será necesaria la primera línea. Tampoco debe producir error, pero mejor no duplicar tareas.

2. Definir parámetros y mostrar resultados

Esta parte ya hay que ponerla dónde queramos que se muestre el feed (o el conjunto de feeds). Dentro del cuerpo de las entradas, bajo su cabecera, al pie del blog... Si se va a colocar en un gadget no será necesario que el código del punto anterior lo incluyamos en la plantilla y podemos poner ambos seguidos en dicho gadget.

<script type="text/javascript">
var cssfeed=new gfeedfetcher('ID_Artilugio', 'ClaseCSS', '_new');
cssfeed.addFeed('Etiqueta_Feed', 'Direccion_Feed');
cssfeed.displayoptions('cssfeed.displayoptions('Dato_a_mostrar' 'Dato_a_mostrar' 'Dato_a_mostrar');
cssfeed.setentrycontainer('Tipo_Elemento');
cssfeed.filterfeed(Num_entradas, 'Dato_para_ordenar');
cssfeed.definetemplate('{Dato_1} {Dato_2} {Dato_3}');
cssfeed.init();
</script>

Con esto ya tenemos todo lo necesario, pero claro, el inconveniente de que tanta cosa sea configurable es precisamente eso, que tenemos que marcar lo que queremos. Aquí una pequeña guía:

• var cssfeed=new gfeedfetcher('ID_Artilugio', 'ClaseCSS', '_new');
  La variable cssfeed puede ser denominada como queramos, para así poder generar varios cacharritos de estos para la misma página individualizando sus características.
  
  • ID_Artilugio: La identificación que aquí pongamos será asignada al conjunto del gadget
  • ClaseCSS: Idem pero para la clase que nos permitirá darle estilo
  • _new: Fuerza a abrir enlaces en página nueva. Si se deja vacío abrirá en la misma ventana
• cssfeed.addFeed('Etiqueta_Feed', 'Direccion_Feed');
  
  • Etiqueta_Feed: Etiqueta arbitraria que podemos añadir con nombre libre para cada feed. Útil para distinguir el origen en feeds mezclados
  • Direccion_Feed: Autoexplicativo. La dirección del feed a leer
  • Para añadir feeds para su mezclado simplemente hay que incluir a continuación de esta, sucesivas líneas con la misma estructura, especificando etiqueta, y dirección.
  • Uso obligatorio
• cssfeed.displayoptions('Dato_a_mostrar' 'Dato_a_mostrar' 'Dato_a_mostrar');
  
  • Dato_a_mostrar: Separados por espacios, aquí es dónde indicamos que datos se desean mostrar.
  • El título de la entrada es fijo y además podemos añadir: date (fecha), time (hora), datetime (fecha y hora), label (etiqueta arbitraria), snippet (sumario) y description (todo el contenido de la entrada disponible). Las fechas son en formato inglés.
  • Este parámetro no es obligatorio, asumiendo por defecto no mostrar nada más que el título
• cssfeed.setentrycontainer('Tipo_Elemento');
  
  • Tipo_Elemento: Cambia el tipo de elemento usado para contener cada entrada del feed, pudiendo ser estos insertados dentro de una caja (DIV), párrafo (P) o un elemento de lista (LI).
  • No es obligatorio su uso y por defecto se usarán listas.
• cssfeed.filterfeed(Num_entradas, 'Dato_para_ordenar');
  
  • Num_entradas: Valor númerico (sin comillas) sobre el número de entradas a mostrar en total sobre el feed mezclado o único.
  • Dato_para_ordenar: Sean visibles o no, aquí se especificará el dato que servirá para ordenar los resultados.
  • Los datos que se podrán usar aquí serán date, label o title (el título de la entrada).
  • Su uso es obligatorio, aunque no lo es el del segundo parámetro. Por defecto se ordenará por fecha.
• cssfeed.definetemplate('{Dato_1} {Dato_2} {Dato_3}');
  
  • Dato_X: Si incluimos este parámetro podremos reordenar los datos a mostrar e incluso podremos incluir texto plano fuera de los corchetes. El orden de los datos en esta función será el orden en el que se visualizarán definitivamente.
  • Función no obligatoria
• cssfeed.init();
  
  • Arranque principal del script
  • Uso obligatorio

Tras detallar lo que es obligatorio o no comprobaréis que el segundo código se puede quedar sólo en esto, que mostrará un feed simple con formato de lista y ordenado por fecha:

<script type="text/javascript">
var cssfeed=new gfeedfetcher('ID_Artilugio', 'ClaseCSS', '_new');
cssfeed.addFeed('Etiqueta_Feed', 'Direccion_Feed');
cssfeed.filterfeed(Num_entradas);
cssfeed.init();
</script>

---

Para el estilo sólo hay que tener en cuenta que todo quedará dentro de la ID que hayamos indicado, en formato lista por defecto (podemos forzar DIV o P) y con las siguientes clases para cada campo de cada entrada:

Fuente: Dynamic Drive

Ejemplos

1 feed - 4 entradas - mostrando fecha (date) - ordenado alfabéticamente por título (title)

<script type="text/javascript">
var cssfeed=new gfeedfetcher('ejemplo1', 'clase1', '')
cssfeed.addFeed('Oloblogger', 'http://www.oloblogger.com/feeds/posts/default');
cssfeed.displayoptions('date');
cssfeed.setentrycontainer('li');
cssfeed.filterfeed(4, 'title');
cssfeed.init();
</script>

2 feeds - 6 entradas - mostrando etiqueta (label), fecha (date) y sumario (snippet) - ordenado por etiqueta (label) - estructura cajas (div)

<script type="text/javascript">
var socialfeed=new gfeedfetcher('ejemplo2', 'ejemplo2', '_new');
socialfeed.addFeed('Oloblogger', 'http://www.oloblogger.com/feeds/posts/default');
socialfeed.addFeed('Singenio', 'http://blog.singenio.com/feeds/posts/default');
socialfeed.displayoptions('label date snippet');
socialfeed.setentrycontainer('div');
socialfeed.filterfeed(6, 'label');
socialfeed.init();
</script>

#ejemplo2 div:before {content:"* ";}
#ejemplo2 .labelfield {color:brown;font-size: 90%;}
#ejemplo2 .datefield {color:gray;font-size: 90%;}
#ejemplo2 .descriptionfield {font-style: italic;}

5 feeds - 16 entradas - mostrando etiqueta (label) - ordenado por fecha (date) - estructura de párrafos (P) - con formato forzado

<script type="text/javascript">
var newsfeed=new gfeedfetcher('ejemplo3', 'ejemplo3', '_new')
newsfeed.addFeed('Vagabundia', 'http://www.vagabundia.blogspot.com/feeds/posts/default');
newsfeed.addFeed('Ciudad Blogger', 'http://www.ciudadblogger.com/feeds/posts/default');
newsfeed.addFeed('Kseso Css', 'http://ksesocss.blogspot.com/feeds/posts/default');
newsfeed.addFeed('E. Cobos', 'http://feeds.feedburner.com/EmilioCobos-cmc');
newsfeed.addFeed('Gem@ Blog', 'http://feeds2.feedburner.com/GemaBlog');
newsfeed.displayoptions('label');
newsfeed.setentrycontainer('p', 'pclass');
newsfeed.filterfeed(16, 'date');
newsfeed.definetemplate('{label}: {title}');
newsfeed.init();
</script>

#ejemplo3 {border: 1px solid black;padding: 10px; font-size: 80%;}
#ejemplo3 p {margin-bottom: 5px;}
#ejemplo3 .titlefield a {color: darkblue; text-decoration: underline;}

Más información: gAjax RSS Feeds Displayer v2.0

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir

Twitter

Pinterest

Facebook

Linkedin

Copy URL

Compartir

Twitter

Pinterest

Facebook

Linkedin

Y muchos más artículos interesantes si nos sigues en...

• Google
• Facebook
• Twitter