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

4 de noviembre de 2012

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.


<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
Copy URL

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

follow us in feedly

19 comentarios :

  1. Ya sabía yo que sólo era cuestión de susurrarte las palabras oportunas en el momento preciso xD~

    Un artículo para leérselo con calma y jugar con él.
    Muy buen trabajo.

    Un saludo

    N.B.: Por cierto, el complemento "Do not track Plus" en chrome bloquea la caja de comentarios. El mismo complemento en Firefox sin problemas. Te lo comento por si a más visitantes le ocurre.

    ResponderEliminar
    Respuestas
    1. La solución es fácil: no seas tan conspiranoico y no añadas plugins raros a tu navegador :D

      Es broma. Gracia por el aviso.

      Eliminar
  2. hola olobloger, primero que todo un gran saludo y felicitaciones por majestuoso blog, bueno mi pregunta no tiene nada que ver con esta entrada asi que por favor disculpame, lo que sucede es que quiero implementar tu barrita para compartir las entradas en facebook, google, twiter etc pero solo he logrado insertandola en cada entrada cosa que es muy dispendiosa pues me toca modificar manualmente cada boton, te agradeceria si me dijieras la forma de hacerlo global para mayor comodidad, muchas gracias por tu tiempo y mil gracias.....

    ResponderEliminar
    Respuestas
    1. Prefiero que uséis el post más relacionado que encontréis sobre la consulta, pero en este caso hasta a mí me ha costado encontrarlo. No está bien indexado. Es en este post dónde se explican los tres más importantes, pero con los demás se puede ir repitiendo la estructura: Botones sociales

      Eliminar
    2. oloman gracias por tu pronta respuesta, pero no es lo que buscaba queria poner mis propios iconos y no que los pusiera por defecto,sin embargo tampoco me funciona gracias por todo..

      Eliminar
    3. Vale. Para usar tus propios iconos sería utilizando enlaces simples. El inconveniente es que no llevan contadores. Los botones que ilustran ese post están operativos con esos enlaces. Lo puedes comprobar pinchando en el que quieras.

      Eliminar
  3. ¡Muy chulo!
    Llevaba toda la mañana buscando una forma de eliminar el blogroll de la home de mi blog (que hacía que tardara mucho en cargar), pero implementar una forma de ver en una página estática los blogs que habitualmente leo ordenados por su feed y ésta ha sido la solución.
    Perfecto. ¡Muchas gracias por compartirlo! :D

    ResponderEliminar
    Respuestas
    1. Sí, así es. Desde que descubrí esto lo he usado ya para varias cosas, entre ellas también para hacer un blogroll.
      Ahora estoy desarrollando otra cosilla en la que se toman parte de los datos de Google Docs y otra parte de un feed. Aunque está a medias es esto.
      Las imágenes y sus respectivos títulos es lo que se saca del feed de ese mismo blog, escogiendo sólo los que lleven la etiqueta del año seleccionado. Los textos de la derecha no están todavía confeccionados para casi ninguna fecha, pero por ejemplo 1977 y 1980 tienen de ambos (texto e imágenes)

      Eliminar
  4. Hola Oloman:

    Desde la publicación de esta entrada, he utilizado el código que facilitas (en concreto, el correspondiente al ejemplo 3) en mis blogs.

    La consulta es si sería posible incorporar a cada feed, además del nombre del blog y el título de la entrada, la fecha de publicación de la entrada.

    Muchas gracias y un saludo

    ResponderEliminar
    Respuestas
    1. La puedes poner Xaime. Entre los ejemplos hay algunos con ella. La opción para mostrarlos sería esta:
      cssfeed.displayoptions('date');

      Eliminar
  5. Muchas gracias. Añadida la fecha (y otros detalles), funciona perfectamente.

    http://blogsdejusticia.blogspot.com.es/

    ResponderEliminar
  6. Gracias Oloman me a funcionado de maravilla, dejame decirte que el fichero aqui citado para descargar http://olobloggerblog.googlecode.com/files/gfeedfetcher.js no esta disponible pero lo encontré aquí http://documents.mx/download/link/gfeedfetcherjs o aqui https://sites.google.com/site/obtenerbitcoingratis/home/archivo/copia-gfeedfetcher.js?attredirects=0&d=1
    Saludos.

    ResponderEliminar
    Respuestas
    1. Gracias por el aviso Gabriel. Ya he alojado en otro sitio el código y actualizado el post.

      Eliminar
    2. Por lo visto el código a dejado de funcionar , dime hay alguna alternativa ? . :(

      Eliminar
  7. Hola!
    Ha dejado de funcionar el código?
    Hoy me aparece el mensaje Retrieving RSS feed(s)en las paginas
    Gracias!

    ResponderEliminar
    Respuestas
    1. Hola Diego y Gabriel.
      Sí, ha dejado de funcionar porque la librería Ajax, que era de Google, ha dejado de dar servicio.
      Hay una alternativa aquí, pero la he probado y no me parece tan buena como la otra. Al menos yo no logro sacarle punta para que funcione con todas las fuentes.

      Eliminar
    2. Hola Oloman! Gracias por responder. Probé la misma alternativa y conseguí que funcionara más o menos igual (menos el addregexp, que no me acepta la misma expresion de javascript para cortar a partir de determinada palabra) El resultado lo tengo aquí https://goo.gl/emsntr

      Eliminar
    3. Me alegro de que te haya funcionado :)

      Eliminar
    4. gracias intentare que funcione ! :)

      Eliminar