Tutorial para colocar el cuadro de Búsqueda Personalizada de Google en WordPress y vBulletin

Las ventajas de utilizar la Búsqueda Personalizada de Google dentro de tu website, pueden resultar atractivas tanto para tus usuarios como para vos.

• Integración con Adsense, los ingresos serán vistos en la sección “Adsense para la búsqueda”.
• Limitación de resultados a dominios que nosotros indicamos.
• Estadísticas de las búsquedas que realizan en nuestro sitio.
• Ahorro de los recursos del servidor, ya que las búsquedas las estará realizando un servicio externo, sin consultar a nuestra base de datos.
• Mejor motor de búsquedas que el integrado de WordPress.

Además es muy simple de instalar en WordPress! Previamente te recomiendo que utilices el servicio de Herramientas para Webmasters de Google, desde donde podrás chequear el estado de tu sitemap y notificaciones en relación a tu sitio. Si vas a hacer uso de la opción de monetizar las búsquedas tenés que tener tu cuenta de Google Adsense en orden.

Enviá tus sitemaps a google y otros buscadores con Google Sitemap Generator, el cual se encarga de recrear y reenviar el sitemap cada vez que generes nuevo contenido. Este plugin es muy sencillo de instalar, te ahorrará mucho trabajo y asegurará una rápida indexación de tus contenidos (los cuales luego serán usados en tu cuadro de Busqueda Personalizada de Google).

Generar el recuadro de Búsqueda Personalizada

Nos dirigimos al sitio de CSE y clickeamos en “Crear Motor Busq Person” (la verdad es que lo podrían abreviar poniendole mas onda…) y llenamos la breve planilla que sigue a continuación. No utilicemos todavía el código que nos ofrecen al finalizar, primero vamos a proceder a configurarlo bien.

Para ello, debemos ingresar nuevamente pero esta vez desde la opción de Administrar tus motores de búqueda actuales. Ahora podremos ver el Panel de Control de nuestro recién nacido buscador personalizado, recorramos todas las pestañas completando los datos a conciencia para configurarlo exactamente como queremos. Activemos desde allí la opción “Obtener Ingresos” (pedirá conectarse con Adsense) y finalmente juguemos un poco en la sección diseño.

Es recomendable personalizar lo mas posible el diseño, insertando el logo de nuestro sitio web, buscando que los colores de los enlaces respeten el criterio de diseño de nuestro sitio, etc.

Finalmente visitemos “Obtener Código” y marquemos la opción Alojar resultados en mi sitio web utilizando un iframe en donde indicaremos la URL de nuestra página de resultados (la cual habremos de crear en unos instantes!!!). Colocá, por ejemplo, http://www.tusitio.com/resultados.php. Copiá el código resultante y pegalo en donde quieras que aparezca el cuadro de Búsqueda Personalizada de Google, recomiendo usar la plantilla header.php para esto.

Ahora debemos generar un archivo en donde se mostrarán los resultados de nuestras búsquedas. En el root (raíz) de nuestro sitio podemos crearlo bajo el nombre de resultados.php y su contenido debe ser:

<?php require('./wp-blog-header.php'); ?>

<?php get_header(); ?>

<div id="cse-search-results"></div>
<script type="text/javascript">
var googleSearchIframeName = "cse-search-results";
var googleSearchFormName = "cse-search-box";
var googleSearchFrameWidth = 600;
var googleSearchDomain = "www.google.com";
var googleSearchPath = "/cse";
</script>
<script type="text/javascript" src="http://www.google.com/afsonline/show_afs_search.js"></script>

<?php get_footer(); ?>

Listo! Con esto ya tendrías funcionando tu cuadro de búsqueda personalizada, en donde contamos con el poder de Google pero acotado a nuestro sitio y como extra podemos generar ingresos.

Y en vBulletin como lo hago?

Existe un addon para no tener que trabajar mucho , tenés que seguir la primer parte de este mini-tutorial poniendo a punto tu cuenta de CSE y luego instalando el addon nos pedirá el ID de nuestro buscador para utilizarlo. Otra opción es ingresar al AdminCP y editar tu plantilla navbar para agregarlo como un item dentro del menu desplegable.

De este modo puedo colocar la búsqueda personalizada y además la búsqueda avanzada de vBulletin (que es muy útil, debo remarcar). Además en SummArg esta opción de permitir el uso de ambos buscadores es exclusiva para usuarios registrados, así que pude restringir el menu “Buscar” con mayor facilidad.

Buscamos:

<if condition="$show['popups']">
<!-- NAVBAR POPUP MENUS -->

<if condition="$show['searchbuttons']">
<!-- header quick search form -->

Agregamos debajo:

<div id="navbar_search_menu" style="display:none" align="$stylevar[left]">
<table cellpadding="4" cellspacing="1" border="0">
<tr>
<td>$vbphrase[search_forums]</td>
</tr>
<tr><td title="nohilite">
<form action="http://www.tusitio.com/resultados.php" id="cse-search-box">
<div>
<input type="hidden" name="cx" value="xxxxxxxxxxxxxxxxxxxxxxxxxxxx" />
<input type="hidden" name="cof" value="FORID:11" />
<input type="hidden" name="ie" value="UTF-8" />
<input type="text" name="q" size="31" />
<input type="submit" name="sa" value="Buscar" />
</div>
</form>
<script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=cse-search-box&lang=es"></script>
</td></tr>

Recordá reemplazar value="xx" por lo que corresponda, así como el path a los resultados. Esto llevará a las búsquedas a una página externa a la plataforma. Para utilizar este servicio siempre dentro de vBulletin, les recomiendo también mirar el Marco1 Google Custom Search hack que está recibiendo unas críticas muy buenas.

Espero que les haya servido, no duden en experimentar nuevas disposiciones!