Agregando URL cortas en Blogger

Las URLs cortas se pusieron de moda con Twitter pero existen desde mucho antes que las descubriéramos o que tuviérmos que utilizarlas para que 140 caracteres no fueran demasiado escasos.

¿Qué son estas cosas? Pués, imaginen que una dirección como esta:

http://vagabundia.blogspot.com/2009/12/googl-enviar-los-posts-twitter-usando.html

tiene más de 80 caracteres y eso, dependiendo del servicio que usemos, pude ser reducido.

Por ejemplo, utilizando gaigalas la convertimos en esto: http://goo.gl/1ntC
con bit.ly en esto http://bit.ly/5frSqH
y con tinyurl http://tinyurl.com/yd7blja

Las tres, son la misma dirección codificada de manera diferente así que todas ellas, abren la misma página:

http://goo.gl/1ntC | http://bit.ly/5frSqH | http://tinyurl.com/yd7blja

¿Sirve esto?

Es importante decir que no todos los servicios sirven y no porque la página se abra mal sino por la forma en que nos redirigen; es decir, todos esos servicios, lo que hacen es decodificar esa URL y enviarnos al sitio original pero, para que los buscadores "entiendan" esa dirección e indexen la página real y no la codificada, esos servicios deben hacerlo utilizando algo llamado redirección 301 y, aparentemente, no todos lo hacen (más información).

Es por eso que algunos afirman que el acortar URLs "debilita" la efectividad de los hipervinculos y hay muchas críticas a su uso pero, pese a todo, siguen existiendo y desde el lanzamiento de goo.gl, el servicio de acortameinto de URLs de Google), la cosa se ha vuelto, quizás, un poco más accesible ya que, imagino que ellos harán las cosas bien y las redirecciones serán correctas.

Al principio, este servicio sólo estaba disponible para usar en Chorme o con la Google Toolbar pero, en pocos días, ya han aparecido sitios como el de Alexandre Gaigalas, un bookmarklet y hasta una extensión para Firefox como goo.gl lite.

Con el tiempo, es evidente que esto se extenderá; los códigos están a la vista así que es fácil manipularlos. Tan fácil que podríamos agregar la opción al mismo Blogger, sólo con un par de líneas y de este modo, crear una URL corta para cada entrada de nuestro sitio.

Para eso, necesitamos agregar la función correspondiente antes de </head>:

<script type='text/javascript'>
//<![CDATA[
window.googl_callback=function(response) {
  if(response.error_message) {
    document.getElementById("urlCORTA").innerHTML = ""; // es un error asi que no mostramos nada
  } else {
    respuesta = response.short_url;
    salida = "shortURL: <a rel='nofollow' href='" + respuesta + "' target='_blank'>" + respuesta + "</a>";
   document.getElementById("urlCORTA").innerHTML = salida;
  }
}
//]]>
</script>

La función le solicitará a goo.gle que cree una URL corta para la página actual y esta, se mostrará en una etiqueta con un cierto formato y cuyo ID será urlCORTA; en este caso, será un texto:

shortURL: xxxxxxxxxxxx

que a la vez, será un enlace a abrir en otra ventana (target='_blank') y no indexable (rel='nofollow') para no repetirlo.

Faltaría entonces, agregar esa etiqueta y allí hay muchas variantes; puede estar debajo de los títulos de cada post (como en el ejemplo de este blog); debajo de ellos, en el footer, etc.

Sea como sea, podemos agregarla de este modo, condicionándola para que sólo se muestre en las páginas individuales:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <span id='urlCORTA'/>
  <script expr:src='&quot;http://ggl-shortener.appspot.com/?url=&quot; + data:blog.url + &quot;&amp;jsonp=googl_callback&quot;' type='text/javascript'/>
</b:if>

Y eso es todo. Llegado el caso, si queremos darle alguna clase de estilo, lo agregamos tambien antes de </head>:

<style type='text/css'>
  #urlCORTA {  /* el bloque donde se mostrará */ }
  #urlCORTA a { /* el enlace en si mismo */ }
  #urlCORTA a:hover { /* efecto hover sobre el enlace */ }
</style>