Google AJAX Feed API

Google AJAX Feed API en una librería AJAX desarrollada por los desarrolladores de Google con el cual puedes implementar un lector de Feeds utilizando un sencillo script. Feed API soporta la mayoría de los formatos de Feed entre los cuales tenemos:

  • Atom (1.0, 0.3)
  • RSS (2.0, 1.0, 0.94, 0.93, 0.92, 0.91. 0.9)

El primer paso para hacer uso de este script es registrarse para obtener un número key, esto lo hacemos en: http://code.google.com/apis/ajaxfeeds/signup.html. Luego del registro te darán un key y los ejemplos con lo podrás implementar fácilmente tu lector de feeds.

ajaxfeed.gif

El siguiente paso es crear un nuevo documento html e incluir el javascript necesario para el funcionamiento de este lector. Donde tukey es tu número key generado en el paso anterior.

  1. <script type="text/javascript"
  2. src="http://www.google.com/jsapi?key=tukey"></script>

Lo que sigue es llamar a la función que sirve para cargar el API para los feeds en su versión 1, esto se hace llamando a google.load

  1. <script type="text/javascript" type="text/javascript">
  2. google.load("feeds", "1");

Lo siguiente es crear una función que cargará al iniciar la página las funciones necesarios para que funcione nuestro lector, aquí llamamos a la función FeedControl el cual tiene múltiples opciones, de estas opciones utilizamos addFeed para agregar un feed que recibe dos parámetros, el primero es la ruta del Feed y el segundo es el titulo que se asignará a este feed. Luego utilizaremos setNumEntries que define la cantidad de registros mostrados por feed. Finalmente utilizamos draw para indicar sobre que parte del html escribiremos los resultados del Feed.

  1. function OnLoad() {
  2.   var feed = new google.feeds.FeedControl();
  3.   feed.addFeed("http://blog.unijimpe.net/feed/", "unijimpe");
  4.   feed.setNumEntries(10);
  5.   feed.draw(document.getElementById("feedDiv"));
  6. }
  7. google.setOnLoadCallback(OnLoad);

Para ello necesitamos tener un div llamado feedDiv en nuestro HTML, que es donde se mostrarán los resultados.

  1. <div id="feedControl">Loading</div>

Finalmente uniendo todos las partes obtenemos:

  1. <title>Google AJAX Feed API</title>
  2. <script type="text/javascript"
  3. src="http://www.google.com/jsapi?key=tukey"></script>
  4. <script type="text/javascript" type="text/javascript">
  5. google.load("feeds", "1");
  6. function OnLoad() {
  7.   var feed = new google.feeds.FeedControl();
  8.   feed.addFeed("http://blog.unijimpe.net/feed/", "unijimpe");
  9.   feed.setNumEntries(10);
  10.   feed.draw(document.getElementById("feedDiv"));
  11. }
  12. google.setOnLoadCallback(OnLoad);
  13. </head>
  14. <div id="feedControl">Loading</div>
  15. </body>
  16. </html>

Hay que tener en cuenta que podemos usar varias veces la opción addFeed con lo cual podemos incluir varios feeds en nuestro lector. El resultado de nuestro ejemplo es el siguiente:

ajaxfeed-01.gif

Comentarios Total 3 comentarios


ed
Publicado: 02/06/2007 6:18 am

Bueno, bueno. Excelente tip.

Saludos.

rudy acero ticona
Publicado: 16/06/2007 9:40 pm

muy bueno, como puedo ahora agregar feeds y tal vez borrar y o superponer.

Lucio Estacio Flores
Publicado: 21/10/2008 12:23 am

Siempre que busco algo, lo encuentro en tu blog, muy util. Pero no me funciono tu ejemplo, creo que tienes que corregir el nombre del div, cambiar ‘feedControl’ por ‘feedDiv’. Asi recien me funciono.
Bye ;)
Lucio

 

Comentar

En este blog los comentarios están moderados, serán mostrados cuando el administrador los apruebe. Por favor, evita comentarios ofensivos u obscenos por que no serán aprobados.
Si deseas publicar código fuente debes hacerlo entre las etiquedas <code> y </code>, además debes reemplazar los carácteres < por &lt; y > por &gt;.

(Requerido)

(Requerido, no será publicado)

(Requerido)

(Tags aceptados: <a> <em> <strong> <code> <ul> <li>)