Twitter pone a disposición de sus usuarios Twitter @Anywhere , una herramienta para integrar el sistema de microblogging con cualquier página web. En este post te contamos cómo puedes implementarlo en tu blog. Aunque se requieren unas mínimas nociones de HTML y Javascript, si sigues el siguiente tutorial paso a paso no tendrás ningún problema.

La integración la hemos hecho en Blogpocket para testear el sistema y hay que tener en cuenta que @Anywhere es una utilidad también en pruebas. Otra cuestión a tener en cuenta es que el uso de software externo interactuando en tu navegador puede provocar algún malfuncionamiento. No me hago responsable de los fallos que se puedan producir, con las modificaciones que, a continuación, indico.

Algunas observaciones previas: el tutorial se basa en la documentación Getting Started de la página de Twitter para desarrolladores y se trata de instalar los módulos en su versión más básica. Por otra parte, en Ayuda WordPress nos informaban de la existencia de un plugin para instalar @Anywhere pero, he preferido, en primer lugar, probar la instalación “en bruto” ya que dicho plugin solo implementa una de las funcionalidades disponibles. Este pequeño tutorial está pensado para la plataforma WordPress y sirve en general. Para Blogger u otra plataforma pueden existir peculiaridades.

Para poder utilizar @Anywhere en tu sitio tienes que llevar a cabo las tres acciones siguientes.

Dar de alta la aplicación

1. Ir a Twitter Developers.

2. Crear una nueva aplicación con la cuenta de Twitter. En el formulario rellenar los campos “Application Website” y en “Callback URL” con la dirección de nuestro blog.

3. Anotar la API Key que se proporciona al terminar el registro.

4. Ir a Twitter Oauth y en la aplicación que se acaba de crear, cambiar modo lectura por lectura y escritura (settings).

Definir la API Key en el blog

5. Dentro de las etiquetas <head> y </head> (en WordPress se encuentra dentro del archivo “header.php”) introducir el siguiente código, sustituyendo APIKEY por la API Key obtenida en el punto 3.

<script src=”http://platform.twitter.com/anywhere.js?id=APIKEY&v=1″ type=”text/javascript”></script>

Para evitar problemas de transcripción o copia de caracteres, puedes descargar el archivo anywhere_header.txt que contiene el código que hay que añadir en el fichero “header.php”. Nótese que si se quieren evitar problemas de validación HTML, hay que poner “amp;” entre “&” y “v=1″.

Configurar el blog

6. Dentro de todas las posibilidades que ofrece @Anywhere, los códigos que incluimos en este post implementan las siguientes funcionalidades: Hovercards, botón de follow, botón de conexión a Twitter y Tweetbox. Dado que las tweetbox solo afectarán a la página de post individuales, prepararemos dos códigos javascript: uno para las hovercard y los botones de follow y conexión y otro para las tweetbox.

6.1. Javascript para hovercards y botones de follow y conexión.

Hovercards. Permite mostrar una caja para interactuar con el usuario, al pasar el ratón por encima en el lugar donde se muestra. Además, basta poner delante el “@” para que automáticamente se convierta en enlace y no hace falta poner “a href=” en el html. En el post El reencuentro pueden ver un ejemplo en las citas a usuarios de Twitter.

Connect with Twitter. Se trata de un módulo que abre una interface para conectarte con Twitter. En Blogpocket lo hemos colocado en la parte superior del sidebar, modificando el widget correspondiente y añadiendo la instrucción: <div id=”twitter-connect-placeholder”></div>

Esa es la forma que tiene @Anywhere de relacionar la configuración (que veremos al final de este apartado) con el sitio concreto donde se visualiza el módulo: mediante el valor del “id”.

Follow on Twitter. Este botón facilita que tus lectores puedan seguirte en Twitter. En Blogpocket, también lo hemos situado en el sidebar y la instrucción incluida es: <div id=”follow-blogpocket”></div>

Y ahora el código que debe ir justo antes de </body>. Al poner la llamada al final, evitamos retrasos en la carga de la página si existen problemas en Twitter. Pero si la contestación tarda, no veremos ni los botones ni los enlaces a usuarios de Twitter, ni la caja para tuitear.

<script type=’text/javascript’>
twttr.anywhere(onAnywhereLoad);
function onAnywhereLoad(twitter) {
// Connect With Twitter Flow
twitter(“#twitter-connect-placeholder”).connectButton({ size: “medium” });
twitter(“#follow-blogpocket”).followButton(“blogpocket”);
// Hovercards
twitter.hovercards();
};
</script>

Para evitar problemas de transcripción o copia de caracteres, puedes descargar el archivo anywhere_footer.txt que contiene el código que hay que añadir en el fichero “header.php”, en el caso de que estés utilizando WordPress. Cámbiese también “blogpocket” por tu usuario de Twitter.

6.2. Javascript para las tweetbox.

TweetBox. Para que tus lectores puedan tuitear directamente desde tu página. No se trata de enviar el post a Twitter sino de escribir un tuit desde el blog. En Blogpocket, lo hemos situado al final de cada post, en el archivo “single.php” (siempre y cuando estés utilizandon WordPress). Para ello, hay que incluir la siguiente instrucción en el lugar exacto donde quieres que aparezca la tweetbox:

<span id=”placeholder”></span>
<script type=”text/javascript”>
twttr.anywhere(“1″, function (twitter) {
twitter(“#placeholder”).tweetBox({
counter: true,
height: 20,
width: 480,
label: “Tuitear acerca de este post:”,
defaultContent: “<?php echo getTinyUrl(get_permalink($post->ID)); ?>”
});
});
</script>

Para evitar problemas de transcripción o copia de caracteres, puedes descargar el archivo anywhere_single.txt que contiene el código que hay que añadir en el fichero “single.php”, en el caso de que estés utilizando WordPress.

En el parámetro “DefaultContent” puede ir un literal como “@blogpocket” o cualquier otra cosa (o, incluso, eliminar el dicho parámetro, para lo cual elimínese también la coma al final de la línea de “label”). Pero nosotros hemos ensayado con la función getTinyUrl que acorta cualquier dirección llamando a TinyURL. Dicha función se puede definir en el archivo “functions.php”:

function getTinyUrl($url) {
$tinyurl = file_get_contents(“http://tinyurl.com/api-create.php?url=”.$url);
return $tinyurl;
}

Este hack nos permite poner como valor por defecto, del contenido de la tweetbox, el link acortado al post desde el cual se publica el tweet.

Nuestra fuente: blogpocket.com