Usando el servicio @Anywhere de Twitter en 6 pasos

La semana pasada, Twitter lanzó @Anywhere, que, con solo unas pocas líneas agregadas en su código, puede incorporar todas las funcionalidades de la plataforma de Twitter a su sitio web. @Anywhere puede permitir cualquier cosa, desde convertir un simple @nombre de usuario en un enlace en el que se puede hacer clic, hasta crear nuevos tweets directamente desde su sitio personal. Te mostraré exactamente cómo hacerlo en este tutorial.!

Antes de comenzar, crea una aplicación

Para comenzar a utilizar @Anywhere, debe tener una clave API. ¿Qué? ¿No lo tienes? No hay problema. Simplemente vaya aquí y registre una nueva aplicación (no la registre desde aquí).

Si tiene un servidor local instalado, configúrelo en un dominio (developertutorial.com, por ejemplo), ya que no funcionará con su host local (si no sabe cómo hacerlo, consulte este tutorial, la parte del archivo hosts es particularmente importante).
Si no tiene un servidor local, deje esta sección en blanco. Solo recuerde que para la producción, tendrá que establecerlo en el dominio en el que está trabajando.

Y finalmente, establezca el tipo de acceso predeterminado en Lectura y Escritura. Esto es muy importante!

Ahora, serás redirigido a la página de configuración de la aplicación. Copie la clave del consumidor (Clave API) y comencemos a usar @Anywhere.

Incluyendo el Javascript de @ Anywhere

Abra su nuevo archivo HTML y, dentro de etiqueta, incluye:

Su código debe verse como:

    @En cualquier sitio     ...

Reemplazar Clave API con la Clave de API de la Aplicación que obtuvo en el paso anterior. El parámetro v = 1 es la version Quizás en el futuro, Twitter agregará nuevas características y tal vez nuevas sintaxis. Para evitar que se rompa el código existente de @Anywhere, se conservará el código antiguo si se especifica. La versión 1 es compatible con todos los navegadores principales, incluido IE6.

Después de incluir este archivo JavaScript, podemos acceder a la twttr objeto, que invocará el en cualquier sitio() funciona con un parámetro cuando @Anywhere está listo:

 twttr.anywhere (función (twitter) // Acciones cuando @Anywhere está listo);

El parámetro (en este caso gorjeo) es el objeto que usaremos, similar a jQuery's PS.

A continuación, necesitamos crear una base HTML. Copie y pegue el siguiente código y colóquelo dentro de la etiqueta "body".

   Mi blog
  Esta es una prueba de blog post testing @Anywhere by @twitter.
 Si te ha gustado este tutorial, sígueme y mantente en contacto con @NETTUTS para obtener más información..
 
 
  Comentarios
  @corcholat dice: Que gran tutorial! 
 
 @faelazo dice: También debes seguir a @smashingmag

Ahora vamos a profundizar.

1. linkifyUsers: convertir @something en enlaces

@Anywhere nos permite convertir @mentions en enlaces. Esta funcionalidad se llama linkifyUsers, y es bastante sencillo: establece el elemento HTML que desea convertir en un enlace.

Como queremos que todas las menciones del documento se conviertan en enlaces, simplemente llamamos a linkifyUsers () Función en el elemento cuerpo:

 twttr.anywhere (function (twitter) twitter ("body"). linkifyUsers (););

Como se mencionó anteriormente, el parámetro "twitter", dentro de la función de devolución de llamada, es muy parecido al alias "$" de jQuery; Si queremos convertir @mentions en enlaces, pero solo aquellos dentro de una determinada sección, podemos usar un selector CSS, como se muestra a continuación..

 twttr.anywhere (función (twitter) twitter (". post"). linkifyUsers (););

linkifyUsers () Acepta un objeto como parámetro, con dos propiedades: nombre de la clase y éxito. Con nombre de la clase, puede especificar una clase que se aplicará cuando se encuentren las @mentions; así, por ejemplo, podría agregar una clase "roja" sin sentido y especificar en su CSS:

 .rojo color: # f00;

Aquí está el código.

 twttr.anywhere (función (twitter) twitter ("cuerpo"). linkifyUsers (className: 'red'););

2. hovercards: muestra información adicional sobre Hover

hovercards () convierte @mentions en enlaces, pero también carga una pequeña información emergente en el mouseover. Aquí hay un ejemplo básico de su uso..

 twttr.anywhere (función (twitter) twitter.hovercards (););

sin embargo, hovercards () es lo suficientemente flexible como para incluir ciertos elementos, incluso si no tienen una @mention en ellos. En el HTML, estoy vinculando "sígueme" a http://twitter.com/faelazo; pero @cualquier lugar es lo suficientemente inteligente como para convertir este enlace en una hovercard. Al agregar una clase de "hovercard" a la etiqueta de anclaje, Twitter manejará el resto!

 twttr.anywhere (function (twitter) // Encuentre @mentions y vincule como de costumbre twitter ("body"). hovercards (); // Encontremos los elementos que tienen una clase de hovercard twitter (". hovercard"). hovercards (nombredeusuario: función (nodo) var twitter_regexp = /twitter\.com\/([a-z0-9_◆ *) / / (.**)?/gi; if (node.href.match (twitter_regexp) && (twitter_match = twitter_regexp.exec (node.href))) return twitter_match [1]; return ";););

los nombre de usuario parámetro toma una función con un parámetro que será el objeto encontrado (en este caso nodo). Esto es lo que sucede dentro de la función, línea por línea..

var twitter_regexp = /twitter\.com\/([a-z0-9_◆*)/gi;

Esta es una expresión regular. Coincidirá con un twitter.com/ cadena con valores alfanuméricos y un guión bajo.

if (node.href.match (twitter_regexp) && (twitter_match = twitter_regexp.exec (node.href)))

Si la expresión regular coincide con la propiedad href del elemento de nodo, configure la variable twitter_match para capturar los valores en una matriz.

volver twitter_match [1];

Se devolverá el partido encontrado..

Añadimos un "retorno" en caso de que el elemento tenga una clase, pero no se refiera a twitter.com; por lo que no habrá partido. Si vuelve falso o NULO, El script arroja un error. Con una cadena vacía, muestra una hovercard pero no se ha encontrado ningún usuario.

Ahora, si esto es un poco demasiado complicado, siempre puede simplificar el proceso y agregar el nombre de usuario como el atributo de título de la etiqueta de ancla.

 Sígueme

Y acaba de devolver el nodoes título atributo. Mucho más fácil, ¿verdad??

 twitter (". hovercard"). hovercards (username: function (node) return node.title;);

Las "hovercards" se pueden aplicar a cualquier elemento (incluso un div), siempre que especifique un nombre de usuario.

 twitter ("# main"). hovercards (username: function () return 'therrorcom';);

3. followButton: invitar a seguir con un solo clic

boton de seguir() agregará un botón para seguir el parámetro de nombre de usuario en el elemento especificado previamente.

El siguiente código agregará un botón para seguir a Nettuts + en el #principal div.

 twttr.anywhere (función (twitter) twitter ("# main"). followButton ("nettuts"););

boton de seguir() espera un parámetro: el nombre de usuario a seguir. Bastante simple, eh?

4. tweetbox: tweets de su sitio

tweetbox () adjuntará un cuadro en el que los usuarios pueden ingresar sus comentarios y twittearlos a través de su sitio.
tweetbox Puede recibir un objeto como parámetro, con las siguientes propiedades:

mostrador (booleano, predeterminado verdadero)
Si mostrar o no el contador para los caracteres restantes.
altura (entero, por defecto 65)
La altura de la caja, en píxeles..
anchura (entero, por defecto 515)
El ancho de la caja, en píxeles..
etiqueta (cadena, por defecto "¿Qué está pasando?")
El texto sobre el recuadro..
defaultContent (cadena, por defecto ninguno)
Puede ingresar de forma predeterminada la URL, un @mention, un #hashtag, etc..
enTweet (función)
Se llama después de presionar el botón de tweet. Recibe dos argumentos: tweet de texto plano y tweet de HTML..

Un defecto tweetbox se puede llamar después del elemento con la clase de comentarios con el siguiente fragmento de código.

 twttr.anywhere (función (twitter) twitter (". comments"). tweetBox (););

Por lo tanto, si desea una etiqueta personalizada, un contenido y una devolución de llamada cuando se haya enviado el tweet, use este código.

 twitter (". comments"). tweetBox (label: '¿Qué piensas de este artículo?', defaultContent: '#nettuts', onTweet: function (plain, html) // Acciones cuando se envía un tweet) ;

enTweet podría ser útil si planea reemplazar el área de comentarios predeterminada con el CMS que está usando. Aún necesitarías una base de datos y una tabla para mostrar los comentarios, ¿verdad? Así que puedes hackear un poco el CMS y hacer una solicitud AJAX con el enTweet Evento para insertar el tweet en tu base de datos..

5. conectar: iniciar sesión en un usuario a su aplicación

Como probablemente viste, los dos últimos métodos requieren confirmación para otorgar permiso a la aplicación. @Anywhere tiene un método para verificar si el usuario ha iniciado sesión con la aplicación (no en Twitter). Puedes usar condicionales para mostrar o no ciertos elementos.

Este fragmento agregará el botón de conexión en el elemento con una clase de comentarios.

 twttr.anywhere (función (twitter) twitter (". comments"). connectButton (););

Si necesita un botón con un tamaño diferente, puede pasar un objeto literal con el tamaño y el valor de la propiedad pequeño, mediano, grande o grande. Tenga en cuenta que "medio" es el valor predeterminado.

 twttr.anywhere (función (twitter) twitter (". comments"). connectButton (size: 'large'););

El objeto de Twitter incluye algunas golosinas extra; uno es usuario actual, que es un objeto; el otro es está conectado(), que es una función que devuelve un booleano. A partir de aquí, podemos crear algunas sentencias condicionales..

 twttr.anywhere (función (twitter) si (twitter.isConnected ()) alerta ('Bienvenido, estás conectado'); else twitter (". comments"). connectButton (););

Si está conectado() devoluciones cierto, podemos mostrar cierta información del usuario, como el nombre de usuario (nombre de pantalla), la imagen de perfil (profile_image_url), los seguidores o los siguientes. Aquí hay una lista de la información a la que puede acceder la aplicación. Vamos a ver el usuario actual objetar en el rodeo final.

6. Resumen final: mezclando todo junto

Estaré modificando el div con la clase de comentarios..

  Comentarios
  @corcholat dice: Que gran tutorial! 
 
 @faelazo dice: También debes seguir a @smashingmag
 
 
  Agregar comentario

Ahora vamos a incluir jQuery para hacer las cosas un poco más fáciles. Insertar, entre y , el siguiente código:

Ahora tenemos un espacio para añadir comentarios. Primero, usemos el está conectado() condicional para mostrar un botón si el usuario no ha iniciado sesión en nuestra aplicación; Este botón se añadirá al elemento con una "añadir" clase.

 if (twitter.isConnected ()) twitter (". comments"). connectButton ();

Ahora vamos a usar el objeto currentUser de Twitter. Este objeto puede recuperar información con el método data (). Así que el siguiente fragmento de código recuperará el nombre de pantalla del usuario.

 twitter.currentUser.data ('screen_name');

@Anywhere nos permite especificar las funciones de devolución de llamada para el botón de conexión característica. Como argumento, acepta un objeto con dos propiedades: autenticación completa y desconectar; ambas son funciones, entonces cuando desconectar Se invoca, podríamos actualizar la página. Lo mismo es válido para authComplete. Vamos a reemplazar el connectButton () línea con este fragmento de código:

 twitter (". comments> .add"). connectButton (authComplete: function (user) location.reload ();, signOut: function () location.reload (););

Esto es bastante directo: pasamos un objeto como argumento, luego configuramos ambos desconectar y autenticación completa Funciones para recargar la página. Tenga en cuenta que he dejado caer el más cláusula para el está conectado() condicional con el fin de establecer el desconectar evento.

A continuación, vamos a añadir un tweetbox dentro del condicional.

 if (twitter.isConnected ()) $ (". comments> .add> .author"). html (' '+ twitter.currentUser.data (' screen_name ') +' | Desconectar'); twitter (". comments> .add"). tweetBox (label: '¿Qué opinas sobre este artículo?', defaultContent: '#nettuts');

Si el usuario ha iniciado sesión, debe haber un botón de seguimiento. De nuevo, dentro del condicional:

 twitter (". comments> .add"). followButton ("nettuts");

Aquí está todo el condicional, redondeando todas las características de @Anywhere.

 if (twitter.isConnected ()) $ (". comments> .add> .author"). html (' '+ twitter.currentUser.data (' screen_name ') +' | Desconectar'); twitter (". comments> .add"). tweetBox (label: '¿Qué opinas sobre este artículo?', defaultContent: '#nettuts'); twitter (". comments> .add"). followButton ("nettuts");

Conclusión

@Anywhere es obviamente la respuesta de Twitter a Facebook Connect. Esperan llevar esta plataforma a tantos sitios en la web como sea posible; y si bien el servicio aún es joven, y la documentación podría mejorarse, ¡definitivamente es prometedora! Muéstrenos lo que ha hecho con @Anywhere en sus propios sitios web!

Código