Cómo añadir Twitter @anywhere en WordPress

Twitter lanzó su plataforma @anywhere no hace mucho tiempo. Esta nueva plataforma integra twitter en tu sitio con algunas líneas de JavaScript. Permite más tweets, más tráfico, más seguimientos, más participación, más usuarios y más información. Ahora puede incrustar un cuadro de tweet en su sitio donde la gente puede twittear directamente desde su sitio. También convierte todos los nombres de usuario de twitter en un enlace (@AprenderWP). Si activa la opción hovercard, los usuarios verán un cuadro de diálogo con un botón de seguimiento y la información del usuario. También puedes crear conectarte con botones de twitter, seguir @AprenderWP en los botones de twitter y mucho más. Creemos que esta nueva plataforma jugará un papel muy importante en el futuro de la web a medida que crezca el twitter. En este artículo, compartiremos cómo puedes añadir algunos elementos de la plataforma de Twitter en cualquier lugar de tu blog de WordPress.

Actualización: Twitter apagará la API @anywhere el 6 de diciembre de 2012. Aquí hay más detalles.

Paso 1: Registro de una API

Antes de que pueda agregar la plataforma en cualquier lugar de su sitio, debe registrar una API. Se le pedirá que acceda a una página que se parecerá a esta:

Una vez que se registre, recibirá una clave de API. Lo siguiente que debe asegurarse es que el nivel de permiso está establecido en Lectura y escritura, de lo contrario, los usuarios no podrían hacer clic en el botón siguiente. Esto es un fallo con twitter, pero están trabajando en ello para solucionarlo. Pero para mantenernos en el lado seguro, le daremos las instrucciones de cómo hacerlo.

En primer lugar, haga clic en el enlace http://twitter.com/oauth En esta página, verá la aplicación que ha registrado. Haga clic en el nombre de su aplicación y ésta lo llevará a la página de detalles de la aplicación. Hay un botón llamado «Editar ajustes de la aplicación». Haga clic en este botón para ir a la página de edición, donde tendrá que desplazarse hacia abajo hasta el elemento denominado «Tipo de acceso predeterminado». Cámbiela por «Read & Write».

Paso 2: Implementarlo en su sitio

Debido a que hay numerosas características en la plataforma de cualquier lugar, explicaremos cada una de ellas una por una. Lo primero que tiene que hacer es llamar al JavaScript principal. Twitter recomienda que coloques este script en tu archivo header.php ().

1 «http://platform.twitter.com/anywhere.js?id=YourAPIKey&v=1 «type=»text/javascript»>

Recuerde agregar su clave de API donde dice YourAPIKey en el enlace.

Ahora echemos un vistazo a las características individuales que esta plataforma puede hacer por usted.

Enlazar automáticamente todos los nombres de usuario de Twitter

Esta función enlazará automáticamente todos los nombres de usuario de twitter en tus mensajes y comentarios. Si mencionas un nombre de usuario de twitter en este formato: @AprenderWP <<< Se enlazará automáticamente a la cuenta de twitter correspondiente. Esto te puede ahorrar mucho tiempo si escribes mensajes con menciones a los usuarios de twitter. Para añadir esta característica, simplemente pegue el siguiente código en el encabezado de su sitio, después del script principal.[php][/php]Esto enlazará todos los nombres de usuario de twitter mencionados en la etiqueta de tu cuerpo, excluyendo los enlaces, scripts, iframes, área de texto, etiquetas de título y otros botones.

Enlazar automáticamente todos los nombres de usuario de Twitter con una Hovercard

Esta característica enlaza automáticamente todos los nombres de usuario de twitter que se encuentran en la página, y también proporciona un hovercard en un efecto de mouseover. Así que cuando el usuario de su sitio pase el ratón por encima de un nombre de usuario como @AprenderWP, verá un hoverbox como el que se muestra en el ejemplo anterior. Si hacen clic en el botón siguiente, pueden seguir directamente al usuario desde su sitio web. Para habilitar esta función, simplemente pegue el siguiente código en el encabezado de su sitio debajo del script principal.

123456 «text/javascript»>twttr.anywhere(onAnywhereLoad);functiononAnywhereLoad(twitter) {twitter.hovercards();};

Botones de seguimiento inteligente para Twitter

El botón de seguimiento inteligente permite a su usuario seguir su cuenta directamente desde su sitio. Puede crear botones para su sitio y utilizarlos en su mensaje o en cualquier otro lugar. Vea el ejemplo en vivo a continuación:

Para añadir este tipo de botón a su sitio, primero pegue el siguiente código en el encabezado de su sitio debajo del script principal:

123456 «text/javascript»>twttr.anywhere(onAnywhereLoad);functiononAnywhereLoad(twitter) {twitter(‘#follow-AprenderWP’).followButton(«AprenderWP»);};

Segundo, necesitas añadir la siguiente etiqueta div donde quieres que se muestre este botón:

1 «follow-AprenderWP»>

Recuerda cambiar AprenderWP por tu nombre de usuario, de lo contrario se mostrará un enlace a nuestra cuenta de twitter.

Tweet Box en vivo en su sitio

Puedes crear una caja de tweets en tu sitio que permitirá a los usuarios twittear directamente desde tu sitio sin tener que ir a twitter. Un ejemplo de esta caja se puede ver a continuación: (Recuerda que si haces clic en tweet, se tweetará).

Intenta twittear desde la caja de arriba para ver lo genial que es. Apreciaríamos mucho si twitteas el contenido por defecto, así que nos ayuda

Bueno, como puedes ver, esta caja de tweets en vivo es realmente poderosa. Incluso puedes añadir texto de Retweet si lo deseas con un poco de personalización. Para agregar una caja de tweets en vivo en su sitio, primero pegue el siguiente código en el encabezado de su sitio después del script principal:

1234567891011 «text/javascript»>twttr.anywhere(onAnywhereLoad);functiononAnywhereLoad(twitter) {twitter(«#custom-tweetbox»).tweetBox({label: «Live Tweet Box:»,defaultContent: «Todo el mundo debería seguir @AprenderWP para los increíbles consejos de #WordPress»,altura: 50,anchura: 480,});};

Luego agrega el siguiente código donde quieres mostrar la caja de tweets en vivo:

1 «custom-tweetbox»>

Vemos que ya hay pocos plugins en el directorio de plugins de WordPress que le permite usar las características básicas como la tarjeta hover, o el auto-enlace. Puedes usar esos plugins si quieres, pero esto es algo tan simple que es mejor colocar los códigos manualmente.

Si te ha gustado este artículo, por favor, vuelve a twittearlo. Si se nos ha pasado algo por alto, por favor, háganoslo saber en los comentarios.

Recursos adicionales:

Documentación de Twitter en cualquier lugar
Simple Twitter Connect Plugin (Gran plugin por un autor que apoya – Gracias Otto)

Deja un comentario