Como integrar Goo.gl en tu web en 5 minutos
Categorías: Tutoriales - Tags: ajax, googleDesde que salió el nuevo acortador de urls de Google intenté encontrar la manera de integrarlo en una página web. A través de un post donde explicaban como sacaron el código fuente de un addon para Google Chrome logré encontrar una clase de PHP que te permite integrar Goo.gl en tu web fácilmente y que comparto con ustedes a continuación.
La clase de PHP es muy sencilla, básicamente hace un POST mediante CURL a la API de Goo.gl y devuelve el resultado. El groso de las funcionen es para sacar el Auth Token y utiliza el usuario [email protected] de las extensiones de Chrome para conectarse.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 | /* API Google URL Shortner - goo.gl Marcus Nunes - marcusnunes.com - 09/18/2010 */ class goo_gl{ var $url, $resul; //goo.gl construct method function goo_gl($url){ $this->url = $url; $curl = curl_init(); curl_setopt($curl, CURLOPT_URL, 'http://goo.gl/api/url'); curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1); curl_setopt($curl, CURLOPT_POST, 1); curl_setopt($curl, CURLOPT_POSTFIELDS, 'user=[email protected]&url='.urlencode($this->url).'&auth_token='.$this->googlToken($url)); $saida = curl_exec($curl); curl_close($curl); if($saida){ $json = json_decode($saida); $this->resul = $json->short_url; } } //show url shorted by goo.gl function result(){ return $this->resul; } //token code function googlToken($b){ $i = $this->tke($b); $i = $i >> 2 & 1073741823; $i = $i >> 4 & 67108800 | $i & 63; $i = $i >> 4 & 4193280 | $i & 1023; $i = $i >> 4 & 245760 | $i & 16383; $j = "7"; $h = $this->tkf($b); $k = ($i >> 2 & 15) << 4 | $h & 15; $k |= ($i >> 6 & 15) << 12 | ($h >> 8 & 15) << 8; $k |= ($i >> 10 & 15) << 20 | ($h >> 16 & 15) << 16; $k |= ($i >> 14 & 15) << 28 | ($h >> 24 & 15) << 24; $j .= $this->tkd($k); return $j; } function tkc(){ $l = 0; foreach(func_get_args() as $val){ $val &= 4294967295; $val += $val > 2147483647 ? -4294967296 : ($val < -2147483647 ? 4294967296 : 0); $l += $val; $l += $l > 2147483647 ? -4294967296 : ($l < -2147483647 ? 4294967296 : 0); } return $l; } function tkd($l){ $l = $l > 0 ? $l : $l + 4294967296; $m = "$l"; //deve ser uma string $o = 0; $n = false; for($p = strlen($m) - 1; $p >= 0; --$p){ $q = $m[$p]; if($n){ $q *= 2; $o += floor($q / 10) + $q % 10; } else { $o += $q; } $n = !$n; } $m = $o % 10; $o = 0; if($m != 0){ $o = 10 - $m; if(strlen($l) % 2 == 1){ if ($o % 2 == 1){ $o += 9; } $o /= 2; } } return "$o$l"; } function tke($l){ $m = 5381; for($o = 0; $o < strlen($l); $o++){ $m = $this->tkc($m << 5, $m, ord($l[$o])); } return $m; } function tkf($l){ $m = 0; for($o = 0; $o < strlen($l); $o++){ $m = $this->tkc(ord($l[$o]), $m << 6, $m << 16, -$m); } return $m; } } |
Para nosotros integrarlo en nuestra web podemos hacer lo siguiente:
Primero en index.php creamos lo siguiente:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Goo.gl integrado en tu web</title> <script type="text/javascript" src="../jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('#url').focus(); }); function googl_it(){ $('#loading').fadeIn(); var url = $('#url').val(); $.post("goo.gl_api.php", {url:url}, function(data){ $('#loading').fadeOut(); $('#resultado').slideDown('fast'); $('#resultado').html(data); }); } </script> </head> <body> <div style="width:730px;margin:0 auto;"> <form onsubmit="googl_it(); return false;"> <input type="text" size="40" style="font-size: 30px;" id="url" name="url"> <input type="button" onclick="googl_it();" style="font-size: 30px;" value="goo.gl it"> </form> <div style="width: 566px;text-align:center;display:none;" id="loading" ><img src="loader.gif" alt="loading" /></div> <div style="clear: both; width: 566px; background-color: #FFC;border:1px solid #CCC; padding: 10px; font-size: 30px; margin-top: 20px;text-align:center;display:none;" id="resultado"> </div> </div> </body> </html> |
Explicando los pasos
- Básicamente hemos creado un formulario para introducir la url que deseamos acortar.
- Creamos un boton que al ejecutarse llama a la función google_it() de javascript
- La función google_it realiza las siguientes tareas:
- Carga el loader.gif
- Envía mediante JQuery AJAX, a traver del método POST la url a acortar a la página goo.gl_api.php
- Oculta loader.gif y carga el resultado con un efecto JQuery
Con esto ya tendríamos la base armada, ahora hay que crear goo.gl_api.php y pegar nuestra clase PHP de la siguiente manera:
goo.gl_api.php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 | <? $url=$_POST['url']; $googl = new goo_gl($url); echo '<a href="'.$googl->result().'" title="'.$url.'">'.$googl->result().'</a> <span style="font-size:12px">(<a href="'.$googl->result().'.info">info</a>)</span>'; class goo_gl{ var $url, $resul; //goo.gl construct method function goo_gl($url){ $this->url = $url; $curl = curl_init(); curl_setopt($curl, CURLOPT_URL, 'http://goo.gl/api/url'); curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1); curl_setopt($curl, CURLOPT_POST, 1); curl_setopt($curl, CURLOPT_POSTFIELDS, 'user=[email protected]&url='.urlencode($this->url).'&auth_token='.$this->googlToken($url)); $saida = curl_exec($curl); curl_close($curl); if($saida){ $json = json_decode($saida); $this->resul = $json->short_url; } } //show url shorted by goo.gl function result(){ return $this->resul; } //token code function googlToken($b){ $i = $this->tke($b); $i = $i >> 2 & 1073741823; $i = $i >> 4 & 67108800 | $i & 63; $i = $i >> 4 & 4193280 | $i & 1023; $i = $i >> 4 & 245760 | $i & 16383; $j = "7"; $h = $this->tkf($b); $k = ($i >> 2 & 15) << 4 | $h & 15; $k |= ($i >> 6 & 15) << 12 | ($h >> 8 & 15) << 8; $k |= ($i >> 10 & 15) << 20 | ($h >> 16 & 15) << 16; $k |= ($i >> 14 & 15) << 28 | ($h >> 24 & 15) << 24; $j .= $this->tkd($k); return $j; } function tkc(){ $l = 0; foreach(func_get_args() as $val){ $val &= 4294967295; $val += $val > 2147483647 ? -4294967296 : ($val < -2147483647 ? 4294967296 : 0); $l += $val; $l += $l > 2147483647 ? -4294967296 : ($l < -2147483647 ? 4294967296 : 0); } return $l; } function tkd($l){ $l = $l > 0 ? $l : $l + 4294967296; $m = "$l"; //deve ser uma string $o = 0; $n = false; for($p = strlen($m) - 1; $p >= 0; --$p){ $q = $m[$p]; if($n){ $q *= 2; $o += floor($q / 10) + $q % 10; } else { $o += $q; } $n = !$n; } $m = $o % 10; $o = 0; if($m != 0){ $o = 10 - $m; if(strlen($l) % 2 == 1){ if ($o % 2 == 1){ $o += 9; } $o /= 2; } } return "$o$l"; } function tke($l){ $m = 5381; for($o = 0; $o < strlen($l); $o++){ $m = $this->tkc($m << 5, $m, ord($l[$o])); } return $m; } function tkf($l){ $m = 0; for($o = 0; $o < strlen($l); $o++){ $m = $this->tkc(ord($l[$o]), $m << 6, $m << 16, -$m); } return $m; } } ?> |
Y con eso ya podrán integrar goo.gl en sus webs y mostrar los resultados con un toque de AJAX fácil y rápidamente.
Pueden ver el ejemplo funcionando aquí.
O descargar el código desde aquí.









Pingback: Bitacoras.com