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:

<!–
  copyright (c) 2009 Google inc.

  You are free to copy and use this sample.
  License can be found here: http://code.google.com/apis/ajaxsearch/faq/#license
  Codigo Modificado por Enrique: http://ubuntu-paranovatos.blogspot.com/
–>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
  <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&#8221;,”Noticias Ubuntu“);
      feedControl.addFeed(“http://info.inrom.net/?feed=rss2&#8243;, “Inrom Hardware“);
      feedControl.addFeed(“http://feeds.feedburner.com/sliceoflinux&#8221;, “Slice of Linux“);
      feedControl.addFeed(“http://feeds.feedburner.com/paraisoLinux&#8221;, “Paraiso Linux“);
      feedControl.addFeed(“http://feeds.feedburner.com/linuxadmin&#8221;, “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&#8221;, “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&#8221;, “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


Anuncios
Esta entrada fue publicada en agregador feeds, api feeds google, crear entrada feeds, feeds, google, rss, sindicacion. Guarda el enlace permanente.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

Conectando a %s