27 de enero de 2014

Google Api: otra forma sencilla de integrar artículos de un blog en tu página web.

API significa Interfaz de Programación de Aplicaciones (del inglés Application Programming Interface), y es el conjunto de llamadas a bibliotecas (informática) que ofrecen acceso a servicios web de terceros, dentro de nuestra propia aplicación web, de manera abstracta para nosotros.


Google proporciona más de 60 apis de acceso a sus servicios en su página Google Data APIs

¿Cómo funcionan las APIs de Google?
Las aplicaciones que escriben los desarrolladores se conectan remotamente con el servicio Web API de Google. Esta comunicación se realiza mediante un protocolo llamado SOAP (Simple Object Access Protocol). Está basado en XML, y se usa para el intercambio de información entre aplicaciones. Sin embargo, no es necesario tener conocimientos ni de SOAP ni de XML para trabajar con las APIs de Google.

Vamos a ser capaces de insertar en nuestro sitio web los últimos post publicados en cualquier blog con sólo unas líneas de código html:

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("feeds", "1");
function initialize() {
 var feed = new google.feeds.Feed("http://jmacuna73.blogspot.com/feeds/posts/default"), entry, dv;
 feed.setNumEntries(5);
 feed.load(function(result) {
  if (!result.error) {
   var container = document.getElementById("feed"), entry = result.feed.entries, date;
   for(var i = 0; i < entry.length; i++) {
    dv = document.createElement("div");
    date = new Date(entry[i].publishedDate);
    dv.innerHTML = '<a href="' + entry[i].link + '" target="_blank">' + entry[i].title + '</a> ' + date.toDateString().substr(4) + '<br/>' + entry[i].contentSnippet + '<hr/>';
    container.appendChild(dv);
   }
  }else{alert(result.error.message);}
 });
};google.setOnLoadCallback(initialize);
</script>
<div id="feed"></div>


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 por el 5 en el método setNumEntries.

A continuación mostramos el noticiero formateando el estilo con CSS (Cascading Style Sheets).

Sigue las siguientes instrucciones:

  • escribe en la caja de texto un feed válido (Ejemplo: http://wwwhatsnew.com/feed/ - http://www.ticbeat.com/feed/)
  • selecciona del desplegable el número de artículos a mostrar.
  • y pulsa el botón Últimas noticias. Obtendrás el resultado de tu canal en tiempo real.

Número de post a mostrar:
Loading...


Nota importante


Google ha decidio dejar de dar soporte a esta api a partir del 15 de diciembre de 2016.

El mensaje oficial es:

"This API is officially deprecated and will stop working after December 15th, 2016."

Más información

Para superar este contratiempo, en el post "Alternativas a Google Feed Api" ofrezco tres opciones válidas con ejemplos incluidos.



11 comentarios:

Anónimo dijo...

Excelente ejemplo, ¿pero si quiero que incluya imágenes?

Jose Maria Acuña Morgado dijo...

Muchas gracias, me alegro de que te haya sido de utilidad :)

Si quiere mostrar imágenes debes utilizar el parámetro content (en el ejemplo: entry[i].content)

Puedes consultar todos los parámetros que usa Google Feed API en https://developers.google.com/feed/v1/reference

Un saludo!

Maverick dijo...

hola jose maria

Te felicito por tu artículo.

He tratado de hacer que el API FEED de google me muestre los resultados como www.feedwind.com (incluyendo imágenes) y no he podido. Probé con el entry[i].content que sugeriste, pero los resultados no son los esperados, ya que muestra el texto completo, y la imagen la deja centrada, no en la esquina.

Saludos

Jose Maria Acuña Morgado dijo...

Hola Maverik,

el parámetro content del Api de Google devuelve el texto completo en formato html y eso nos servirá para nuestro propósito.

Lo que tenemos que hacer es acortar el tamaño del texto con javascript y formatear el resultado con hojas de estilo.

Si quiero mostrar hasta un máximo de 500 caracteres (lo dejo a tu elección): entry[i].content.substring(0,500)

También he modificado el tamaño de los thumbnails (80 píxeles) para que encaje perfectamente en el contenedor del artículo: #feed img{width:80px;vertical-align:middle;}

Puedes jugar con los estilos para adaptar el ejemplo a tus necesidades, aunque eso requiere de ciertos conocimientos de css :)

El ejemplo funcionando en:

https://googledrive.com/host/0B5G3cbs08P16cjJTc0RkOWJPbVU/

Isaac Palacio dijo...

Hay alguna forma de integrar el blog de blogger en tú pagina, que se muestre las entradas completas, no solo el listado, que se vean y se puedan comentar las entradas con los comentarios de Google, etc

Jose Maria Acuña Morgado dijo...

Buenos días Isaac, como ya he comentado, se pueden integrar las entradas del blog (Blogger) en tu página web con el Api de Google. El parámetro content(entry[i].content) te devuelve el contenido completo (con imágenes) de cada uno de los artículos del blog.
Lo que no te permite la librería de Google es publicar comentarios.
Un saludo!

Nicolas Marulanda dijo...

Hola, tal ves puedan ayudarme, he estado tratando de intercalar dos feed con la API de google pero no me lo imprime.

Yo creo un bucle al rededor del metodo ".load" cambiando solo el objeto en cada iteracion, pero nada.


google.load("feeds", "1");
function initialize() {
var feed1 = new google.feeds.Feed("http://jmacuna73.blogspot.com/feeds/posts/default");
var feed2 = new google.feeds.Feed("http://jmacuna73.blogspot.com/feeds/posts/default");
feed1.setNumEntries(5);
feed2.setNumEntries(5);
var entry, dv;
var num = 0, i = 0;
var feed = feed1;
var errorfeed = false;

do{
feed.load(function(result) {
if (!result.error) {
var container = document.getElementById("feed"), entry = result.feed.entries, date;
dv = document.createElement("div");
date = new Date(entry[i].publishedDate);
dv.innerHTML = '' + entry[i].title + ' ' + date.toDateString().substr(4) + '
' + entry[i].contentSnippet;
container.appendChild(dv);
}else{
alert(result.error.message);
errorfeed = true;
}
});
if(num == 1){
num = 0;
i++;
feed = feed1;
}else{
num++;
feed = feed2;
}
}while(i < 5 && !errorfeed);

};
google.setOnLoadCallback(initialize);

en la consola siempre me dice "TypeError: entry[i] is undefined" si quito el bucle no da problema.

Jose Maria Acuña Morgado dijo...

Buenos días Nicolás Marulanda,

si lo que queremos es añadir más de un feed recomiendo usar el método FeedControl que proporciona el API. Es muy sencillo y transparente para el programador.

Ejemplo:

google.load("feeds", "1");
function initialize() {
var feedControl = new google.feeds.FeedControl();
feedControl.addFeed("http://jmacuna73.blogspot.com/feeds/posts/default", "Blog sobre Nuevas Tecnologías");
feedControl.addFeed("http://www.ticbeat.com/feed/", "Noticias de tecnología y análisis para entusiastas y empresas");
feedControl.draw(document.getElementById("feed"));
}
google.setOnLoadCallback(initialize);

Un saludo!

Nicolas Marulanda dijo...

Donde puedo ver todos los metodos, ya que ese no lo encuentro en https://developers.google.com/feed

Jose Maria Acuña Morgado dijo...

El método FeedControl lo han quitado de la documentación oficial de su API pero se puede seguir usando.

Alba Paola de la Cruz Solano dijo...

Esta increíble el articulo, muy excelente pagina.

Una pregunta como haces para enlazar las entradas y que se muestren por completo en la pagina, ademas de que podría agregar que se pueda comentar en las entradas?