Como crear un widget de Twitter con Javascript y el API AJAX de Google para feeds

APIs, Javascript

David | 26/08/2009

Buy Accutane Canada, Post Accutane Depression & Online With Paypal Isotretinoin asíncronas a URL’s de tu propio dominio, debido a restricciones de seguridad.

El otro día estuve viendo cómo cargar los frameworks más famosos y las API’s de Google desde el CDN de Google. Google también permite cargar sus API’s AJAX mediante este método, y entre estas API’s se encuentra el API AJAX de Google para feeds, que permite cargar cualquier RSS de cualquier dominio haciendo uso solamente de Javascript, eliminando la necesidad de crear un proxy en el servidor, ya que Google lo crea por ti. Las ventajas están bastante claras:

Menos lógica en el servidor.
Menos sobrecarga en el servidor
Las ventajas de usar un CDN externo para cargarJavascript.

La dirección del feed RSS que voy a utilizar es la de mi cuenta de Twitter. Para obtener la dirección solamente hay que abrir el enlace que proporciona Twitter en su página web.

Obtener la URL del feed de twitter

Usando el objeto FeedControl

El objeto FeedControl, permite añadir todos los feeds que quieras mediante le método addFeed y luego, mediante el método draw, inyecta el contenido de estos en el elemento DOM especificado.

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
	google.load("jquery", "1.3.2");
	google.load("feeds", "1");
 
	function inicio() {
		var feedControl = new google.feeds.FeedControl();
                feedControl.addFeed("http://twitter.com/statuses/user_timeline/29672915.rss", "Twitter");
                feedControl.draw(document.getElementById("contenedor"));
	}
	google.setOnLoadCallback(inicio);
 
 
</script>

El código HTML se muestra a continuación:

1
2
3

   <body>
         <div id="contenedor" > </div>
   </body>

En el div identificado con la palabra “contenedor” se cargará automáticamente el contenido del Feed. En la imagen se puede observar el resultado.

widget de twitter con API AJAX de Google

Luego, viendo el código HTML generado mediante un inspector HTML como Firebug o el que trae IE 8, se puede crear un código CSS para cambiarle la apariencia. Este método es muy cómodo, pero si se necesita más control sobre el código generado se puede utilizar el objeto Feed, que proporciona más control.

Usando el objeto Feed

El objeto Feed permite cargar el documento XML que compone el Feed y tratarlo como un objeto JSON (comportamiento por defecto). Después se itera sobre el objeto JSON y se inyecta directamente sobre el DOM de la página.

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("feeds", "1");
 
function inicio() {
        var feed = new google.feeds.Feed("http://twitter.com/statuses/user_timeline/29672915.rss");
	feed.setNumEntries(3); //Por defecto son 4
		feed.load(function(result) {
			if (!result.error) {
				var contenedor = document.getElementById("contenedor");
				var tmpStr = "";
				tmpStr += "<h2> <a href='"+result.feed.link+"'> " + result.feed.title + "</a></h2>";
				contenedor.innerHTML +=  tmpStr;
 
				for (var i = 0; i < result.feed.entries.length; i++) {
					var entry = result.feed.entries[i];
					var tmpStr = "";
					tmpStr += "<div class='entrada'> ";
					tmpStr += "<img src='twitter.png' alt='Icono de Twitter' class='icono' /> ";
					tmpStr += "<div class='contenido'><a href='"+entry.link+"'>"+ entry.contentSnippet + "</a></div>";
					var fecha = entry.publishedDate.split(" ");
					tmpStr += "<div class='fecha'> " + fecha[1]+ " " +fecha[2]+" " + fecha[3]+ " "+ fecha[4]+"</div>";
					tmpStr += "</div> ";
					contenedor.innerHTML +=  tmpStr;
				}
 
			}
		});
}
 
google.setOnLoadCallback(inicio);
 
</script>

Breve explicación del código:

En el constructor del objeto Feed se pasa como parámetro la URL del feed RSS.
El método setNumEntries establece el número de items descargados del feed.
El método load carga el feed en la variable result.
result.feed.entries es un array de objetos con la información de cada item del feed. Se itera sobre este array y se va inyectando la información de los feed en el DOM.

El código HTML es el mismo que el usado en el primer ejemplo. Luego con un poco de CSS se le da un poco de apariencia al widget.

 
*{
margin:0;
padding:0;
}
#contenedor{
	width:280px;
	padding-left:15px;;
}
#contenedor h2 a{
	color:#FF4D07;
	font-size:20px;
	font-family:"Trebuchet MS";
	text-decoration:none;
}
div.entrada{
	margin:10px;
 
}
div.entrada img.icono{
	float:left;
	margin-right:15px;
}
div.contenido a{
	color:#09399F;
	text-decoration:none;
}
div.fecha{
	font-family:"Trebuchet MS";
	font-size:12px;
	color: #7F7F7F;
}

El resultado final es este:

widget de twitter creado con el API de Google para feeds

Conclusión

La potencia de esta API está bastante clara, nos proporciona una forma rápida y cómoda de acceder a los feeds RSS de cualquier parte. Teniendo en cuenta que ahora hay muchos servicios como redes sociales, etc… que proporcionan esta información mediante RSS, nos abre un abanico de posibilidades a la hora de mejorar nuestros diseños añadiendo información en tiempo real sobre, por ejemplo, nuestros últimos tweets.

Enlaces relevantes

Ver Ejemplo en funcionamiento
Cargar frameworks y API’s Javascript desde el CDN de Google
Sitio oficial del API AJAX de Google para feeds

Compartir:

Return to the Mobile Edition.

Comentarios

2
SAR
10 de noviembre del 2009 a las 12:47 am

Buenas Tardes me sirvio mucho el script, me gustaria saber como hiciste para poner el tuyo en la parte de abajo derecha donde dice life stream, ya que en ese se puede diferenciar los link y las direcciones, seria posible que hiciseras un tutorial bien explicado? saludos y muchas gracias nuevamente por compartir conocimientos, saludos.
3
David
12 de noviembre del 2009 a las 4:13 am

Hola SAR, el widget que tengo debajo es el que me proporciona Friendfeed, de todas formas ahora Twitter tiene un API que te devuelve directamente los tweets en formato HTML, es decir, con los enlaces coloreados y todo. Investiga sobre el API javascript de Twitter.

Un saludo!
4
Fher Baez
19 de diciembre del 2009 a las 7:40 pm

Cuando pongo el codigo con tu “user_timeline/29672915.rss” funciona el codigo, pero cuando uso el mio “user_timeline/78347945.rss” no se veen las entradas de twitter,a que se debe?

debo configurar algo desde Twitter, podrias ayudarme?

Yo quiero algo asi como este sitio (red10.com) en su twitter, y este codigo creo que me llevara a ello.

Help Me!

Trackbacks

String tweetify con jQuery y Mootools | Nosolocodigo