@Anywhere Javascript API : Jugando un poco

Categorías: Tutoriales, Twitter - Tags: ,

@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

1
2
3
4
 
<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

1
2
3
4
5
6
7
8
9
10
11
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 :

1
2
3
4
<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:

1
2
3
4
5
6
7
8
9
 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.

1
2
3
4
5
6
7
8
9
10
11
12
13
	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 :D

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

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:
TwitterFacebookLinkedIn

  • Pingback: Bitacoras.com

  • oscar

    hola, gracias por el post antes de nada. Tengo una duda sobre cómo colocar bien el código para que se muestre el timeline y los mensajes, no consigo hacerlo funcionar. Gracias!