Ubuntu y algo mas: Integrar feeds a una entrada o web con javascript.

Antes de empezar esta entrada decir que se un poco de html y nada de javascript, esto lo he hecho solo leyendo las instrucciones de google. (Bendito Google).

A muchos se nos a pasado alguna vez por la cabeza componer una entrada con feeds de noticias o nuestros blogs favoritos, de tal manera que nuestros lectores tengan acceso a titulares que nosotros queremos compartir. Para esto normalmente hacia falta PHP. Gracias al API AJAX de Google para feeds podemos descargar cualquie feed de rss o atom y utilizarlo mediante javascript en nuestras webs o blogs.

Vamos a ver como he hecho el apartado Feeds - Mundo Linux de este blog.

1. Tener una cuenta de Google y registrarte en el API <<<aquí. Aceptais teminos y generais la clave API.

2. Ya teneis la clave y un ejemplo simple de como usarlo. Para probarlo podeis hacer lo siguiente:
Copia el codigo a un editor de texto y lo guardas como por ejemplo pruebaapi.html , Después al hacer doble click en el archivo veras lo que hace. y asi te familiarizas con el tema.

3. Si lo que quieres es algo parecido a Feeds - Mundo Linux te dejo el codigo y como modificar los feeds.

Codigo:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google AJAX Search API Sample</title>
    <script src="http://www.google.com/jsapi?key=AQUI PON TU KEY API "></script>
    <script type="text/javascript">
    /*
    * How to use the Feed Control to grab, parse and display feeds.
    */

    google.load("feeds", "1");

    function OnLoad() {
      // Create a feed control
      var feedControl = new google.feeds.FeedControl();

      // Add feeds.

      feedControl.addFeed("http://feeds.feedburner.com/noticiasubuntu","Noticias Ubuntu");
      feedControl.addFeed("http://info.inrom.net/?feed=rss2", "Inrom Hardware");
      feedControl.addFeed("http://feeds.feedburner.com/sliceoflinux", "Slice of Linux");
      feedControl.addFeed("http://feeds.feedburner.com/paraisoLinux", "Paraiso Linux");
      feedControl.addFeed("http://feeds.feedburner.com/linuxadmin", "Linuxadmin");

      // Draw it.
      feedControl.draw(document.getElementById("content"));
    }

    google.setOnLoadCallback(OnLoad);
    </script>
</head>
<body style="font-family: Arial;border: 0 none;">
    <div id="content">Loading...</div>
</body>
</html>
Bueno pues solo teneis que sustituir la clave que os ha dado google en la linea de arriba y feedControl.addFeed, por el feed que vosotros querais.
En caso que por ejemplo lo quieras colocar en una entrada de tu blog, recuerda que debes haber clickado en la pestaña "Edicion de HTML".

feedControl.addFeed("http://feeds.feedburner.com/linuxadmin", "Linuxadmin");
En rojo la dirección del Feed y en amarillo es el texto que querais poner como titulo del feed.

Como obtener el Feed?

Bien aunque es algo sencillo, como nadie nace aprendido, os pongo con total imparcilidad como ejemplo: agregar el feed de mis entradas.

Click en entradas y se te abrira una pantalla de selección.

Elige add to Google por ejemplo y te aparecera una dirección y pedira comfirmación para añadir a google reader o igoogle. Esa es la direccion del Feed.

Bien pues la colocas o editas en el html de arriba y ya esta, te aparecerán las ultimas entradas en tu blog o web.

Ejemplo:

feedControl.addFeed("http://ubuntu-paranovatos.blogspot.com/feeds/posts/default","Ubuntu y algo mas");
feedControl.addFeed("http://www.que.es/feeds/rss-feeds-todas-noticias.xml", "Noticias - Que.es");
feedControl.addFeed("http://feeds.feedburner.com/sliceoflinux", "Slice of Linux");

He colocado el Feed de las ultimas noticias del www.Que.es para que veas otro ejemplo, puedes obtener mas feeds personalizados del www.Que.es aqui.

Como vereis es muy simple para el que sepa, pero para los novatos es una herramienta muy interesante.

Si te ha sido útil, o tienes alguna aportación por favor comenta. Recuerda "un blog se alimenta de comentarios".

Mas codigos en Google.
El codigo de esta entrada antes de ser modificado esta aquí>> http://code.google.com/apis/ajax/playground/?exp=feeds#feed_control

2 comentarios:

Anónimo28 de agosto de 2011, 13:21
Está de maravilla ENrique, mme ha sido muy útil. Lo que no sé es como editar la fuente, tamaño, etc. Solo he podido cambiar el tipo de letra, pero para integrarlo en mi web me sale el texto muy grande. Gracias por adelantado.
ResponderEliminar
Respuestas
Enrique28 de agosto de 2011, 19:33
Gracias por tu comentario, eres de lo poquitos que leen esta entrada. Y mira que me costo encontrar esta información en su día. Respecto a las fuentes ni idea, si lo descubres por favor cuéntamelo y ampliamos esta entrada. Si controlas CSS, igual puedes definir un div y ponerlo en el sitio adecuado. Igual van por ahí los tiros.
ResponderEliminar
Respuestas