Mostrar URL’s cortas en Blogger

Twitter ha obligado a aprovechar cada uno de nuestros caracteres para comunicar ideas en pocas palabras y con ello al uso de URL’s cortas que nos den más rango de expresión. Si consideramos que Twitter cada vez se vuelve una fuente de tráfico más y más atractiva vale la pena facilitar la tarea de nuestros lectores para compartir nuestro contenido brindando URL’s cortas.

Para WordPress ya habiamos explicado como generar URL’s cortas de forma nativa, y ahora, usando la API de bit.ly, el servicio por defecto de Twitter, se pueden crear y mostrar URL’s cortas en cada entrada de Blogger.

Paso a paso

1. Para mostrar la URL corta al pie de la entrada, con los artilugios expandidos, busca:

<div class='post-footer-line post-footer-line-3'>

</div>

También pueden ser post-footer-line-1 o post-footer-line-2, solo cuida que las etiquetas abran y cierren correctamente.

2. Dentro de cualquiera de las 3 lineas del footer agrega el siguiente código:

<b:if cond='data:blog.pageType == "item"'><form id='shorturl'/></b:if>

3. Justo antes de la etiqueta de cierre:

</head>

Pega el siguiente script:

<script type="text/javascript" charset="utf-8" src="http://bit.ly/javascript-api.js?version=latest&amp;login=blogandweburl&amp;apiKey=R_42c5e2a7ff92fd21c23d3b75f2d85f7c"></script>
<script type="text/javascript" charset="utf-8">
	BitlyClient.addPageLoadEvent(function(){
		BitlyCB.myShortenCallback = function(data) {
			// this is how to get a result of shortening a single url
			var result;
			for (var r in data.results) {
				result = data.results[r];
				result['longUrl'] = r;
				break;
			}
			document.getElementById("shorturl").innerHTML = "Dirección para compartir: &lt;input type='text' value='" + result['shortUrl'] + "' name='bitlyurl'/&gt;";
		}
		BitlyClient.shorten(document.location, 'BitlyCB.myShortenCallback');
	});
</script>

4. Opcionálmente se pueden dar estilos para adaptar este nuevo elemento al diseño del blog. Por ejemplo:

form#shorturl {
color:#666;
font-size:11px
}

#shorturl input {
color:#999;
border:1px inset #CDCDCD;
padding:1px 5px;
}

Recordemos que los estilos siempre van antes de la etiqueta de cierre:

</b:skin>

5. El resultado, con los estilos de ejemplo en cada página individual de las entradas, es:

Brindar la URL corta en lugar del link directo para hacer un Tweet tiene la ventaja de que pueden usarlo en otras redes sociales donde una URL larga no es muy estética, no solo Twitter.