El proceso típico de crear una lista de fuentes dinámicas requiere algún tipo de lenguaje backend. Obviamente, esto puede funcionar bien si está familiarizado con Rails o PHP, pero quiero presentar un método para extraer las fuentes RSS a través de jQuery. El problema es acceder a las solicitudes de Ajax desde un servidor externo y luego convertir esta información XML a algo un poco más fácil de leer.
Nos centraremos en la API de Google Feed, que es mucho más fácil de lo que parece. Hay una serie de posibilidades personalizadas para jugar con las opciones y acceder a otros temas alternativos. Todo lo que necesitamos extraer es la primera página de los resultados del elemento del feed, junto con cada título y el enlace de la URL. Una vez que tenga este script en funcionamiento, es muy fácil personalizar el diseño e incluso incluir un poco de contenido de la fuente. Echa un vistazo a mi ejemplo de demostración a continuación para tener una idea de lo que vamos a crear.
Demo en vivo - Descargar código fuente
Empezando
El primer paso es hacer un documento básico que incluya la biblioteca jQuery como un recurso. Usaré un par de funciones publicadas en Stack Overflow que nos ayudarán a lograr este feed RSS. Por lo general, cuando escribe una aplicación web como esta, necesita acceder al análisis entre dominios a través de algún lenguaje de fondo. PHP es a menudo la solución más fácil para los desarrolladores web.
Ya que estamos usando la API de Google Feed, tomará el lugar como nuestro script de back-end. Por lo tanto, todo puede leerse a través de jQuery Ajax y luego convertirlo en JSON para que podamos analizarlo mejor. Aquí está el encabezado de mi documento que incluye jQuery junto con un script personalizado parser.js.
La mejor parte de mi código es cómo podemos completar todo a través de JavaScript. Todos los elementos RSS internos de la página se escribirán en HTML, pero no se mostrarán en la fuente del documento. Todo el contenido se publica de forma dinámica y puede editar rápidamente los orígenes de la fuente para cambiarlos en cada recarga de la página.
Esta es la totalidad de los contenidos del cuerpo. Cada clase de .feedcontainer se utiliza para aplicar los mismos estilos básicos en los encabezados y enlaces. Los nombres de ID se dirigen a través de jQuery para que podamos ejecutar nuestra función RSS personalizada y luego agregar nuevo contenido usando el método .html ().
RSS de análisis en jQuery
Podemos omitir la mayoría de los estilos CSS porque son bastante básicos. Eche un vistazo a mi hoja de estilo si desea ver cómo se realiza la alineación. Pero moviéndose hacia parser.js hay dos funciones donde una maneja específicamente la conversión RSS / JSON. La otra es una función de mayúsculas que fuerza automáticamente el título de RSS? atribuir a permanecer en mayúscula.
Esta parseRSS () La función se publicó en una pregunta relacionada de desbordamiento de pila y describe una solución perfecta que se ejecuta solo con jQuery. Todavía necesitamos un servidor porque el método .ajax () no se puede ejecutar sin una secuencia HTTP. Pero no necesita soporte para otros lenguajes backend, lo que es un gran alivio. Lo ideal es que podamos confiar en que Google siga funcionando indefinidamente, ya que es un recurso tremendo para los desarrolladores.
El código de función en sí es fácil de entender si está familiarizado con .ajax (). Primero pasamos la URL para consultar, que es el enlace remoto de la API de Google Feed. Necesitamos el tipo de datos establecido como JSON y después de la exitosa llamada ajax debemos ejecutar una nueva función para mostrar el contenido HTML. Note que el parámetro que pasamos se llama datos que contiene la respuesta JSON.
El bucle de respuesta
Fíjate que también he dejado un comentario con el código. console.log (data.responseData.feed) Si desea mostrar la salida de todos los contenidos JSON. Es posible mostrar más que solo el título del feed y los enlaces URL. Pero quería mantener este ejemplo recortado de adornos innecesarios. Usted tiene la capacidad de agregar más cosas por su propia voluntad directamente desde esta función.
Dentro de la exitosa función de llamada ajax, he incorporado un bucle .each () para iterar sobre los elementos dentro de la fuente. Observe que se puede acceder a esta matriz a través de data.responseData.feed.entries que nos convertimos en un par de clave y valor. Es bastante simple porque solo necesitamos una variable de cadena para mantener el HTML. Luego, utilizando jQuery .append (), todo el contenido se agrega de nuevo a la página.
La salida del título no está dentro de este bucle .each () porque solo debe agregarse una vez para cada feed. Pero también está utilizando otra función personalizada escrita para poner en mayúscula cada primera letra dentro de cualquier cadena de JavaScript. Algunas de las fuentes RSS tendrán todas las letras del título en minúsculas, lo que puede parecer extraño. Aquí está el código de función y es muy corto.
Tenga en cuenta que las fuentes RSS pueden tener mucha más información para publicar. A veces incluso encontrará imágenes en miniatura incrustadas en el XML de la fuente. Esto hace posible incluir imágenes de artículos dentro de su propia aplicación web RSS. Las posibilidades son prácticamente infinitas con un fácil acceso a las API de Feed de Google.
Demo en vivo - Descargar código fuente
Pensamientos finales
Las fuentes RSS siguen siendo muy populares entre los desarrolladores web porque es un método común de transferencia de datos entre sitios web.Esto permite a los comercializadores de Internet publicar fácilmente actualizaciones en Twitter o Facebook directamente desde la fuente RSS del sitio web. Tendría que recomendar descargar una copia de mi código fuente y jugar en su propio tiempo. Además, vea si puede agregar alguna de sus propias funciones o crear una aplicación web útil relacionada con las fuentes RSS populares.