Varias formas de integrar Goo.gl a Blogger

Si bien los servicios que ofrecían la opción de acortar una url ya existían hace algunos años se hicieron populares gracias a Twitter.com, la red social mas popular del momento.

Ahora que estos servicios están ganando popularidad están surgiendo cada vez mas servicios que ofrecen diferentes resultados:

TinyUrl.com
Bit.ly
TweetBurner.com
aUrl.es
Y el nuevo Goo.gl

Después de enterarnos del nuevo acortador de URL's de Google para la Google Toolbar y para FeedBurner rápidamente se expandieron a extensiones de Chrome y Firefox después a la página de Alexander Gaias y ggl-shortener.

Este ultimo es el que nos interesa, pues ofrece una API interesante para poder usar Goo.gl en cualquier sitio web de manera sencilla utilizando JSON. Y la forma de implementarlo:

[1] Necesitas entrar en el panel Diseño>Edicion HTML>Sin expandir plantillas de artilugios.

+/- Puedes hacerlo con un gadget:

[2]Por ultimo necesitas agregar en seguida de cualquier etiqueta del tipo:

<b:widget id='XXXXXX' locked='XXXXX' title='XXXXXXXX' type='XXXX'/>

El siguiente widget o gadget:

<b:widget id='HTML210' locked='false' title='Goo.gl en Blogger' type='HTML'>
<b:includable id='main'>
<script type='text/javascript'>//<![CDATA[
santyUrlShortGoogl=function(res){res=(res.error_message)?res.error_message:res.short_url;
document.write('Llevame a Twitter: <a rel="nofollow" title="Llevame a Twitter!" href="'+res+'">'+res+'</a>'); };//]]></script>
<script expr:src='&quot;http://ggl-shortener.appspot.com/?url=&quot; + data:blog.url + &quot;&amp;jsonp=santyUrlShortGoogl&quot;' type='text/javascript'></script>
</b:includable>
</b:widget>

Pero si lo quieres en las páginas de las entradas agrega esto otro:

<b:widget id='HTML210' locked='false' title='Goo.gl en Blogger' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>
<script type='text/javascript'>//<![CDATA[
santyUrlShortGoogl=function(res){res=(res.error_message)?res.error_message:res.short_url;
document.write('Llevame a Twitter: <a rel="nofollow" title="Llevame a Twitter!" href="'+res+'">'+res+'</a>'); };//]]></script>
<script expr:src='&quot;http://ggl-shortener.appspot.com/?url=&quot; + data:blog.url + &quot;&amp;jsonp=santyUrlShortGoogl&quot;' type='text/javascript'></script>
</b:if>
</b:includable>
</b:widget>

Ejemplo:

Llevame a Twitter: http://goo.gl/sfPf

Puedes cambiar el texto color azul por lo que quieras.

+/- O puedes hacerlo de la segunda manera:

[2]Colocando los siguientes códigos antes de </head>:

<script type='text/javascript'>//<![CDATA[
santyUrlShortGoogl=function(res){res=(res.error_message)?res.error_message:res.short_url;
document.getElementById("googlURL").innerHTML='<a rel="nofollow" title="Llevame a Twitter!" href="'+res+'">'+res+'</a>'; };//]]></script>

[3] Y donde quieras mostrar la URL coloca esto otro:

Necesitas una URL corta? usa esta: <span id="googlURL"></span>
<script expr:src='&quot;http://ggl-shortener.appspot.com/?url=&quot; + data:blog.url + &quot;&amp;jsonp=santyUrlShortGoogl&quot;' type='text/javascript'></script>

Si lo quieres solo en las páginas de las entradas agrega esto:

<b:if cond='data:blog.pageType == "item"'>Necesitas una URL corta? usa esta: <span id="googlURL"></span>
<script expr:src='&quot;http://ggl-shortener.appspot.com/?url=&quot; + data:blog.url + &quot;&amp;jsonp=santyUrlShortGoogl&quot;' type='text/javascript'></script></b:if>

Puedes cambiar el texto color azul por lo que quieras.

/!\ En esta entrada se asume que tienes conocimientos de como editar la plantilla. Si no sabes como o donde se modifica, revisa esta entrada: Donde editar el código HTML de nuestra plantilla.