Blogger Twitter

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:

urls-cortas-blogger

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.

Deja un comentario

20 Comentarios

  • @Claudia, el otro día jugando con la API de bit.ly vi el ejemplo que linkeo en el post y vi que con unos cambios se adecuaba perfecto en Blogger.

    Se le puede mover más, como autoseleccionar y autocopiar la URL con un clic, tal como en tu post para WordPress.

    Un saludo!

  • Buenos días¡¡

    Fantastico recurso para blogger ¡¡ 😀 Sobre todo para los que utilizamos Twitter claro¡¡

    Queria hacerte una pregunta, no estoy muy puesto en el tema obviamente, donde tengo que colocar los ultimos trozos de estilo para poder retocarlo y adecualor a mi blog?

    Muchas Gracias ¡

  • Huy espectacular, esto lo venia buscando hace mucho ya que en mi blog Codigo Basura tengo el trackbak en cada post con la direccion del post, y solo habia en php para wordpress achicar la url. Asi que esto me viene de anillo al dedo.
    Gracias por compartirlo ^^

  • […] En 5 pasos la gente de BlogandWeb nos enseña como insertar el script para obtener URLs cortas. Seguí el tutorial! […]

  • gracias…

    pero no se usar el bit.ly entre a la pagina que me mandaste y nomas no le entendi jejejeje

    Tal vez mas adelante lo pueda agregar que aprenda mas de esto

  • muchas gracias pero como hago ke los enlces ke se generen esten en mi cuenta??
    porfa kiero ver las estadisticas y demas cosas =)

  • Hola francisco
    tengo algunas dudas sobre tu entrada de url cortas en blogger:
    1)Me di cuenta que en los datos del html tienes puesto los datos de tu cuenta de byt.ly y me preguntaba que si puedo poner los de mi cuenta y que ventajas me daria.
    2)veo que tu tienes en tu url blogandweb.com/**** y me preguntaba como lo hiciste y como no aparece la url de byt.ly.
    3)que es mejor tener ese script o tener un boton de twetme.
    saludos

  • @Raymond: Respondiendo tus preguntas:

    1. Tendrías acceso a estadísticas de esos enlaces en bit.ly
    2. Con WordPress es posible, con Blogger por si solo, no.
    3. Va en gusto. Yo tengo tanto la url como el botón de retweet, así el lector escoge.

  • @francisco
    a raymond le respondiste rapido… oye como puedo poner los datos de mi cuenta al script de bit.ly
    para ver las estadisticas…..

  • @hugoG: Sorry, se me pasó tu pregunta, debes poner tu número de API, están en las opciones de tu cuenta. En el parámetro “login” y “key” del script del paso 3, pones tus datos.

  • me cancelaron mi cuenta en blogger por spam por poner ese codigo tu saves loque estas haciend0!

    cerrando blog por gusto hijo de perra