English Português

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.

Escrito por Francisco Oliveros

Soy un gran aficionado del diseño y de todo lo que el código puede comunicar. Ingeniero mecánico por profesión, pero dedicado al desarrollo web a tiempo completo.

Blog / Twitter

Artículos relacionados

Sigue leyendo consejos, tips y tutoriales para tu blog.

    Comentarios

    1. Claudia / Hace 7 años /

      Wow, qué simple! 🙂 Es algo que creí virtualmente imposible en Blogger.

      Responder a Claudia →
    2. Francisco / Hace 7 años /

      @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!

      Responder a Francisco →
    3. Miguel Angel Gallego / Hace 7 años /

      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 ¡

      Responder a Miguel Angel Gallego →
    4. HaCk CrAcK / Hace 7 años /

      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 ^^

      Responder a HaCk CrAcK →
    5. Francisco / Hace 7 años /

      @Gracias Miguel, ya agrego esa parte al post.

      Responder a Francisco →
    6. Francisco / Hace 7 años /

      @Hack y como dice Clau, por suerte es muy simple implementarlo.

      Responder a Francisco →
    7. Emmanuel / Hace 7 años /

      No me aparece las url, la plantalla me cambia la comillas ” no se por que, que puedo hacer…

      Responder a Emmanuel →
    8. platinito / Hace 7 años /

      Olas man tengo una consulta como haces para q tu url salga asi http://blogandweb.com/blogger/mostrar-urls-cortas-en-blogger/
      por ejemplo en el blog de una amia le sale por ejemplo asi
      http://blogandweb.com//2009/10/mostrar-urls-cortas-en-blogger/ (en blogger)

      Responder a platinito →
    9. Francisco / Hace 7 años /

      @platinito en Blogger no es posible cambiar la estructura de enlaces. Blog and web usa WordPress.

      Responder a Francisco →
    10. El Peaton / Hace 7 años /

      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

      Responder a El Peaton →
    11. hugoG / Hace 7 años /

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

      Responder a hugoG →
    12. fer / Hace 6 años /

      Gracias por el articulo me servira para mi blogger

      Responder a fer →
    13. Raymond / Hace 6 años /

      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

      Responder a Raymond →
    14. Francisco / Hace 6 años /

      @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.

      Responder a Francisco →
    15. hugoG / Hace 6 años /

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

      Responder a hugoG →
    16. Francisco / Hace 6 años /

      @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.

      Responder a Francisco →
    17. Eduu / Hace 5 años /

      Gracias Francisco, logré colocarlo junto con los botones sociales!! saludos! 😀

      Responder a Eduu →
    18. alfredo / Hace 5 años /

      y como puedo poner la API de bit.ly de de mi cuenta de bit gracias

      Responder a alfredo →
    19. metro / Hace 5 años /

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

      cerrando blog por gusto hijo de perra

      Responder a metro →

    Responder

    ¡Gracias por dejar tu opinión! Por favor procura que tus comentarios estén dentro tema, que no sean promocionales (spam), ilegales u ofensivos, de otro modo, serán borrados. Todos los enlaces serán moderados y la URL indicada NO será enlazada.

    Blog and Web es un blog de Blógstica. Hospedado desde 2008 en Liquid Web.

    Términos de uso - Política de privacidad