Ayer Twitter hizo oficial la disponibilidad de Tweet Button (botón twittear), asimismo supimos de que Tweetmeme se asoció con Twitter para ello, eso significa que Tweetmeme eventualmente desaparecerá. Eso no es todo, TweetButton genera automáticamente enlaces acortados con el acortador del propio Twitter (http://t.co/), el cual está limitado para su utilización únicamente desde Twitter, y tampoco nos ofrece datos estadísticos a nosotros como usuarios, sólo lo usan internamente para recabar información acerca de los tweets, mientras que con bit.ly tenemos nuestros datos estadísticos sobre cada enlace acortado.
¿Qué pasará, entonces, con los usuarios que manejan sus propios acortadores? ¿...usuarios que utilizan bit.ly u otro acortador de direcciones URL para tener datos estadísticos sobre sus páginas?
Esta podría ser una solución temporal mientras twitter corrija ese inconveniente, eso si decide hacerlo. Primero acortaremos la dirección antes que Twitter lo acorte con su propio acortador, es decir, acortar una dirección ya acortada con bit.ly, resultando entonces en un doble redireccionamiento.
t.co -> bit.ly -> nuestra dirección final
Primero, twitter tendrá sus datos estadísticos que utiliza para saber la relevancia de los tweets, y segundo, nosotros tendremos nuestro enlace acortado con bit.ly u otro.
Por ejemplo: Podemos crear un enlace que acorte nuestro blog, utilizando bit.ly. Cada vez que creamos un nuevo permalink (enlace permanente para cada post), disponer de ella y generar el enlace a TweetButton utilizando:
<a class='twitter-share-button' href='http://twitter.com/share?url=aquí_va_la_dirección_acortada_y_codificada'>Tweet</a>
Felizmente Bit.ly está trabajando en resolver ello, y ofrecernos la manera sencilla de integrar bit.ly con TweetButton.
Esta solución se puede implementar utilizando un script del lado del servidor (PHP, ASP, etc) e integrar ese resultado en el documento HTML generado. Sin embargo, no todos utilizan o tienen acceso a PHP u otro lenguaje del lado del servidor, por ejemplo personas que utilizan servidores de blog gratuitos tales como blogger, wordpress, tumblr, entre muchos otros. Por lo cual no sería una solución muy adecuada.
Otra solución mejor es la de utilizar un script del lado del cliente, es decir Javascript, además TweetButton requiere de Javascript para ser utilizado, por ello resulta ser ideal para implementar la solución.
Este es el script que podemos utilizar.
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<title>TweetButton and Bit.ly</title>
</head>
<body>
<div id="resulta"></div>
<script>
function addJavascript(jsname) {
var th = document.getElementsByTagName('head')[0];
var s = document.createElement('script');
s.setAttribute('type','text/javascript');
s.setAttribute('src',jsname);
th.appendChild(s);
}
(function($){
// opciones
var defaults = {
login: 'usuario_de_bitly',
apiKey: 'nuestra_API_Key...',
history: '0'
};
// La consulta jQuery a bit.ly
var daurl = "http://api.bit.ly/v3/shorten?"
+"&longUrl="+encodeURIComponent(document.location.href)
+"&login="+defaults.login
+"&apiKey="+defaults.apiKey
+"&history="+defaults.history
+"&format=json&callback=?";
// Utilizamos la API
$.getJSON(daurl, function(data){
// Ahora que lo devolvió podemos utilizarlo
$('#resulta').append("<a class='twitter-share-button' data-count='vertical' data-lang='es' data-related='vhanla:Autor en Codigobit' data-via='codigobit' href='http://twitter.com/share?url="+encodeURIComponent(data['data']['url'])+"&counturl="+encodeURIComponent(document.location.href)+"&text="+encodeURIComponent(document.title)+"'>Tweet</a>");
addJavascript('http://platform.twitter.com/widgets.js');
});
})(jQuery);
</script>
</body>
</html>
Para obtener el enlace acortado, utilizamos la API de Bit.ly mediante jQuery, para ello necesitamos de una API Key que está asociada con nuestra cuenta bit.ly, así cada enlace generado (acortado) podremos tenerlo en nuestra cuenta bit.ly. La API Key se obtiene en el mismo sitio web de bit.ly.
Hacemos la consulta a la API, es decir, creamos la dirección acortada (nueva o existente). Una vez obtenida, ya podemos agregar ese resultado dentro de <div id=”resulta”></div>, dándole el formato adecuado que reconoce TweetButton, sin olvidarnos de la clase twitter-share-button que es la que twitter reconoce para convertirlo en el botón Tweet.
Finalmente, creamos un nuevo elemento <script> que cargará el jscript TweetButton desde Twitter (http://platform.twitter.com/widgets.js), el que se encargará de generar el botón. Éste último lo hacemos de esa manera (cargamos dinámicamente) para que widgets.js recién se ejecute después de haber formado el enlace dentro de resulta, ya que si no lo hacemos así, es decir si incluimos widgets.js ya sea después o antes de nuestra llamada a la API de bit.ly utilizando <javascript src=’... , no asegura que el botón Twittear sea generado.
Conclusión:
Sí es posible seguir utilizando el acortador de nuestros gustos con TweetButton y funciona en casi todos los navegadores.
El posible inconveniente de este alcance es la demora que tiene bit.ly en ciertas ocasiones, resultando en que el botón Twittear no aparezca hasta que bit.ly responda.
Además de ello, se expone la API Key bit.ly ante cualquiera que vea nuestro código javascript, y lo utilice para generar SPAM. Para ello se sugiere resetear(cambiar) periódicamente dicha API Key y esconderlo por ejemplo con JavaScriptObfuscator. Sin embargo todo ello es reversible.
![webkit-mathml[3]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkFJ3NMVeef64ZdiW_4DRRZZ1t_fwIB51_-AwsNQROb-VZHFtzYk_JTd4AHsuLvcnAU9H4E3ePIbKdFelxYsTEeIA6OmiN_1J_4hwvv0aB8CB4M5c4kY4VvCZVr3rseA8_uR9Qng8Njqpj/?imgmax=800 "webkit-mathml[3]")
![twitpiclabs[3]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPXODesPcOZlZIKzGYqZ4xT1gODllHvwOiZiog-6R8_1-lt8EVYpQeqrIVxk0ptWa-e9hJTimw1hBMt-whavUjlXS7oI5Vb3EQEYaztMfzDU66nueohUuXycucRX3SnVWD3HmJrgyqbN3b/?imgmax=800 "twitpiclabs[3]")
Entradas
