@Anywhere Javascript API : Jugando un poco

Categorías: Tutoriales, Twitter - Tags: @anywhere, twitter

@Anywhere Javascript API es la nueva API de Twitter @anywhere que aun esta en desarrollo por lo que la documentación existente es nula y solo se puede encontrar este cheat sheet. Un cliente me pidió que le integrara twitter a su aplicación existente y se me ocurrio jugar un poco con la API y esto es lo que logre descifrar/encontrar.

Lo primero que debemos hacer es insertar en nuestro header tal y como hicimos en último tutorial de @anywhere nuestro archivo anywhere.js

 
<head>
<script src="http://platform.twitter.com/anywhere.js?id=TuApiKey&v=1"></script>
</head>

Una vez tengamos esto podemos pedir al usuario que se conecte en caso de aun no estar conectado mostrando el botón de twitter connect

twttr.anywhere(function (T) {
   if (T.isConnected()) { //Comprobamos si el usuario esta conectado
 
	//Tu aplicación va aqui
 
  } else { //mostramos el botón para conectarse
     	 T('#twitter-feed').connectButton();
 
  }  			
 
});

Partiendo de un código HTML como el siguiente :

<div id="twitter-feed"> 
                    <ul id="timeline">          </ul>
                    <ul id="d_messages">          </ul>
</div>

Podemos agregar nuestro timeline y los mensajes directos de la siguiente manera:

 T.User.current().homeTimeline().first(10).each(function(status) {
      	 $('#timeline').append('<li><img src="' + status.user.profileImageUrl + '" width="20px" /><a href="http://twitter.com/' + status.user.screenName + '" title="' + status.user.name + '"> ' + status.user.name + '</a> <br/> ' + twitify(status.text) + '</li>');
 
     				 });
 
 T.User.current().directMessages().first(3).each(function(status) {
      	$('#d_messages').append('<li><img src="' + status.sender.profileImageUrl + '" width="20px" /><a href="http://twitter.com/' + status.sender.screenName + '" title="' + status.sender.name + '">' + status.sender.name + '</a> <br/> ' + twitify(status.text) + '</li>');
 
     				 });

Es bastante simple de entender:

User.current(): Es el usuario conectado actualmente.
homeTimeline() y directMessages() : De donde sacamos los datos
first(10): escogemos los 10 primeros tweets
Y por último gracias a each() creamos la función que agrega cada tweet a nuestra lista.

Recomiendo amplia mente usar Firebug para ver los datos almacenados en status y así ver todas las posibilidades que tenemos para usar.

En mi caso solo uso unas pocas:

profileImageUrl : el avatar
screenName : el nombre de usuario (ideal para crear el link a su cuenta)
name : el nombre del perfil
text: el mensaje o texto del tweet

Como pueden ver en el texto del tweet utilizo una función llamada twitify() que básicamente se encarga de agregar los links a los nombres de usuario (@chifliiiii) , a los hashtag (#interesante) y a los links normales . Esto es debido a que .text devuelve texto plano.

	function twitify( text )
{
    // reemplaza las urls con links
    var t2 = text.replace(/(http|https)(:\/\/)([^ ]+)/ig, '<a href="$1$2$3">$1$2$3</a>' );
 
    // reemplaza @username con un link al la cuenta del usuario
    t2 = t2.replace(/@([^ :]+)/gi,'<a href="http://twitter.com/$1">@$1</a>');
 
    // reemplaza hashtags con un link a las búsquedas
    t2 = t2.replace(/#([^ :]+)/gi,'<a href="http://search.twitter.com/search?q=%23$1">#$1</a>');
 
    return t2;
}

Como les comentaba @Anywhere Javascript API esta aun en desarrollo y puede no ser muy seguro implementarla en tus proyectos ya que todo puede cambiar sin previo aviso

Espero que les sirva de ayuda por que perdí mucho tiempo buscando algo que me explicara como usar la api de anywhere y no encontre nada.Un saludo!!!

Acerca del autor

by Damián Logghe

Programador freelancer y emprendedor en sueños. Contento de ser mi jefe y poder hacer lo que me gusta. Wordpress es mi principal fuente de ingreso y me escribo tanto para ayudar como para tener una guia de memoria. Quieres contratarme? Déjame un mensaje.

Más Posts de Damián Logghe - Web

Sigueme: