Como el botón oficial hace un request por cada impresión, puede resultar un poco “no practico” cuando queremos tener una sitio lo más veloz posible. Este nuevo botón no realiza ningún request hasta que no se hace click. Una vez hecho click el botón, este enviá desde el lado del servidor el titulo y la URL a Twitter para que el lector envié su Tweet.

Sus ventajas son que no carga ningún tipo de JS extra en tu sitio y actuá de forma pasiva hasta que se hace click, lo que nos da una mejor performance. El botón al momento de enviar el tweet crea un URL corta con el API de Bit.ly si existe algun tipo de  error, creara otra URL con Tinyurl, y en caso de que surja otro error enviara la URL original de la entrada.

Por el otro lado como no trabaja con ningún script no es posible mostrar el numero de retweets.

En webresourcesdepot encontraras un Demo, junto con el código necesario para implementar el botón y también las instrucciones para que lo implementes en tu instalación de WordPress.

Todavia es muy pronto para saber si sera el botón líder en el mercado o solo sera un competidor de Tweetmeme o Topsy. Por mi parte no me he pasado, ya que no es posible tener control sobre las URI que se acortan, Twitter usa su propio shorten service: http://t.co y escapa de nuestras manos.

Lo primero que necesitaremos es crear una nueva función donde tendremos la configuración del botón, para esto en nuestro archivo functions.php vamos a insertar:

function tbutton($url) {
global $post;
$tuser = 'baires';
$title = htmlspecialchars($post->post_title);
$url = get_permalink($post->ID);
 
echo '<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>';
echo '<a href="http://twitter.com/share" class="twitter-share-button"
      data-url="'.$url.'"
      data-via="'.$tuser.'"
      data-text="Leyendo: '.$title.'"
      data-related="baires: Siempre hablando de Wordpress y dise%F1o"
      data-count="horizontal">Tweet</a>';
}

Como podes observar no hay nada raro en esta función, solo los valores necesarios para que el botón pueda funcionar correctamente. Los únicos valores que necesitas editar son $tuser con tu usuario de Twitter y el campo data-related que sirve a modo de recomendar un usario cuando se comparte un link. Solo debes respetar el formato: nombre de usario seguido por dos puntos (:) y una pequeña descripción, nada más.

Otra opción que quizás quieras modificar es el formato del botón en el campo data-count, en el ejemplo se utiliza un formato horizontal. Los valores que podes usar: vertical, horizontal o none.

Solo resta integrar el botón en nuestro Theme, para eso dentro del archivo single.php y donde lo creamos conveniente insertaremos:

<?php tbutton(get_permalink($post->post_id)); ?>

Felicidades has insertado el botón oficial de Twitter en menos de un minuto

No te olvides de leer la documentación pertinente al tema donde podrás encontrar algunos ejemplos más junto con la info no cubierta en este artículo.

Quizás sea algo que se de utilidad ya que es muy sencillo de implementar y puede de ser suma utilidad.

Utilizando jQuery

Tal vez el método mas recomendable, ya que es más simple y no necesitamos modificar otros archivos.

Antes del cierre de </header> insertamos:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
 
    <script type="text/javascript">
    $(document).ready(function() {
        url = "<?php the_permalink() ?>";
        beforecounter = " (<strong>";
        aftercounter = "</strong>)";
 
        $.getJSON('http://api.tweetmeme.com/url_info.jsonc?url='+url+'&callback=?',
            function(data) {
                $('#twcount').prepend(beforecounter + data.story.url_count + aftercounter);
        });
 
    })
    </script>

La función buscara el id twcount e insertara la cantidad de Retweets al comienzo, podríamos hacer una llamada similar a:

<p>Esta entrada tiene <span id="twcount">Retweets</span></p>

Utilizando PHP/Wordpress

Tan simple como el método anterior, solo que en este caso se requiere manipular un poco más el código. Donde necesites mostrar la cantidad de Retweets podes insertar:

<?php 
	$url = get_permalink(); 
	$bitly = 'http://api.tweetmeme.com/button.js?url='.$url;
	$content = file_get_contents($bitly); 
	preg_match("/\<span class=\"c\"\>(.*\d)\<\/span\>/i", $content, $matches); 
	echo $matches[0]; 
?>

Ahora, si trabajas en WordPress podes crear un función para ahorrar tiempo y poder utilizar la función donde lo necesites. En tu archivo functions.php inserta:

function rtcount()
{
	$url = get_permalink(); 
	$bitly = 'http://api.tweetmeme.com/button.js?url='.$url;
	$content = file_get_contents($bitly); 
	preg_match("/\<span class=\"c\"\>(.*\d)\<\/span\>/i", $content, $matches); 
	echo $matches[0]; 
 
}

Ahora solo resta hacer el llamado correspondiente:

<p>Esta entrada tiene <?php rtcount(); ?> Retweets</p>

En simples lineas hemos logrado mostrar la cantidad de Retweets que cierta URL tiene, ideal para complementar con algún plugin para socializar contenido o simplemente para hacer referencia a los Retweets

Su principal característica por llamarla de algun modo es la que ofrecer un paquete en el que podemos, por ejemplo mostrar nuestros Tweets, mostrar resultados de una búsqueda, integrar/mostrar un Tweetbox, mostrar el botón de Twitter Connect y autentificar usuarios de manera segura via el API.

Su uso es de lo mas simple, una vez integrados los archivos necesarios solo debemos hacer el llamado correspondiente:

$('#twts').jTweetsAnywhere({
    username: 'tbillenstein',
    count: 5
});

jTweetsAnywhere cuenta con muchas opciones y servicios, por lo cual te recomiendo que veas la pagina con todos los ejemplos para ver como se comporta este plugin.

Este pequeño script (jQuery de por medio) le permitirá a tus usuarios enviar un Tweet directamente desde tu sitio conectándose mediante @anywhere. Al acceder click sobre un elemento asignado se abrirá el box donde podrán enviar el Tweet de una manera elegante y con bastantes opciones a la hora de personalizar el mensaje.

Una de sus ventajas, es que no se requiere como en otros casos contar un API key propio ya que utilizamos el de aplicación y tampoco necesitas descargar ningún archivo ya que se trabaja de manera online siempre.

Instalación y uso

En tu header es necesario hacer el llamado al script

<script type="text/javascript" src="http://tweet-it.s3.amazonaws.com/tweet-it.js"></script>

Ahora solo necesitamos configurar Like it? Tweet it! e inicializar

<script type="text/javascript">
	$(document).ready(function(){
		$(".tweet-this a").tweetIt();
	})
</script>

Por supuesto necesitamos un elemento al cual hacemos el llamado en nuestro HTML

<p class="tweet-this"><a href="javascript://">Like it? Tweet it!</a></p>

Por defecto el script generara un shortlink único para cada entrada que sera guardado en el servidor de los creadores de este script para evitar generar un nuevo link corto por cada visita a la pagina. Si esto nos convence, también se puede especificar nuestro propio shortlink e indicar que se utilice ese en su lugar.

En cuanto a la personalización, el script cuenta con una documentación muy extensa y clara para lograr una buena interacción con sitio, podemos configurar casi al 100% el script, desde los títulos hasta el mismo estilo CSS mediante.

Por ejemplo estas son algunas de las opciones que seguramente te gustaría personalizar:

<script type="text/javascript">
$(document).ready(function(){
		$(".tweet-this a").tweetIt({
			animate: "fade", //Animacion del box
			header: "Tweetea esta entrada",//Titulo del box
			typeATweet: "Tu Tweet aqui",//Texto a modo de intro en el Tweet
			closeButton: "Cancelar el Tweet",//cancelar
			emptyConfirm: "Estas seguro de enviar el Tweet solo con el link?",//mensaje en caso de que no se introdusca texto
			youare: "Hola,",//Bienvenida
			findingLink: "Buscando el link",//Buscando...
			intro: "Comparti esta entrada con el resto del mundo",//Subheader en el box
			notConnected: "Necesitas conectar para enviar el Tweet"//Mensaje si el lector no esta conectado
		});
	})
</script>

Y por ultimo, pero no menos importante contamos con un plugin para WordPress junto con la documentación necesaria para integrar Like it? Tweet it! en Tumblr y Blogger.

El plugin cuenta con un panel de administración donde podemos especificar el formato del Retweet y la integración con bit.ly. Cuando el usuario quiere hacer un Retweet se abre un box al estilo Facebook donde puede añadir sus comentarios o hashtag al mensaje.

El boton puede ser incluido por medio de un shortcode:

Hola!, hace un [retweet-anywhere html="retweet de este post" format="Leyendo: %s %l /por @miusuario"]

Donde: %s es el titulo del post y %l es la URI del post

O si lo necesitamos, también puede ser incluido en cualquier parate del Theme, mediante la siguiente llamada:

if (function_exists("retweet_anywhere")) retweet_anywhere();

Esta es un buena alternativa a los ya conocidos botones de Topsy o Tweetmeme. Un punto a su favor es el Branding que incluirá cada Tweet enviado por este medio, ya que figurara como “enviado desde MiBlog.com”. Hermoso, no?

La documentación es de lo  más bastante simple y llevadera, solo necesitas un API Key que te proporciona Twitter y estarás en condiciones de tener tu propio botón para los Retweets.

La siguiente función de 16 lineas nos permite habilitar las principales características sin la necesidad de recurrir a ningún plugin.

Creando nuestra función

En tu archivo funcions.php inserta esta nueva función:

// Twitter Anywhere
$any_api = "TU_API_AQUI";
wp_enqueue_script("tanywhere", 
	"http://platform.twitter.com/anywhere.js?id={$any_api}&v=1");
add_action("wp_head", "t_anywhere");
 
function t_anywhere()
{
	echo '<script type="text/javascript">';
	echo 'twttr.anywhere(onAnywhereLoad);';
	echo 'function onAnywhereLoad(twitter) {';
	echo 'twitter.hovercards();'; // Por defecto hovercards en todo el site
	echo 'twitter("#followme").followButton("miusuario");'; // <div="followme"></div>
	echo 'twitter(".tweetbox").tweetBox();'; // <div="class="tweetbox"></div>
	echo '}';
	echo '</script>';
}

Con esto habilitamos las funciones: Hovercards, un boton Followme y un Box para que los usuarios envíen sus Tweet directamente desde tu Blog. Solamente necesitas introducir tu API key.

Te recomiendo que leas la entrada “Decile hola a @anywhere” donde explico un poco mas en detalle cada funcion. También recordá que es necesario registrar tu nueva App para obtener un API Key y darle permisos de lectura y escritura a tu App desde la tu lista de Aplicaciones.

Por ultimo, si tenes ganas no te olvides de seguirme vía @baires donde hablo de estos temas y muchas cosas más.

La plataforma se ha lanzado oficialmente hace unas horas, y ya contamos con una buena documentación algunos ejemplos para que nos pongamos a trabajar.

Primeros pasos

Lo primero que necesitaras sera crear una nueva aplicación, por lo que te tendrás que loguearte con tus credenciales de Twitter y obtener tu acreditación. Una vez hecho esto, es necesario crear una aplicación, para este caso vamos a crear una aplicación Web para interactuar con Twitter dentro de nuestro Blog.

Cuando nuestra aplicación haya sido aprobada, se nos proporcionara una API Key y una versión de Anywhere. Estos datos son privados y muy sensibles, no los comportas.

Para poder comenzar a interactuar vamos a necesitar introducir dentro de las etiquetas header el script de Anywhere:

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>Anywhere Sample</title>
    <script src="http://platform.twitter.com/anywhere.js?id=YourAPIKey&v=1" type="text/javascript"></script>
  </head>
  <body>
    ...
  </body>
</html>

YourAPIKey es obviamente la Key que se ta proporcionado con anterioridad.

Auto-linkification

Esta función nos permite “auto-linkear” a un perfil de Twitter cada vez que mencionemos a este usuario.

<script type="text/javascript">
  function onAnywhereLoad(twitter) {
    // this is the callback function you specified in your initializer
    twitter.linkifyUsers();
  };
</script>

Esta función busca dentro del DOM e intenta coincidir usuarios con sus respectivos perfiles.Por razones obvias no se “linkeara” a usuario si estos están dentro de algunas etiquetas especiales, como ser A, SCRIPT, NOSCRIPT, etc.

El proceso es bastante rápido, solo demora entre 150-200ms en hallar las coincidencias.

Cada link incluye por defecto la class="twitter-anywhere-user" Si necesitamos añadir una class especial a cada link que se ha creado, solo debemos crearla.

<script type="text/javascript">
  function onAnywhereLoad(twitter) {
    // this is the callback function you specified in your initializer
    twitter("#linkify-this-content").linkifyUsers({
      className: 'my-tweep'
    });
  };
</script>

Dentro del container linkify-this-content se creara una clase llamada my-tweep que reemplazara a las class por defecto anteriormente mencionada.

Hovercards

Esta es una de las funcionales mas amistosas y esperadas. Es la inserción de un pequeño Tooltip desde donde podemos ver un poco de info sobre este usuario, hacer un Following o unfollowing y demás.

<script type="text/javascript">
  function onAnywhereLoad(twitter) {
    // this is the callback function you specified in your initializer
    twitter.hovercards();
  };
</script>

Por ejemplo, Puedo decir: Anoche esta leyendo mis mensajes en mi @blackberry y encontré varios de @baires.

Hovercards entra en conflicto con la funcionalidad Auto-linkification, de tener las dos funciones habilitadas Hovercards tendrá prioridad. Para usar las dos funciones al mismo tiempo solo debemos indicar una nueva class para el link al usuario en alguna función. Tal como lo explique más arriba.

<script type="text/javascript">
  function onAnywhereLoad(twitter) {
    twitter("#main-content a.my-tweep").hovercards();
  };
</script>

Aquí estaremos indicando que solo se crearan Tooltips para los usuarios que se encuentren dentro del container main-content y con la class my-tweet en su respectivo anchor.

Follow buttons

Otra opción interesante para tener en cuenta. Nos permite añadir un botón donde mediante una ventana de por medio el usuario puede hacer un Follow dentro de nuestro Blog, sin tener que salir alguna vez de él. Por ejemplo con este boton me podrás seguir en Twitter:

Seguime

El botón es inteligente, por lo cual si ya estas siguiendo a @baires en teoría te tendría que avisar, aunque en la practica pareciera que no funciona asi.

<script type="text/javascript">
  function onAnywhereLoad(twitter) {
    // this is the callback function you specified in your initializer
    twitter('#follow-twitterapi').followButton("twitterapi");
  };
</script>

Y ahora solo mencionamos el elemento:

<div id="follow-twitterapi"></div>

Consideraciones Finales.

Estos son tres ejemplo simples y básicos de lo que se puede hacer con @Anywhere. Dentro de la documentación encontraras algunos ejemplos más, así como también una serie de recomendaciones y manuales de como integrar esta plataforma con tus Apps.

Podemos usarlo como una carta de presentación, a modo de diversión o micro blogging. En Flavors.me podemos sindicar los siguientes servicios:

• Flickr
• Tumble
• Twitter
• Vimeo
• Last.fm
• Facebook
• Feeds
• Goodread
• Netflix

Uno de los puntos fuertes es la posibilidad de personalizar el diseño de nuestra pagina, contamos con varios modelos/layouts como así también unas cuantas paletas de colores. Flavors.me utiliza jQuery para las transiciones y sIFR para reemplazar fuentes, lo que nos trae un look muy profesional.

Podes ver mi perfil en Flavors.me para que te orientes a lo que te ofrece el servicio.

Si necesitas una invitación, @Jonathan fue gentil en darme un código de invitación para los lectores de Eliseos.net. Solo debes registrarte e ingresar argentina como código de invitación.

Las URL’s cortas pueden ser útiles para promocionar tus artículos en diversas redes sociales, como así también llevar un conteo de descargas o saber la cantidad de cliks que un link recibe.

Por defecto la nueva URL sera algo asi: http://tublog/u/5 permiendo cambiar esta estructura. Por ultimo cabe resaltar que es posible tener control sobre la re dirección de los links vía .htaccess y personalizar mensajes de error al no encontrar una URL.