Revista Comunicación

Alternativas a Google Feed API para añadir a tu web artículos de un blog

Publicado el 23 enero 2017 por José María Acuña Morgado @jmacuna73
Alternativas a Google Feed API para añadir a tu web artículos de un blog En el post Google Api hicimos mención a las APIs de Google que permiten acceder a múltiples servicios de forma muy sencilla. Una de las características de Google Feed Api era la posibilidad de integrar artículos publicados en cualquier blog en nuestra web, a modo de tablón de anuncios o sección de últimas noticias.
Desafortunadamente, Google ha decidido dejar de dar soporte a esta funcionalidad (Google Feed API Subject to the Deprecation Policy)
No obstante, existen otras opciones útiles para tal propósito.
En este post voy a hacer especial hincapié en estos tres servicios por su facilidad de uso:
  • FeedBurner: es un proveedor de gestión de fuentes web propiedad de Google. Proporciona herramientas de gestión de fuentes web RSS a bloggers, podcasters, y otros publicadores de contenido basado en tecnología web.
  • Yahoo Query Language: la plataforma YQL (Yahoo! Query Language) permite consultar, filtrar y combinar datos a través de la web mediante una única interfaz. Utiliza una sintaxis similar a SQL y puede leer información en formato HTML, XML, JSON, RSS, Atom y microformato devolviendo el resultado en formato xml o json.
  • Rss to Json online converter: se trata de una api creada por un desarrollador independiente que ofrece documentación en https://rss2json.com/docs con ejemplos funcionando en lenguajes de programación como Javascript, PHP, Ruby o Python.

Feedburner

El servicio FeedBurner permite convertir el Feed (Fuente o Canal web) de cualquier blog en un fragmento de código HTML para integrar en tu página web.
En el post "FeedBurner: como añadir entradas de un blog a tu web, sin plugins y en una línea de código." doy instrucciones precisas para utilizar esta api.
Vas a poder comprobar que el 100% es configuración dando como resultado un línea de código para integrar en tu blog o web.

<script src="https://feeds.feedburner.com/hipertextual/index?format=sigpro" type="text/javascript"></script>

Yahoo Query Language

Este servicio web de uso público presenta pocas limitaciones (Información de uso de esta api) y parece ser una opción válida para la visualización de canales RSS de recursos externos.
Dispone de una consola YQL Console que podemos utilizar para realizar consultas in situ y una guía YQL Guide para obtener más información sobre la creación de consultas.

<script>
var mycallback = function(data) {
var entry = data.query.results.rss.channel.item;
var container = document.getElementById("feed"), date;
for(var i = 0; i < entry.length; i++){
dv = document.createElement("div");
date = new Date(entry[i].pubDate);
dv.innerHTML = '<a href="' + entry[i].link + '" target="_blank">' + entry[i].title + '</a><br/>' + date.toDateString().substr(4) + '<br/><div class="article">' + entry[i].description.substring(0,600) + '...</div>';
dv.innerHTML += '<hr/>';
container.appendChild(dv);
}
};
</script>
<div id="feed"></div>
<script src="https://query.yahooapis.com/v1/public/yql?q=select * from xml where url = 'http://feeds.feedburner.com/hipertextual'&format;=json&callback;=mycallback"></script>

Rss to Json online converter

La web facilita una caja de texto para introducir la url de un feed válido.
A continuación, pulsamos el botón Convert to Json y obtenemos la respuesta del documento en formato json.

<div id="feed"></div>
<script>
(function(){
var url = "https://hipertextual.com/feed";
var xhr = createCORSRequest("GET","https://api.rss2json.com/v1/api.json?rss_url="+url);
if (!xhr) {
throw new Error('CORS not supported');
} else {
xhr.send();
}
xhr.onreadystatechange = function() {
if (xhr.readyState==4 & xhr.status==200) {
var responseText = xhr.responseText;
var result = JSON.parse(responseText);
var container = document.getElementById("feed"), entry = result.items, date;
for(var i = 0; i < entry.length; i++){
dv = document.createElement("div");
date = new Date(entry[i].pubDate);
dv.innerHTML = '<a href="' + entry[i].link + '" target="_blank">' + entry[i].title + '</a><br/>' + date.toDateString().substr(4) + '<br/><div class="article">' + entry[i].content.substring(0,600) + '...</div>';
dv.innerHTML += '<hr/>';
container.appendChild(dv);
}
}
}
})();
function createCORSRequest(method, url) {
var xhr = new XMLHttpRequest();
if ("withCredentials" in xhr) {
xhr.open(method, url, true);
} else if (typeof XDomainRequest != "undefined") {
xhr = new XDomainRequest();
xhr.open(method, url);
} else {
xhr = null;
}
return xhr;
}
</script>

Escribimos este fragmento de código dentro del cuerpo de nuestro documento html y sustituimos la url 'http://jmacuna73.blogspot.com/feeds/posts/default' por la de nuestro feed. También podemos modificar el número de entradas a mostrar representado entry.length por un número entero.
Éste es el resultado final:



Volver a la Portada de Logo Paperblog