Blog de sonicbyte
Opinión y tendencias sobre negocios, diseño y avances en Internet
Integra Twitter a tu blog o sitio web como nunca antes con: Twitter Anywere
Recientemente Twitter dio un gran paso en lo que se refiere a la integración de sus servicios con el resto de la web con el lanzamiento de Twitter Anywere.
Antes, la conexión entre Twitter y tu web se reducía a un link estático con tu cuenta, básicamente como si fuese una cuenta de mail (los antiguos links tipo mailto:[email protected]) o para los más intrépidos, con algo de conocimiento de javascript y html, se podía conectar mediante su API para que fuesen visibles tus últimos tweets (como se ve en el pie de página de SonicByte).
Afortunadamente, con el lanzamiento de Twitter Anywere (en obvia respuesta al botón “Me gusta” de Facebook) es posible ahora una mas fácil y potente interacción, gracias a una serie de herramientas que se integran en cualquier página web o blog.
Actualmente las nuevas opciónes de integración son:
Perfiles de usuario o Hovercards: Reemplaza automáticamente toda mención a cuentas de Twitter por enlaces a tu página de perfil y además mostrando mediante un pequeño globo informativo una vista previa de tu último tweet, avatar, seguidores, etc. Junto con esto, hay nuevos botones para seguir a otras personas, que reflejarán dinámicamente si ya están entre nuestros contactos.
Ejemplo Activo: Pasa el ratón sobre esta dirección: @sonicbyte
Como verás, automáticamente convirtió a link el texto con el @ asociado a una cuenta válida y además muestra información adicional y botones para seguirnos.
Tweet Box: Es una caja idéntica a la que existe en el cliente oficial para redactar tus tweets o posts integrada en tu sitio. Es posible elegir la pregunta que se mostrará sobre ella, así como incluir un texto predeterminado, hashtags #, etc.
Registro e inicio de sesión: Ofrece una renovada interfaz más simple y amigable para integrar los registros mediante tweeter evitando la necesidad de abrir nuevas ventanas o pestañas. También incluye botones que indicarán si estas logueado en el sistema con éxito.
Pero hoy sólo explicaremos la primera de estas opciones:
“Hovercards”
¿ Qué necesitas para usarlos ?
Antes de poder usar cualquier servicio de Twitter Anywere, debemos registrar nuestra aplicación, es decir, llenar un formulario que te dará acceso a una clave única para poder comunicarte desde tu sitio con tu cuenta de Twitter.
Entonces lo primero, ingresa al sitio de Twitter Anywere y regístrate como usuario con la cuenta de Twitter que desees usar.
Una vez registrado te aparecerá un panel como este:
Hacemos click en la opción del icono de la mano “Register your own Twitter application“, para acceder a nuestro formulario para crear nuestra aplicación.
Algunos campos son descriptivos (nombre de la aplicación, descripción, etc), donde comienza lo importante es en “Application Website“, ingresa aqui el dominio donde piensas utilizar esta aplicación. El siguiente campo importante es “Application Type” debes seleccionar la opción “Browser” ya que usaremos esto en un navegador web.
En Callback URL debes ingresar una dirección dentro de tu dominio para cuando el sistema logra autenticar un usuario con tu aplicación (esto no es necesario para esta función pero es mejor hacerlo de todas formas)…
Finalmente debemos decirle a Twitter si nuestra aplicación será de lectura y escritura o de sólo lectura, esto nuevamente es referente a los otros tipos de aplicaciones, no a la que utilizaremos en este ejemplo, sin embargo, nosotros hemos puesto “Read & Write“.
Nuestro formulario queda de esta forma:
Grabamos nuestra aplicación, y listo…
Deberías ver algo parecido a esto:
El valor mas importante de lo que ves en la pantalla y que necesitamos para utilizar Twitter Anywere es la serie de letras y numero que aparecen debajo de API Key.
Copiamos ese valor e ingresamos al código fuente de nuestro sitio o blog y entre las etiquetas <head> y </head> copiamos el siguiente código:
<script src="http://platform.twitter.com/anywhere.js?id=TU_NUMERO_DE_API_KEY&amp;v=1 "></script>
<script type="text/javascript">
twttr.anywhere(function(twitter) {
twitter.hovercards();
});
</script>
Debes, por supuesto, poner tu propio numero de API KEY en la linea 1 del ejemplo, y eso es todo, cuando escribas @ y un nombre válido de usuario de twitter se activará automáticamente el Hovercard sobre cualquier parte del texto de tu página.
Linkify
Una opción aún mas sencilla, por si no deseas utilizar el Hovercard, es la que permite convertir a las menciones de usuarios de twitter en links
automáticamente, esto se llama “linkificar usuarios” o Linkify:
Esto se logra con el siguiente código:
twttr.anywhere(function(twitter) {
twitter("body").linkifyUsers();
});
Es posible también solo aplicar el código en determinados bloques o divs de tu página, de forma que la función no se active en todas partes, para esto debes escribir algo como esto:
<script type="text/javascript">
twttr.anywhere(function (T) {
T("#nombre_de_tu_div").linkifyUsers();
});
</script>
Pingback: Bitacoras.com
Pingback: (2da Parte) Integra Twitter a tu blog o sitio web como nunca antes con Anywere | Sonicbyte