JMiur [E]

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:


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

41 comentarios:

José GDF  

He observado que actualizando la página sigue obteniéndose la misma URL corta. Aunque se supone que estás haciendo una petición nueva cada vez que alguien abre la página. Curioso.

Otra cosa. La expresión:

<b:if cond='data:blog.pageType == "item"'>

  <span id='urlCORTA'/>

  <script expr:src='"http://ggl-shortener.appspot.com/?url=" + data:blog.url + "&jsonp=googl_callback"' type='text/javascript'/>

</b:if>

Por sí misma crea el enlace corto. El script de más arriba, ¿es de control para mostrar o no en caso de error?

¿Y cómo se controla que se abra en otra ventana y el no follow? Es que no lo veo entre el código. ¿Se genera automáticamente desde el acortador de Google?

Responder
Jabba  

Ya es oficial: ha llegado la Navidad (JMiur se ha enfundado el gorro de Santa Clausmiur) :D

Responder
Jabba  

Y por cierto... ya aprovecho para felicitar :) . Qué pase usted unas muy, muy, pero que muy felices fiestas maestro (y no se pase con el turrón). Un abrazo!

Responder
JMiur  

José:
Claro, al recargarse la página se obtiene el mismo resultado siempre. Cada URL es única, no es algo temporal, es una codificación específica para cada dirección. Si variase no tendría utilidad porque nos llevaría a cualquier parte.

Esa parte del SPAN es la que ejecuta el llamado. Por si sola no puede hacer nada, por eso termina con googl_callback que es la función que interpreta el dato enviado y lo escribe como etiqueta HTML.

Ahí le agregué un modelo con un código completo de un enlace con target y nofollow para que veas la forma de construirlo.

Jabba: Si, es oficial, aquí hace calor pero bueno, todo sea por mantener las tradiciones

Gracias por los buenos deseos, Jabba. Intentaremos ser prudentes pero ... no prometo nada. Que pases una excelente Navidad, amigo.

*<<<<+

Responder
Víctor  

Increible Jmiur, muchas gracias, ya lo tengo funcionando...

Responder
JMiur  

Me alegro que funcionara, Victor :)

Responder
Manuel de la Fuente  

Trato de agregarlo al marcador social que envía los posts a Twitter, pero lo mejor que consigo es algo como esto:

<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 = "<a href=http://twitter.com/home?status=" + respuesta + " title='Enviar a Twitter' rel='nofollow'>" + "<img alt='Enviar a Twitter' class='socialmarks' src='http://3.bp.blogspot.com/_Isw1shYt1Ew/Sy2r3YpBInI/AAAAAAAACbo/UpJNlfvwE64/s320/twitter.png'/>" + "</a>";
document.getElementById("urlCORTA").innerHTML = salida;
}
}
//]]>
</script>

Me gustaría que, además de la dirección acortada, añadiera el título del post; algo así:

<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 = "<a expr:href=http://twitter.com/home?status=" + data:post.title + respuesta + " title='Enviar a Twitter' rel='nofollow'>" + "<img alt='Enviar a Twitter' class='socialmarks' src='http://3.bp.blogspot.com/_Isw1shYt1Ew/Sy2r3YpBInI/AAAAAAAACbo/UpJNlfvwE64/s320/twitter.png'/>" + "</a>";
document.getElementById("urlCORTA").innerHTML = salida;
}
}
//]]>
</script>

Sin embargo, ni ese código ni ninguna de las variantes que he probado funciona. ¿Tienes alguna sugerencia?

Además, he notado que si se le quita el condicional para que aparezca sólo en los posts individuales, al aparecer en la página principal sólo el primer post sirve. ¿No hay alguna forma de hacer que funcione en todos?

Responder
JMiur  

A la primera aprte sólo puedo responder genéricamente.

El HREF es algo así:
http://twitter.com/home?xxxxxxxxxxxxxxxxxxxx
donde xxxxxxxxxxxxxxxxxxxx es el texto a enviar así que si ese texto es el título y la URL, sintaxis es incorrecta porque faltan las comillas; algo así:

salida = "<a expr:href='http://twitter.com/home?status=" + TITULO + URLrespuesta + "' title='Enviar a Twitter' ...................

Claro que también deberías enviarle a la función el título del post para que lo agregue cosa que ahora no tiene. Es decir, hay que crear otra función diferente.

El B:IF está puesto justamente por ese motivo, si se quisiera que se crearan para varias entradas de la misma página, habría que llamar a esa función varias veces, una por cada entrada y hacer que conviertira cada URL, identificándolas de alguna manera.

Responder
Graciela  

Bien estoy realizando esto, pero siempre tengo un pero grrr
el 'b:if cond='data:blog.pageType xxxx'
iría dentro de
'div id='header-wrapper'...'

Gracias Jmiur por tu paciencia :D

Responder
JMiur  

Podria ir allí, así lo puse yo; en realidad, lo colcoas donde quieras que se muestre ese enlace, si quieres que esté arriba, va ahi. Luego, seguramente, habrá que posicionarlo o darle algún formato con CSS.

Responder
Graciela  

Okey amigo, me pongo en ello si surge algún problema te pego un grito.
Actualizo el IE! gracias :)

Responder
JMiur  

Adelante, nomás. No deberías tener problemas.

Responder
Graciela  

:( urlCORTA { /* el bloque donde se mostrará */ }
urlCORTA a { /* el enlace en si mismo */ }
urlCORTA a:hover { /* efecto hover sobre el enlace */ }

No entiendo ésto, claro que todo lo demás estaba al alcance de mis neuronas

Es en cachorra que lo he tratado de hacer, me ayudas?

Responder
JMiur  

OK. agrega esto en el CSS, antes de </b:skin>

urlCORTA { }
urlCORTA a { }
urlCORTA a:hover { }

Luego, ahi, entre las llaves colocas las propiedades si es que hay alguna que quieras agregar; por ejemplo, imagina que el color de esa URL será roja:

urlCORTA a {color:#FF0000;}

Responder
Graciela  

Lo hice pero no veo nada, agregué ante un puntito . , coloqué # tampoco :o :)

Responder
JMiur  

Ahi, en la reespuesta faltó ,el # :$
#urlCORTA { }
#urlCORTA a { }
#urlCORTA a:hover { }

Lo que no veo es nada de eso en tu blog, ni siquiera el script ¿dónde está?

Responder
Graciela  

Está en la La CA CHORRA!
Mi error fue solo probar con un #, ahora voy a ver que tal, gracias :)

Responder
Graciela  

Bien no funcionó :( algo debo haber echo mal.
Me fijé está el scrip, la parte para condicionarla, y luego el CSS.

Responder
JMiur  

Ahí la veo, Graciela, Arriba del Header. Esta es la captura. Tal vez, convedría ponerlo debajo del títul odel post, o allí por donde aparece el nombre del autor de la entrada.

Responder
Graciela  

Juro que volví, pero no se aprecia en mi pantalla, ahora intentaré colocarlo dentro el encabezado, tendré que pensar!
El calor aquí nos está matando, ojalá la lluvia llegue y que quede una playa como la de la foto del enlace!

No es para reírse escucho en este momento por la radio: gomones con gente, sogas, o sea no limpiaron los desagües en la ciudad de Bs As.

Chauuuu

Responder
JMiur  

Glu glu glu glu, no, no es para reirse glu glu glu. Movelo de lugar y revisamos otra vez. El código está bien.

Responder
Graciela  

Espero que vivas en un lugar bien alto, es una vergüenza, que lluevan 70 milímetros sucedió siempre, los insoportables de los noticieros por tele parece que jamás hubieran visto llover!

Algo debe suceder con los desagües, o la mala estructura como sucede por algunos lugares de nuestra Córdoba que ayer quedaron inundados, simplemente porque el agua no puede escurrirse por ningún lugar, encima seguimos con los cortes de nuestra E.P.E.C.! somos muy tranqui los cordobeses, en BS AS ya les hubieran roto todo a estos atorrantes!
Ayer se hicieron saber los sueldos que cobran, es imposible no estar enojados porque se lo pagamos con nuestros impuestos...dejo aquí que ya me estoy subiendo a la moto.

Trataré en estos días, tengo a los primores en casa, no sé como secar la ropa :( veremos si el tiempo me ayuda :)

Responder
JMiur  

No te quepa la menor duda que es así, Ahora ya he vuelto a estar conectado pero sigue lloviendo así que ... ya me compré un traje de buzo por las dudas :D

Responder
Graciela  

Recién hoy he podido sacar la ropa a que se seque o sea se fueron con los jeans húmedos, fue imposible, me olvidé de un detalle tratar de secarlos en el horno de la cocina :(

He estado tocando y moviendo, qué debo cambiar de lugar para que funcione, el scrip?

Muchas gracias por estar siempre ahí, el traje de buzo jajaja creo que tienes que cambiar la foto del perfil!

Responder
JMiur  

Lo único que debes cambiar de lugar el el HTML:

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

Se puede poner debajo del título e los posts, por ejemplo, o en el footer ¿Ubicas el lugar en la plantilla?

Responder
Graciela  

Dije lo tengo que lograr sola :S
Intenté no lo logro, no ubico el lugar de la plantilla grrr

Responder
JMiur  

En ese blog, busca algo así:
<span class='elAutor'>
Por esa zona está el título y creo ver que hay una etiqueta SPAN vacía justo debajo de eso.

Responder
Graciela  

La retiré a spam, sabes para qué quería la URL corta para el pajarito, también lo he retirado, las redes sociales no son para mi, no las entiendo, no entiendo las normas, así como jamás se me ha ocurrido decir 'visita mi blog' tampoco entiendo por qué algunos usuarios hacen RT o no sé como se llame, son cosas de adulta que no sabe moverse por esos lados.

Igualmente sigo a los blogs que quiero por la página, correo :D

Lo dejamos ahí, muchas gracias por contestarme! creo que ahora no es necesitario acortar nada, es solo un simple blog que se nutre de otras cosas...Tanti Graci! por aguantarme! :D

Responder
JMiur  

De todas formas, Graciela, si es para usar en Twitter, eso es algo que hace el mismo Twitterasi que en ese sentido, no habrá dificultades.

Responder
Graciela  

Muchas gracias por tu información, que tengas un buen viernes :)

Responder
Manuel de la Fuente  

Sobre lo que dices de identificar las entradas de alguna forma, ¿no se puede usar para ello esto: expr:id='data:post.id'?

El comentario al que me refiero es el 7. :D

Responder
JMiur  

No sabría responderte.Deberías probar y ver.

Responder
BEYOND  

Hola, quiero utilizar esta función, pero en el botón de compartir.
por ejemplo, para esta página en tu botón de compartir en twitter del post se añade el link original (http://vagabundia.blogspot.com/2009/12/agregando-url-cortas-en-blogger.html), yo quiero que se añada el generado por goo.gl
Ya sabes que en twitter se limita a 140 caracteres y a veces hay títulos de post muy largos que general urls muy largas.
¿Cómo lo hago?

Responder
JMiur  

No sé, supongo que se podría pero desconozco un modo de hacerlo.

Responder
ozvaldO  

JMiur, ¿donde le podemos colocar el input al código para meter la dirección corta en un cuadro y se pueda seleccionar fácilmente?

Saludos

Responder
JMiur  

En cualquier parte, debajo del título o en el footer de cada entrada. No hay un lugar específico. Tampoco hace falta que sea una etiqueta input. Puede usarse cualquier otra etiqueta porque los textos también son seleccionables; casi es más simple que sea un texto con un enlace.

Responder
ozvaldO  

Muy bien, la idea del input es para que con un doble click se seleccione la url corta, independientemente de donde esté colocada dicha url.

No sé, me parece más cómodo. Ya lo tengo funcionando como tal, gracias a éste post, solo tenía la curiosidad de como o donde ponerle una etiqueta input al código para que la url corta aparezca dentro de un recuadro blanco, ya que lo he intentado y no me ha sido posible.Algo así.

Responder
JMiur  

Tendrías que cambiar la salida del script, algo como:


salida = "shortURL: <input type='text' value='" + respuesta + "' />";

Responder
ozvaldO  

Ya ha quedado, solo falta acomodar todo, te agradezco JMiur. Saludos.

Responder
Asesino Cereal  

Y cómo puedo hacer para meterlo en la URL para compartir de Twitter? es decir, quiero meterlo en a expr:href='"http://twitter.com/home?status=" + data:post.title + Aquí el enlace corto'>Enviar a Twitter</a (Le quité el inicio y el final para que no salga como enlace). Espero haberme explicado.

Responder
JMiur  

Tendrías que crear la URL corta como indica el post, guardarla en una variable y luego ver si hay alguna forma de escribir el enlace o cambair el enlace de Twitter. Me parece un poco engorroso para hacer.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR