Botón oficial de Twitter

Bueno, hoy voy a apartarme un poco de lo que hemos venido haciendo con twitter y kumbia, para hablar acerca de los recientemente lanzados botones oficiales de twitter. Seguramente si estás en esto de twitter y desarrollar aplicaciones para twitter al menos te habrás enterado de su existencia (si no, es momento de que revises tus feeds).

Para qué sirven?

Sirven para compartir enlaces a través de twitter. Digamos que tenemos un blog interesante, con entradas interesantes, que presumimos que nuestros lectores les gustaría compartir con el mundo a través de twitter. Bien, el lector interesado podría copiar la URL, pasarla por un acortador de direcciones, copiar la dirección corta, pegarla en twitter, copiar el título de la página web, pegarlo en twitter, eventualmente añadir algún comentario y finalmente twittear.

Twitter ahora le ahorra a esos lectores todo este proceso, al permitirnos a nosotros colocar un botón, que con sólo presionarlo, twitteará el enlace por el lector. Simple.

Cómo lo coloco en mis páginas web?

Es muy muy simple. Twitter habilitó esta url donde podemos personalizar como queremos que se vea nuestro botón y nos da el código HTML para que lo insertemos en donde queramos. El sitio nos permite personalizar el botón y (opcionalmente) especificar uno o dos usuarios de twitter que recomendamos para seguir (básicamente, en nuestro tweet se verán como un mention 'via').

Es así de sencillo. Una vez colocado el código HTML en nuestra página, cuando un lector lo oprima, se levantará un pop-up donde nos saldrá el texto que se va a twittear (el cual podremos editar) y el botón para enviarlo.

JavaScript?

Sí, el botón trabaja sobre JavaScript, por lo que si lo que queremos es insertarlo en un foro o cualquier plataforma que bloquee scripts, simplemente NO servirá. Qué podemos hacer entonces?

Bueno, fijándonos un poco en como funciona esto, veremos que a la final lo que el pop-up hace una vez presionado el botón de tweet, es redireccionar a una página web. No hace falta ser un genio para darse cuenta esa url a la que redirecciona el pop-up la podemos colocar en un enlace común y silvestre en HTML. El enlace se ve así:

<a href="http://twitter.com/share?url=URL&text=TEXTO&via=BLOG&related=AUTOR">Twittear</a>

En donde:

• URL es la url que queremos recomendar en el tweet.
• TEXTO es el texto que queremos que aparezca en el tweet.
• BLOG es el nombre de usuario del primer twittero que queremos que aparezca recomendado.
• AUTOR es el nombre de usuario del segundo twittero que queremos que aparezca recomendado.

Sólo hay que tener en cuenta que el TEXTO debe estar codificado, pues es parte de una URL. L gente de alt4040 sugiere este sitio para codificar nuestro texto.

Blogger/Wordpress

Si queremos que el botón aparezca en todas las entradas de nuestro blog, podremos copiar y pegar el código html en todas las entradas. Una forma más inteligente es agregar el código a nuestra plantilla.

Para Blogger, en nuestra plantilla debemos ubicar la clase post-footer y colocar allí el siguiente código (reemplazando BLOG y AUTOR por los correspondientes):

<a expr:href='"http://twitter.com/share?text=" + data:post.title + "&url=" + data:post.url + "&via=BLOG&related=AUTOR"'>Twittear</a>

Para wordpress, debemos ubicar el archivo single.php y allí colocar el siguiente código:

<a href="http://twitter.com/share?url=<?php echo urlencode(the_permalink()); ?>&text=<?php echo urlencode(the_title()); ?>&via=BLOG&related=AUTOR">Twittear</a>

Es todo. Nuestro enlace se verá así:

Twittear

De más estás decir que si no queremos que se vea un texto, sino un botón, o que se vea con cierta apariencia, podemos hacerlo utilizando HTML como siempre lo hemos usado.

Leído en: alt1040