Motor de búsqueda personalizado: Usando AJAX para crear un Motor personalizado estético y práctico.

lunes, 1 de junio de 2009

Seguramente muchos Webmasters y Editores de AdSense han tenido dificultades para implementar AdSense para Búsqueda en sitios Web. Quizas sea por que hayan pegado incorrectamente el código o hayan problemas temporales. Jorge (empleado de Google) ha explicado algunos problemas conocidos y la solución a ello.
Pero si desean crear un Motor de búsqueda personalizado que sea estéticamente atractivo y práctico, les sugiero usar la API AJAX de Google y los Ejemplos descritos. Esto no es simple, pero hice todo lo posible para que sea entendible.


Este Tutorial pretende explicar funciones avanzadas del Motor de búsqueda personalizado. Su implementación es sencilla pero requiere un poco de atención.

GFDLEste Tutorial es publicado bajo la
Licencia de Documentación Libre GNU.

Los Códigos Javascript incluidos en este Tutorial son de Dominio Público. El uso de la API AJAX está establecido en los Términos de uso de la API AJAX para Búsqueda de Google (inglés).

--

¿Vieron la Barrita de búsqueda al lado? Sip, es una búsqueda personalizada, y la verdad me ha costado mucho trabajo configurarla, pulirla y mejorarla. Lo que ven y lo que buscan es producto de años de esfuerzo por mejorar la experiencia del visitante.

El Motor de Búsqueda personalizado es una excelente solución para cualquier Webmaster o Blogero que desee enriquecer su sitio con un Bloque de búsqueda. Los Editores de AdSense se beneficiarán con este Motor, ya que al tiempo de generar ingresos, entregan una experiencia más enriquecedora a los Visiatntes.

Actualmente las posibilidades son infinitas, y la API AJAX permite una alta personalización del Motor de búsqueda.

Para obtener un Motor de búsqueda personailizado, tienes que acceder a http://www.google.com/coop/cse, y crearlo desde ahi. Luego, es muy sencillo implementarlo en cualquier Web.

Hay alternativas:
Usar el nuevo Custom Search element. Con esto, es muy fácil integrarlo en cualquier página Web; simplemente copialo y pégalo en un Gadget o elemento de tu página Web.

Código de ejemplo:
<!-- Google Custom Search Element -->
<div id="cse" style="width:100%;">Cargando...</div>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
google.load('search', '1');
google.setOnLoadCallback(function(){
new google.search.CustomSearchControl
('xxxxxxxxxxxx:xxxxxx').draw('cse');
}, true);
</script>

Pero lo que muchos quieren, es Extender las prestaciones de este Motor, agregando elementos interesantes como Búsqueda de Blogs, Imágenes, etc.

Acá están las indicaciones:

Si no tienes un Motor de búsqueda, créalo como indico arriba. Para este caso puedes crear 2 Motores de búsqueda personalizado: Uno para el Sitio (búsqueda restringida a uno o varios sitios Web), y otro para Búsqueda en Toda la Web.

En el Panel de control del Motor de búsqueda, anda a la ficha Código, y Copia el ID del Motor de búsqueda.

Recuerda que los Códigos de un Motor y otro son distintos. xxxxxxxxxxxx:xxxxxx es del Motor de búsqueda en Sitio, xxxxxxxxxxxx:yyyyyy es para Buscar en la Web. La Búsqueda en Blogs no tiene esa opción.

3.- Seguir el Ejemplo que pongo más abajo (diseñado para Blogs, con Búsqueda en Sito, Blogs, Web e Imágenes), extraido de los Ejemplos de códigos de Motores de búsqueda en http://code.google.com/intl/es-ES/apis/ajaxsearch/samples.html

El siguiente Ejemplo de código DEBE estar en la Etiqueta HEAD. El atributo width corresponde al ancho del gadget; por su puesto se puede modificar para adaptarse al sidebar o lugar donde se colocará.

Código de ejemplo:
<style type="text/css">
#searchcontrol .gsc-control { width : 200px; }
</style>

Por su puesto, se puede extender la configuración de CSS personalizando los colores y las fuentes. El Esquema de colores en el ejemplo (verde) son los que puse en mi Blog.

Código de ejemplo:
/** Searchcontrol */

/* Main box */
#searchcontrol .gsc-control{
width : 100%;
font-size:90%;
font-weight:bold;
}


/* "Loading..." text */
span.loading {
font-size:120%;
font-weight:bold;
}

/* bold the section header */
.gsc-tabHeader {
font-weight: bold !important;
color : #55AA11 !important;
font-family: "Comic Sans MS", Arial, sans-serif !important;
}

/* Tabs */
.gsc-tabhInactive {
background: #AAFF99 !important;
border-color: #CCFFAA #88FF77 #88FF77 #CCFFAA !important;
}

.gsc-tabhActive {
background: #DDFFCC !important;
}

/* Results */
.gsc-resultsRoot-siteSearch .gsc-keeper {
background-image : url('http://google.com/css/orange_check.gif');
font-weight : bold;
color: #55AA11;
}

.gs-title{
font-size: 11px !important;
font-family: "Comic Sans MS", Arial, sans-serif !important;
color:#338800 !important;
}

.gsc-results .gsc-webResult {
font-size: 10px !important;
font-family: "Comic Sans MS", Arial, sans-serif !important;
}

.gs-visibleUrl {
font-size: 11px !important;
font-family: "Comic Sans MS", Arial, sans-serif !important;
}

.gsc-tabsArea .gsc-branding-text .gs-snippet {
font-size: 10px !important;
font-family: "Comic Sans MS", Arial, sans-serif !important;
}

.gsc-cursor-box {
font-size: 12px !important;
font-family: "Comic Sans MS", Arial, sans-serif !important;
}

.gsc-cursor-page {
color:#44AA55 !important;
}

.gsc-trailing-more-results {
color:#11AA88 !important;
}

.gsc-input {
width: 110px !important;
}

.gsc-search-button {
padding:0 !important;
margin: 0 !important;
width: 55px;
font-family: "Comic Sans MS", Arial, sans-serif !important;
font-weight: bold;
background: #AAFF99 !important;
border-color: #CCFFAA #88FF77 #88FF77 #CCFFAA !important;
color:#338800 !important;
}

.gsc-imageResult {
float:center !important;
}

Nuevo! Personalizar el Botón.
Si deseas personalizar el Botón con una Imagen, es muy sencillo; sólo tienes que buscar una Imagen de 20x20. Recomiendo usar el Ícono Nuvola Searchtool, obtenido desde Commons con Licencia libre. Recuerden achicarla aun tamaño de 20x20 y subirla a un Hosting como Imageshack.

Luego reemplaza el Bloque completo .gsc-search-button { por:
Código de ejemplo:
.gsc-search-button {
padding:0 !important;
margin: 0 0 0 2px !important;
width: 20px;
height: 20px;
font-size: 0px;
border:0;
color:#338800 !important;
background: url('URL_de_imagen') no-repeat !important;
}
Dejamos el tamaño de la Fuente en 0 para ocultar el texto. El area del Botón se ajusta automaticamente al establecer el width y height.


Nota: En las Plantillas normales de Blogger, el estilo se encuentra dentro de las etiquetas B:SKIN <b:skin></b:skin>; en las Plantillas clásicas, la Etiqueta sigue siendo STYLE <style></style>. Peguen el código al final de todo el código CSS.


Esta parte es el Javascript que deben pegar a continuación del CSS, Dentro de la Etiqueta HEAD (no olviden colocar el ID donde está indicado).

Código de ejemplo:
// Indica que se usarán Opciones:
options = new google.search.SearcherOptions();

// Aquí Aplicamos el Motor de búsqueda personalizado asociado con AdSense, colocando el ID del Motor de búsqueda:
webSearch.setSiteRestriction("xxxxxxxxxxxx:yyyyyy");

A continuación el Código que deben pegar en la página (dentro de la etiqueta HEAD):

Código de ejemplo:
<script src='http://www.google.com/jsapi' type='text/javascript'/>

<script type='text/javascript'>//<![CDATA[

google.load('search', '1.0');

function OnLoad() {

// :: Crear un Control de búsqueda en modo Tabbed

// Declarar un nuevo Control de búsqueda personalizado
var searchControl = new
google.search.CustomSearchControl
('xxxxxxxxxxxx:xxxxxx');

// Opciones adicionales para los Resultados (global)
searchControl.setLinkTarget
(google.search.Search.LINK_TARGET_SELF);
searchControl.setResultSetSize
(google.search.Search.SMALL_RESULTSET);

// :: Agregar Búsquedas

// Búsqueda en Blogs (opcional)
var blogSearch = new google.search.BlogSearch();
blogSearch.setUserDefinedLabel("Blogs");
searchControl.addSearcher(blogSearch);

// Búsqueda en la Web (recomendado)
var webSearch = new google.search.WebSearch();
webSearch.setSiteRestriction("xxxxxxxxxxxx:yyyyyy");
webSearch.setRestriction
(google.search.Search.RESTRICT_SAFESEARCH,
google.search.Search.SAFESEARCH_MODERATE);
webSearch.setUserDefinedLabel("Web");
searchControl.addSearcher(webSearch);

// Búsqueda de Imágenes (opcional)
var imageSearch = new google.search.ImageSearch();
imageSearch.setSiteRestriction
("xxxxxxxxxxxx:xxxxxx");
imageSearch.setRestriction
(google.search.Search.RESTRICT_SAFESEARCH,
google.search.Search.SAFESEARCH_MODERATE);
imageSearch.setUserDefinedLabel("Imágenes");
searchControl.addSearcher(imageSearch);

// :: Dibujado y Ejecución del Control de búsqueda

// Declarar el Dibujado del Control y los Resultados

var drawOptions = new google.search.DrawOptions();

// Establecer las Opciones de dibujado (modo Tabbed)
drawOptions.setDrawMode
(google.search.SearchControl.DRAW_MODE_TABBED);

// Dibujar el Control de búsqueda (Formulario)
drawOptions.setSearchFormRoot(document.getElementById
("search_control_tabbed"));

// Dibujar los Resultados de la búsqueda
// independientemente del Control, si deseamos
// colocarlo en otra parte de la página
searchControl.draw(document.getElementById
("searchResults"), drawOptions);
}
google.setOnLoadCallback(OnLoad, true);

//]]></script>

Luego, pegamos el código para mostrar el Elemento, dentro de la etiqueta BODY, donde queramos que se muestre, por ejemplo, como Gadget HTML/Javascript en el Sidebar:

Código de ejemplo:
<!-- Formulario -->
<div id="search_control_tabbed" class="searchcontrol">
Cargando...<div>

<!-- Resultados -->
<div id="searchResults"></div>

O bien, podemos separa ambos controles, para dejar el fromulario en el Sidebar, y los Resultados, en Main por ejemplo:

Código de ejemplo:
<!-- Formulario -->
<div id="search_control_tabbed" class="searchcontrol">
Cargando...<div>

Código de ejemplo:
<!-- Resultados -->
<div id="searchResults"></div>

Y así de simple. En 3 simples pasos ya tenemos un Motor de búsqueda personalizado mucho más estético y atractivo parav los Visitantes. Espero les sea útil.

Más información sobre personalizar el Motor mediante a API:
http://code.google.com/intl/es-ES/apis/ajaxsearch/documentation/reference.html

Pueden dar sus comentarios aquí.
Problemas o inquietudes sobre la Implementación, en el Foro de ayuda de Google.
--
Tutorial © Davod. Derechos reservados.

Se permite la Copia y Redistribución de este documento, así como también hacer Obras derivadas y Usos comerciales, siempre y cuando:

  1. Se incluyan intactas todas las Notas de Copyright.
  2. Se garantice futuras Ediciones mediante el código fuente, en un
    Formato electrónico Estandar Abierto.
  3. Se incluya una Copia de la GFDL y sea distribuido bajo la misma Licencia.

4 comentarios:

  1. Anónimo9/6/09 09:23

    Genial, me servirá :D

    ResponderEliminar
  2. Anónimo9/6/09 21:38

    gracias por la buena alluda,
    sigue alludando ala gente que Dios, yo, nosotros, y Google te lo vamos a hagradeser siempre.

    MUCHAS GRACIAS,MUCHAS GRACIAS.

    aTT.SOSA633

    ResponderEliminar
  3. Hola! Espero estés bien!

    Muy buena tu documentación acerca de este tema. Llegué al mismo buscando, ya que tengo una duda: Se puede hacer que cada clic que hagas en el botón "Buscar" dispare una query a una base de datos? O sea, lo que busco es guardar la cantidad de búsquedas que hace la gente en una base de datos propia y a la vez mostrar el resultado de la búsqueda.

    Muchas gracias desde ya!!!

    Juan

    ResponderEliminar
  4. Descripción detallada del problema y que acciones ya se ha tomado:
    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

    ResponderEliminar