Magazine

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

Publicado el 28 enero 2014 por José María Acuña Morgado @jmacuna73
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="http://jmacuna73.blogspot.com/feeds/posts/' + 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: 51020

Loading...
Jose Maria Acuña Morgado - Desarrollador Web

Volver a la Portada de Logo Paperblog