en Javascript, Social Media

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 muy largo hablaremos de cada una de las funciones en 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.

Post Anterior
Post Siguiente

Política de Comentarios de pixelovers

Responsable » Juan Manuel Garrido
Finalidad » Moderación de los comentarios
Legitimación » Tu consentimiento expreso que te será requerido por Disqus.
Destinatarios » Los datos de tus comentarios los guardará Disqus, mi sistema de comentarios, que está acogido al acuerdo de seguridad EU-US Privacy Shield tal y como recoge su politica de privacidad
Derechos » Desde Disqus, por tanto, podrás acceder, rectificar, limitar y suprimir tus comentarios o tu cuenta
Tienes más detalles acerca del tratamiento de los datos relacionados con los comentarios en nuestra (Política de Privacidad)