Anywhere: Auto-linkification of Twitter usernames

Ya os hablamos hace un par de semanas de @Anywhere (API Javascript de Twitter) y hoy queremos entrar en más detalles sobre la librería, para que la puedas implementar en tu web de forma sencilla y potente. Por no hacer el artículo hablaremos en de cada uno de las funciones en un artículos separados. Así, hoy trataremos uno de los métodos más sencillitos de la API @Anywhere. También quiero destacar que todos los ejemplos de código estarán dentro de la llamada de callback (T) como dijimos en el anterior artículo:

twttr.anywhere(function (T) {
  // Tu código aquí...
});

Como sabéis la función T puede recibir como parámetro un selector el cual usará la librería Sizzle para encontrar los elementos del DOM, es la misma librería que usa jQuery, así que seguro que estáis familiarizados con este forma de encontrar elementos en el DOM. Si no le pasamos ningún argumento a T tomará todo el contenido del body de la página para buscar.

Con Linkify users podremos enlazar con el perfil de Twitter a todos usuarios que mencionemos en la página de la forma: @nombreUsuaurio teniendo en cuenta la siguiente expresión regular: /\B[@＠]([a-zA-Z0-9_]{1,20})\b/g, es decir,el símbolo '@' seguido de 1 a 20 caracteres alfanuméricos incluyendo el '_'. Por lo tanto nombres como @pixelovers, @jorgecasar y @juanmaguitar son nombre de twitter válidos.

Sabiendo esto simplemente podremos enlazar estos nombres utilizando el siguiente código en Javascript:

T.linkifyUsers();

Si queremos ser más específicos y que solo busque en cierta parte de nuestra página podemos llamar a la función especificando un selector:

T('#content').linkifyUsers();

También es importante saber que la función  linkifyUsers puede recibir un objeto como argumento con las sugientes propiedades:

• className: Puedes especificar un nombre de clase alternativo. (En la documentación)
• complete: Puedes añadir una llamada de callback a la finalización del autoenlazado (No se especifica en la documentación)

Un ejemplo especificando todas las formas de llamar a esta función podría ser:

T('#content').linkifyUsers({
   className:"twitterName",
   complete: function(){
      alert('LinkifyUsers done!');
   }
});

Creo que con esto podréis hacer una primera toma de contacto con @Anywhere. Ya lo tienes implementado en tu sitio y quieres mostrarnos como lo has hecho. Deja un comentario explicandolo. Si has tenido problemas, preguntanos, entre todos podemos intentar encontrar la solución.