Tutorial de Google AJAX Search

Google AJAX Search es una API entregada por Google para implementar un buscador utilizando la tecnología AJAX. Este interfaz puede buscar sobre la web, imagenes, blogs y videos. Tambien se le puede restringir a que busque sobre un determinado dominio.

Veamos un ejemplo de como sería el buscador en el siguiente [TBOX] enlace, http://www.google.com/uds/samples/apidocs/helloworld.html, Google AJAX Search, 310, 450[/TBOX].

Entonces lo primero que tenemos que hacer es generar un Google API key, que nos servirá para hacer uso de este servicio. Para ello solo debemos ingresar el URL de la web donde vamos a colocar el buscador. Luego de ello se nos dará nuestro código y la confirmación de para que dominio funcionará.

googleajax1.gif

Empecemos entonces, creamos un html vacio en ingresamos en el tag HEAD un enlace a la hoja de estilos y otro enlace al javascript que hara la busqueda.

  1. <link href="http://www.google.com/uds/css/gsearch.css" type="text/css" rel="stylesheet"/>
  2. <script src="http://www.google.com/uds/api?file=uds.js&amp;v=0.1&amp;key=mykey" type="text/javascript"></script>

En donde se tiene que mykey es tu codigo de Google Ajax Search que has generado. Luego tenemos que crear código javascript para instanciar al buscador. Esto se realiza con la clase GSearchControl. A continuación se debe definir que tipos de busqueda se va a realizar. Existen cuatro posibilidades:

  • GwebSearch(): para buscar en la web.
  • GvideoSearch(): para buscar videos en google.
  • GblogSearch(): busqueda en blogs.
  • GlocalSearch(): para realizar la busqueda en Google Local.

Para nuestro ejemplo haremos la busqueda sobre la web, videos y blogs, esto lo implementaremos sobre una funcion que llamaremos al cargar la página, entonces tendremos el siguiente código javascript.

  1. <script language="Javascript" type="text/javascript">
  2.   function OnLoad() {
  3.     var searchControl = new GSearchControl();
  4.     searchControl.addSearcher(new GwebSearch());
  5.     searchControl.addSearcher(new GvideoSearch());
  6.     searchControl.addSearcher(new GblogSearch());
  7.   }

Lo que sigue es crear un campo DIV en el html donde se va a cargar el buscador, este div se debe crear en el BODY de tu html. Entonces se debe definir en el javascript que vamos a cargar el buscador sobre searchdiv. Y finalmente debemos ejecutar el buscador, esto se hace con el comando execute al cual se le pasa como parametro que palabra se va a buscar por defecto.

  1. searchControl.draw(document.getElementById("searchdiv"));
  2. searchControl.execute("Google");

Finalmente el código quedaría de la siguiente forma:

  1. <title>Google AJAX Search</title>
  2. <link href="http://www.google.com/uds/css/gsearch.css" type="text/css" rel="stylesheet"/>
  3. <script src="http://www.google.com/uds/api?file=uds.js&amp;v=0.1&amp;key=mykey" type="text/javascript"></script>
  4.  
  5. <script language="Javascript" type="text/javascript">
  6.   function OnLoad() {
  7.     var searchControl = new GSearchControl();
  8.     searchControl.addSearcher(new GwebSearch());
  9.     searchControl.addSearcher(new GvideoSearch());
  10.     searchControl.addSearcher(new GblogSearch());
  11.  
  12.     searchControl.draw(document.getElementById("searchdiv"));
  13.     searchControl.execute("Google");
  14.   }
  15. </head>
  16. <body onload="OnLoad()">
  17.     <div id="searchdiv"/>
  18. </body>
  19. </html>

Es muy simple, facil y rapido de implementar. Debo comentarles que hay mas opciones como por ejemplo restringir la busqueda a un deteminado dominio. Estos y demas opciones puedes encontrarle muy bien documentada en Google AJAX Search API Documentation.

Para los interesados en publicidad con este buscador, se planea que en la versión 1.0 se integrará publicidad de adsense. Por ahora estamos en la versión 0.1 asi que tenemos mucho camino por delante.

Comentarios Total 8 comentarios


Manuel
Publicado: 17/04/2007 3:24 pm

Hola.

Estoy intentando crear una función java scrip que me devuelva el número de resultados que da google al introducir un cierto query.

Es decir, al yo llamar a la función dándole a ésta una “cadena”, que la función me devuelva un entero con el número de resultados.

Algo similar a lo que deben utilizar para hacer la web de http://www.googlefight.com/

Muchas gracias y estupendo blog.

Manuel

Ralph Moran
Publicado: 30/05/2008 1:34 pm

Saludos amigo Manuel

Mira para hacer lo que pides solo necesitas crear un archivo PHP que reciba los criterios que tu pides, este PHP sera solicitado por una funcion de JS por medio de AJAX y lo ultimo seria mostrar el resultado del PHP en un DIV con la funcion JS que creaste.

Es mas sencillo de lo que se “lee”, creeme.

Si necesitas algun ejemplo ponte en contacto y ponemos el ejemplo aqui para que todos lo vean.

Suerte

erick
Publicado: 09/06/2008 11:33 am

Hola Ralph Moran podrias publicar cómo obtener el número total de registros de la búsqueda.

erick
Publicado: 09/06/2008 11:35 am

porfa es es urgente !! , he estado intentando pero sin exito por el momento te agradesco de antemano

Diseño Web Peru
Publicado: 20/08/2008 12:03 pm

Exelente aporte gracias
———————————-

traza, diseño web
Publicado: 21/04/2009 10:47 pm

Para Erick: podrias decirnos que mensaje de error te sale o algo similar?

Guillermo
Publicado: 28/10/2009 12:20 am

¿Es posible integrar esto dentro de blogger? Es que inclusive trae uno pero para poner en el sidebar, quisiera poder poner el buscador donde yo quiera, tengo el espacio incluso hecho.

udelunar
Publicado: 20/01/2010 4:57 am

Buenos dias, no se si os habra pasado pero si probais a hacer una busqueda con lso ejemplos de la pag de google que viene del google AJAx search y los comparais con las bsuquedas que hace google son diferentes… esto no tiene mucha logica, os pasa a vostoros tambien?
Muchas gracias.

 

Comentar

En este blog los comentarios están moderados, serán mostrados cuando el administrador los apruebe. Por favor, evita comentarios ofensivos u obscenos por que no serán aprobados.
Si deseas publicar código fuente debes hacerlo entre las etiquedas <code> y </code>, además debes reemplazar los carácteres < por &lt; y > por &gt;.

(Requerido)

(Requerido, no será publicado)

(Requerido)

(Tags aceptados: <a> <em> <strong> <code> <ul> <li>)