Icono del sitio El blog de Aleare Design

Cómo Insertar un feed RSS en una web HTML

Cómo insertar un feed RSS en una web HTML

[Actualización enero 2024] Me disponía a publicar las dos últimas entradas de este querido blog en mi nueva web en HTML y… ¡qué problema! ¿Cómo se inserta un feed RSS en un HTML?

Todo empezó cuando, en un ratito libre, me puse a trabajar con el nuevo diseño de mi sitio oficial. Encontré el diseño que me gustaba, lo probé, lo implementé. Se ve divino, como la autora 😉

Hasta ahí todo bien. Y entonces surgió la pregunta del millón: ¿cómo insertar las últimas entradas de mi blog en forma automática en un sitio hecho puramente en HTML5, CSS y Bootstrap? Porque el método manual es tedioso y sí, hay que meter mano en el código a cada rato. Y en la era de la automatización y las IA’s, esto ya no es admisible.

Así que busqué una solución. Y la encontré.

.

RSS Feed para todos

Aprovechando un breve período de vacaciones forzadas (reposo post operatorio) estuve revisando este post particularmente y viendo que quedó muy pero muuuuuy obsoleto (sí, la fecha original era abril del 2008… no me juzguen 😂), aquí les dejo las dos soluciones.

 

✅ Solución 1: sin código

El método más fácil, que no requiere código, es insertar a través de un widget de Elfsight . Específicamente éste cuyo ejemplo verán al pie, que es para insertar un RSS Feed.

Lo bueno es que es totalmente personalizable: qué posts del feed RSS querés mostrar, colores, formato, tamaño de letra, etc. Todo a través de un panel.

Lo no tan bueno es que la versión gratuita te permite hasta 200 vistas gratuitas y con el logo de Elfsight. Si te pasás de ese límite, ya no te muestra nada. Después están los planes de pago, cuyo límite de vistas es más amplio, sin publicidad y con soporte técnico incluído.

 

✅ Solución 2: usando código

Estuve probando esto para implementar en mi web y funciona maravillosamente. Es un borrador, falta un montón de trabajo en el código JScript, el CSS e implementar en el HTML, pero creo que se entiende bastante bien.

Les dejo el ejemplo en mi Codepen para que lo miren y si les gusta, copipasteen:

See the Pen
Insert Blog Feed in HTML page
by aleare-design (@aleare-design)
on CodePen.

 

Puede que encuentre otro método, con o sin widget, en tal caso lo dejaré por aquí y volveré a actualizar.

Espero que este dato les sea útil, y no olviden suscribirse a este hermoso Blog –hecho siempre con mucho amor– a través de su lector de RSS favorito.

.

Escribió:

Alejandra Arellano

¡Hola Mundo! Soy diseñadora gráfica y web, programadora HTML/CSS, ilustradora, community manager, curadora de contenidos, escritora, mentora. Fundadora y directora de Aleare Design Estudio Creativo y Comunicación Digital.
Salir de la versión móvil