widget de noticias html web.jpg

Como poner un Widget de Noticias en tu web

¿Aun no conoces Globedia?, es un diario digital, que antes ofrecía un widget de sus ultimas noticias y el como insertarlo en una web era lo que explicaba en una versión anterior de este articulo.

Pero ahora como ya no esta disponible, me he visto en la tarea de actualizar el contenido mostrándote ahora como insertar un widget de las ultimas noticias de cualquier sitio web informativo, por ejemplo de «El País», «El Universal» o de «The Guardian».

Este widget soporta de hecho cualquier blog, así que puedes ocuparlo no solo con diarios. Si no con cualquier página web que tenga una fuente RSS.

Al insertarse mediante un simple código HTML no importa con que creador web trabajes, ya sea con WordPress, o uno mas sencillo como JIMDO, igual te servirá.

Si lo que buscabas era crear tus propias noticias, a lo que te estas refiriendo es a crear un blog dentro de tu web, para ello te recomiendo visitar este artículo.

De todas maneras una vez creado podras tambien ocupar este widget.

Y si lo que quieres es una sección de posts relacionados, tengo un tutorial preparado para ello, visitalo aqui.

Espero la siguiente información te sirva, si es asi no olvides compartirla en redes sociales, gracias.

Widget de ultimas noticias HTML


Con esto nos referimos practicamente a un «Fragmento visualizador de Feed RSS», hay que dejar en claro esto lo mejor posible.

Todo blog en la actualidad tiene un Feed, en la mayoria de casos RSS y normalmente en formato XML  que contiene la lista de posts y los datos esenciales de estos.

Gracias a herramientas como las que conocerás a continuación ese Feed puede mostrarse de una manera mas practica a la que tiene por defecto, para varios fines, en este caso para mostrarlo dentro de una página web distinta a la fuente.

Usa FeedWind para conseguirlo

1. Lo primero e indispensable es obtener la dirección del Feed del periodico digital o blog deseado. Para ello lo mas fácil es instalar una extensión del tipo «RSS detected» en el navegador que usamos. En el caso de Firefox no hace falta, puesto que ya trae la suya por defecto.

Una vez se tenga la extensión, su icono suele tener algún cambio si detecta una fuente en el sitio en el que se esta actualmente. Normalmente al darle click se nos mandara a la página que tiene dicha dirección o URL

Otra forma es ir directamente al sitio web objetivo y buscar un botón con un icono mas o o menos así:

El enlace al que nos lleva supone ser la fuente de su Feed.

Como ejemplo esta es la URL del feed RSS del periodico «El Universal»: http://www.eluniversal.com.mx/rss.xml.

2. Una vez obtenida y copiada la dirección, vamos a ir FeedWind. Para ello haz click en el siguiente link:

3. Ya dentro de la aplicación, lo primero es registrarse para ello haz click en el botón que dice «Sign up».

4. Hecho eso, vamos a colocar la URL que copiamos precisamente donde dice «Feed URL:».

5. Aparecerán en el widget de la derecha las noticias del blog, periódico o revista correspondiente a la dirección del Feed, podemos poner otros si lo deseamos dándole al botón «+».

Widget de noticias - FeedWind

6. Ahora hay que configurarlo, lo primero es ver el tamaño, por defecto el widget sera responsive pero también se puede definir un «ancho» si se quiere, pero el «alto» se puede cambiar en los dos casos.

Despues estan las opciones de «scroll», puedes decidir entre que este sea horizontal o vertical, si quieres que aparezca la barra típica y si deseas que se haga automáticamente o no (en este ultimo caso puedes elegir el modo de velocidad).

Mas tarde vienen las opciones de estilo, aquí eliges que formato de visualización tendra el widget, si es con imágenes hay varios parámetros a configurar, incluso si estas tendrán un enlace en HTTPS (seguro).

Después en «Feed Title», vez las opciones del encabezamiento como su color.

En «Feed Content», puedes alteras como se ven las notas o los posts dentro del widget, cambiando el tamaño y la fuente del texto por ejemplo.

7. Una vez terminada la configuración, solo hay que dar click en el botón: «Save & Get code».

8. Finalmente como casi siempre solo resta copiar el código HTML que se nos muestra y pegarlo en nuestra web exactamente donde queremos que se muestre el widget.

Si aun eres muy nuevo y no sabrías como hacerlo, te dejo este tutorial.

Una vez añadido el código veras como se muestran las noticias en tu página web.

Written by Arturo Morlan
Experto en herramientas de Diseño Web, redactor en revistas y blogs internacionales, Director de Marketing Digital en Rines y LLantas Tuxtepec. Fundador y CEO de TodopatuWeb.