Hacker of the Web
Tus ideas en código!...y mas

Varias formas de integrar Goo.gl a Blogger

Goo.gl y 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.

#

Deja tu huella y comenta!

Hola!, por favor deja tus comentarios, te aseguro serán contestados, dudas, sugerencias, lo que sea!!!!!!!!!!.

Si el formulario no funciona, o quieres irte a la segura: agrega tu comentario de forma tradicional

Si necesitas ayuda mas personalizada deja un <a href='URL'>ENLACE</a> hacia tu blog.

Emoticons
Comenta con tu:
Comenta:

Sé el primero y comenta !


Página Principal
Arriba