Todo sobre Twitter @anywhere

@AnyWhere es el no tan nuevo servicio de Twitter, el objetivo con esto es brindar a todos los usuarios una manera más fácil y dinámica de interactuar con Twitter desde cualquier página Web.

Los elementos que conforman @AnyWhere son embeds y botones y Tooltips que tienen una gran funcionalidad como de tweetear automáticamente, loguearte con Twitter OAuth, y seguir a otros usuarios sin tener que salir de tu Web.

Para poder utilizar @AnyWhere tenemos que registrar previamente una aplicación, luego podremos trabajar directamente en nuestra Web.

Registrar una aplicación en Twitter:

Para crear una aplicación en Twitter deberán loguearse e ingresar al siguiente enlace:

http://dev.twitter.com/

Luego del registro exitoso, nos mostraran la configuración que luego necesitaremos para integrar la aplicación con nuestro sitio Web.

Incluir Librería @AnyWhere

En nuestro .html debemos de llamar a un script alojado en el servidor de Twitter, este nos permitirá dar la funcionalidad a base de JavaScripts en nuestra Web.

< !DOCTYPE HTML>

  
    
    
    
  
  
    ...
  

HoverCards

Los HoverdCards son una funcionalidad que podemos ver en la página de Twitter.com, donde al hacer hover a cualquier usuario nos lanza un Tooltip con información precisa sobre el mismo como numero de followers, following, dando la facilidad para poder hacer Follow o Unfollow dependiendo.

Para implementarlo solo tenemos que incluir este script dentro de nuestro html justo antes de cerrar el .

Esto realizara un proceso de convertir en HoverCards a todas las palabras que contengan un @usuario dentro del contenedor #main-content, el parametro linkify: false inhabilitara al hacer click el enlace a su cuenta en Twitter.

Tweet Box

El Tweet Box es un Formulario para tweetear automáticamente desde tu Web, incluyendo el contador de caracteres y un botón para loguearse a Twitter.

Podemos personalizarlo con ciertos parámetros por JavaScript, defaultContent servirá para incluir un texto por defecto en el Tweet Box.

Follow Buttons

Los Follow Buttons servirán para que los usuarios que visitan nuestra Web puedan seguirnos con un simple click y sin tener que ir a Twitter. El botón con funcionalidad de detectar si ya los usuarios ya te siguen mostrara un mensaje haciendo saber que ya son followers.



Le pasamos como parametro el id del contenedor del botón, en el método followButton tendremos que pasar como parametro el usuario al que se deberá seguir.

Connect Button

Este botón permite autorizar a tu Sitio Web para poder acceder mediante Twitter OAuth, luego de esto podrás realizar las diversas funcionalidades que brinda @AnyWhere sin tener que autorizar accesos nuevamente.



El botón aparecerá mediante este script, pasamos como parametro el id del contenedor del botón, luego en el método connectButton podemos personalizar ciertas características como el tamaño, que pueden ser: small, médium, large, xlarge.

Login Button personalizado

Otra opción si deseamos personalizar mejor el botón es, dándole la funcionalidad a un enlace cualquiera mediante este script:



Esto hará que el botón de id=signin-btn sea el responsable de loguear a los usuarios con tu sitio web por medio de Twitter OAuth.

Usuarios conectados

Cuando un usuario ya se autorizo a nuestra Web para que podamos interactuar con Twitter mediante ella es ilógico que siga saliendo el botón de “Conectar con Twitter”, así que con este script podemos trabajar con los datos del usuario logueado.



Esto hará que una vez logueados con Twitter muestren algunos datos del usuario para informarle que están conectados con la Web mediante Twitter.

Más info:

jfdghjhthit45

También te puede interesar

5 Comments

  1. Nelson Diaz
    jun 18, 2010 @ 13:12:54

    Saludos mi buen amigo, muchas felicidades por tu blog, te comento que he deseado implementar el “Tweet Box” en mis blog, pero no he logrado aun identificar donde colocar el código, te agradezco mucho mi buen amigo si me puedes brindar tu apoyo al respecto.
    Muchas Gracias!!!

  2. Nelson Diaz
    jun 18, 2010 @ 13:16:33

    Saludos mi buen amigo, te comento que he intentado colocar el “Tweet Box” en mis blog pero no he logrado identificar donde colocar el código, agradezco mucho tu apoyo al respecto. Muchas Gracias!!!

  3. Christian
    ago 25, 2010 @ 16:25:54

    Muy buen post!!! ahora tengo una pregunta. Tengo el script de “retweet” en mi sitio, pero estoy notando que las URLs con “ñ” no me las esta tomando, como puedo solucionar este tema? sin tener que cambiar todas las urls
    Espero alguien pueda ayudar me en esto.

  4. Jorge
    jun 19, 2011 @ 17:38:30

    He podido añadir el login, me abre ventana para conectar con la api pero se cae al presionar confirmar, creo que el problema está en el archivo callback.¿Que hay en el archivo callback? Muchas gracias!

  5. Jorge
    jun 20, 2011 @ 20:01:26

    que hay en el archivo callback.php? quise hacer un loging, me sale el botón, me abre la ventana de permiso, acepto y se produce un error, muchas gracias!