Google Custom Search: Buscador personalizado de Google en tu Wordpress
No hace mucho integre el buscador personalizado de google en mi blog, (podéis verlo en la barra lateral) y creo que es un buen momento para dar una pequeña explicación de como integrarlo en Wordpress para todo el que lo quiera poner.
Lo primero es dirigirnos a la pagina del buscador personalizado de Google y crearnos uno clicando en Create a Custom Search Engine. Rellenamos el formulario de la siguiente pagina, que aunque este en inglés es muy facil.
Una vez efectuado el registro, ya nos podemos dirigir a nuestro panel de administración, para configurarnos el buscador.
Si nos dirigimos a control panel podremos configurarlo como queramos. Nos aparece un menú con diferentes opciones:
- Basics: Información básica y preferencias.
- Sites: Aqui añadiremos el sitio en el cual se hará la búsqueda, en este caso la URL de nuestro blog.
- Refinements: Son etiquetas que puedes aplicar a los sitios. Aparecen como lista sobre los resultados de la búsqueda, yo no lo utilizo, pero vosotros mismos.
- Look and feel: Aquí podemos configurarnos el resultado de nuestras búsquedas, básicamente los colores del resultado de las búsquedas.
- Code: Como la palabra indica es donde esta el código que tenemos que copiar, para pegar posteriormente en nuestro Wordpress.
- Collaboration: Es para invitar a otros usuarios o contribuyentes, pero la verdad es que no se muy bien su función.
- Make money: aquí insertaremos nuestro código de Adsense para asociar estas búsquedas a Adsense y así conseguir pequeños ingresos extra. Después de introducir nuestro código de Adsense tendremos que dirigirnos a la bandeja de entrada de nuestro correo y mirar el mail recibido de Adsense.
Estimado editor:
Ha recibido este mensaje porque recientemente ha solicitado acceso para participar en el programa AdSense a través de www.google.com/coop. Para utilizar las funciones de AdSense mediante www.google.com/coop, deberá proporcionar al sitio acceso al código de anuncios y a la información de rendimiento en su cuenta de AdSense. Para ello, haga clic en este vínculo:
https://www.google.com/adsense/….
Si considera que ha recibido este mensaje por error, o tiene alguna pregunta, le sugerimos que se ponga en contacto con los propietarios de www.google.com/coop.
Atentamente,
El equipo AdSense de Google
- Business Edition: Típica sección en la que te recomiendan que te pases a la Business Edition porque es mejor y bla, bla,bla… sólo para sacarte unas pelas, pues NO.
- Advanced: Para usuarios avanzados, nosotros no lo necesitamos para nada.
- Preview: Lógicamente aquí veremos como queda nuestro buscador.
Una ves tenemos esto listo, ya podemos liarnos con nuestro Wordpress, lo primero es poner el código de la sección code en el archivo searchform.php de nuestro theme, recomiendo comentar el antiguo código antes de machacarlo con el nuevo, o haceros una copia del archivo searchform.php.
Si queremos que el resultado de la búsquedas nos lo muestre en una página de Google, pues ya esta, pero si queremos mostrarlo en un pagina personalizada con nuestro theme, tendremos que cambiar la segunda linea de código, y donde pone action=”http://www.google.com/cse” ponemos action=”http://www.misitio.com/buscar.php” cambiando lo de misitio.com por nuestra URL.
Si nos fijamos en la parte inferior de la sección de code hay un menú desplegable que pone Search box and search results code for your website, pues lo desplegamos y copiamos el código en una pagina nueva que vamos a llamar buscar.php y la vamos a colocar en la raiz de nuestro sitio.
El archivo buscar.php tiene que contener algo parecido a esto:
<?php require('./wp-blog-header.php'); ?>
<?php get_header(); ?>
<div class="content">
<!-- Google Search Result Snippet Begins -->
<div id="results_014073114125304419106:_1whtbeyhyu"></div>
<script type="text/javascript">
var googleSearchIframeName = "results_014073114125304419106:_1whtbeyhyu";
var googleSearchFormName = "searchbox_014073114125304419106:_1whtbeyhyu";
var googleSearchFrameWidth = 400;
var googleSearchFrameborder = 0;
var googleSearchDomain = "www.google.com";
var googleSearchPath = "/cse";
</script>
<script type="text/javascript" src="http://www.google.com/afsonline/show_afs_search.js">
</script>
<!-- Google Search Result Snippet Ends -->
</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
Pues creo que esto es todo, espero no dejarme nada, si tenéis alguna duda ya sabéis que en los comentarios las respondo todas 
A por cierto que se me olvidaba, si queremos añadir otro buscador como este en otro blog o web que tengamos, tendremos que clicar en nuestro Google Coop arriba a la izquierda donde pone New search engine, eso, eso, eso, eso, eso es todo amigos 
También te puede interesar:
Mis diez mejores posts
Por fin un buscador en Google Reader
InKiLiNo en Google
Buscador de Blogs Google
Marketing Google
Que buscador te genera más visitas
Wordpress deja Technorati por Google
Google cambiara su pagina principal
FeLiPe RM
# 1Muy bien explicado. Gracias por el post
El Lunes 17 de Septiembre de 2007 a las 17:08
Herzeleyd
# 2Hola, yo tengo un problema. Tengo puesto en el sidebar el buscador, la otra parte en el index.php y cuando busco, debajo de las búsquedas aparece todas las entradas del blog.
He probado a poner en vez del index a ponerlo en search.php y a cambiar la página del buscador por xxxx.com/search.php y así no encuentra nada. De la única forma que encuentra es como yo lo tengo. No se si es que al cambiarlo tengo que esperar un tiempo para volver a encontrar las cosas.
A ver si me puedes ayudar,
Gracias.
El Jueves 27 de Septiembre de 2007 a las 18:15
InKiLiNo
# 3Herzeleyd acabo de hacer una búsqueda en tu blog, y me ha salido bien, supongo que ya lo habrás arreglado.
El Jueves 27 de Septiembre de 2007 a las 21:07
Herzeleyd
# 4No, no sale bien, fíjate que si sigues bajando siguen apareciendo las entradas del blog. ¿No se puede hacer como en el tuyo? Que si haces una búsqueda solo sale la búsqueda y no aparecen las entradas debajo…
Gracias
El Jueves 27 de Septiembre de 2007 a las 21:29
InKiLiNo
# 5A vale, ya lo veo, tienes que hacer un archivo buscar.php igual que lo explico en el post.
El Jueves 27 de Septiembre de 2007 a las 22:13
Herzeleyd
# 6Gracias, he hecho eso, pero las barras laterales se van hacia abajo O_O que desastre
El Jueves 27 de Septiembre de 2007 a las 23:53
Herzeleyd
# 7A ver Inkilino, que ya no se que leches puedo hacer mal.
Creo un archivo buscar.php, lo subo a mi ftp dentro del theme que uso, donde está el index.php y demás.
En el buscador añado en action la web/buscar.php y cuando hago una búsqueda se me va aquí:
http://www.herzeleyd.com/prueba.php?domains=www.herzeleyd.com&q=prueba&sitesearch=www.herzeleyd.com&sa=Búsqueda de Google&client=pub-7261535131909302&forid=1&ie=ISO-8859-1&oe=ISO-8859-1&cof=GALT:#008000;GL:1;DIV:#336699;VLC:663399;AH:center;BGC:FFFFFF;LBGC:336699;ALC:0000FF;LC:0000FF;T:000000;GFNT:0000FF;GIMP:0000FF;FORID:11&hl=es
¿Qué estoy haciendo mal?
El Sábado 2 de Febrero de 2008 a las 20:57
InKiLiNo
# 8Herzeleyd lo mejor va a ser que empieces de cero otra vez, por que conozco a varios que lo han hecho siguiendo este manual, incluso yo mismo y les va a la perfección.
El Sábado 2 de Febrero de 2008 a las 23:31
Doctor Informatica.
# 9Buenas tardes Herzeleyd #8
Tienes que bajar la cifra 600 a lo que tu quieres hasta que te entra bien dentro de tu blog es decir dentro de este código : var googleSearchFrameWidth = 600;
Salu2.
El Domingo 3 de Febrero de 2008 a las 21:43
Herzeleyd
# 10Hola, gracias. Si yo lo tengo puesto en mi blog y funciona, lo tengo en 500 para que entre bien. Lo que pasa que al tener el código metido en Index, me muestra los resultados y debajo sigue apareciendo la página.
He creado buscar.php y lo meto dentro del theme, luego en el widget meto http://www.herzeleyd.com/buscar.php y cuando utilizo el buscador la web tira para esa dirección y no encuentra nada :S
Si es que he hecho todo exactamente igual. Y me da a mi que va a ser la forma de enlazar la web, que va a tener que ser otro enlace en vez de esa. Al menos en mi web :S
Un saludo.
El Domingo 3 de Febrero de 2008 a las 23:28
Doctor Informatica.
# 11¡Hola!
Si tu miras dentro de tus archivos de conexiones en tu hosting seguro que tendrás algo como : [Sun Feb 03 18:56:39 2008] [error] client denied by server configuration:
Pero tengo una solución mejor y más facil es coger la forma dentro de tu panel en Google que se llama:
¡Nuevo! superposición: requiere una página, pero presenta los resultados en superposición modal
Es la forma que yo tengo en mi web.
Salu2.
El Lunes 4 de Febrero de 2008 a las 1:18
Herzeleyd
# 12mmm, no entiendo lo que dices :\ Creo que me voy a quedar como estoy…
Lo que no entiendo es que mandando al buscar.php la web no lo encuentre :/
El Lunes 4 de Febrero de 2008 a las 1:43
Herzeleyd
# 13Inkilino ¿Puedes poner el otro código que tienes del buscador de google?
Porque lo único que se me ocurre es que algo esté cambiado.
El Miércoles 6 de Febrero de 2008 a las 15:00
InKiLiNo
# 14Ese es el código que yo tengo puesto, pero tu tienes que poner el que te da Google
El Miércoles 6 de Febrero de 2008 a las 15:11
Herzeleyd
# 15Mira inkilino, ya lo tengo puesto como dices:
Usa el segundo buscador de mi web y mira a ver si ves algo raro, porque lo tengo hecho todo exactamente como dices.
Lo único que se me ocurre es que google tarde un tiempo en habilitarlo, lo acabo de poner ahora.
Muchas gracias.
El Miércoles 6 de Febrero de 2008 a las 15:18
InKiLiNo
# 16El buscador que yo veo, no es el de Google Custom Search.
De verdad, el Sábado se lo hice a un colega y es muy fácil, te tienes que estar dejando alguna tonteria.
El Miércoles 6 de Febrero de 2008 a las 15:33
Herzeleyd
# 17mmm, pero a ver, yo uso el buscador que puedo configurar en adsense, y al final es lo mismo.
en http://www.kirainet.com lo tiene como el mio, y le aparece en la página sóla.
Mis pasos son los siguientes:
En un widget agrego el buscador, con la dirección http://www.herzeleyd.com/buscar.php
En ese archivo buscar creo uno como el tuyo
Y ya está, si los pasos son muy simples, pero algo por ahí no se que leches será, y que no me sale.
El Miércoles 6 de Febrero de 2008 a las 15:56
InKiLiNo
# 18Ah amigo, ahí estaba el problema coño, no es lo mismo el buscador que yo explico que el de Adsense xD
Yo te recomiendo este mil veces, y que lo vincules a tu Adsense.
Hazlo tal y como explico desde el principio y verás como te sale
El Miércoles 6 de Febrero de 2008 a las 16:03
Herzeleyd
# 19Nada, lo he hecho como explicas y nada. Algo no pilla mi web, algo con el buscar.php que no lo encuentra. Porque siempre me dice lo mismo,que la página que busco no ha sido encontrada…
El Miércoles 6 de Febrero de 2008 a las 16:30
Herzeleyd
# 20Puedes comprobarlo de nuevo, que ya tengo implementado el nuevo buscador.
El Miércoles 6 de Febrero de 2008 a las 16:30
Doctor Informatica.
# 21Hola Herzeleyd y Inkilino
“Herzeleyd”
Tu archivo buscar.php lo tienes que poner en la carpeta raiz (root) de tu dominio.
Yo lo tengo puesto así:
php require(’./wp-blog-header.php’);
php get_header();
div id=”contentwrap”
—-El código de mi Custom search—-
/div
php get_sidebar();
php get_footer();
Es ese codigo : php require(’./wp-blog-header.php’);
que tu tienes que poner arriba de todo en tu archivo (buscar.php)
Para saber el código correcto examina tu 404.php para guiarte y saber lo que hay exactamente, deberías tener algo mas o menos así:
php get_header();
div id=”contentwrap”
——————-
/div
php get_sidebar();
php get_footer();
El Domingo 17 de Febrero de 2008 a las 17:04
Herzeleyd
# 22Muchas gracias, echaré un vistazo.
El Lunes 18 de Febrero de 2008 a las 20:42
eduardo
# 23muy bune post inkilino.
he estado implementando algo, pero lo que no encuentro es como personalizar aun mas pa pagina de resultados ya que todo el sitio en el que estoy es negro y si los resultados aparecen en el blanco no se ve tan estetico que digamos.
Algun tip
El Jueves 21 de Febrero de 2008 a las 21:27
Herzeleyd
# 24LO CONSEGUIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
LO CONSEGUIIIIIIIAIAIAIAIAIAIAAIAIAIA LALA LERELELRELERLERLELRLERL
LERELELELE LARALALELE
El Jueves 28 de Febrero de 2008 a las 16:00
Doctor Informatica.
# 25Hola Eduardo.
¡Si!
Es posible y se hace desde tu panel de control en el apartado “Diseño” situado en tu “Motor de búsqueda personalizado”
Desde aqui puedes elegir los colores para todo (el fondo,las letras, etc).
El Jueves 28 de Febrero de 2008 a las 20:03
Racso
# 26Hola.
Me gustaria saber por qué me deja un espacio entre las búsquedas y lo siguiente que pongo en mi web.
Sale todo lo demás bien pero entre los resultados de la busqueda y el resto de contenido que hay en mi web deja un espacio muy grande, en el html no hay nada en medio pero no se por qué sale ese hueco.
El Jueves 28 de Febrero de 2008 a las 23:15
InKiLiNo
# 27Racso, eso puede ser por el tamaño del frame, si me pasa tu URL lo miramos
El Viernes 29 de Febrero de 2008 a las 6:56
Racso
# 28Resulta que la página no la tenía subida todavía, y en mi pc se ve con ese espacio, pero al subirla para que pudieras verla he probado y sale bien, sin el hueco.
Muchas gracias y felicidades x el manual.
El Viernes 29 de Febrero de 2008 a las 12:15
Martincho
# 29Inkilino, amigos, gente que sepa… estoy buscando hace dias sobre lo siguiente y no encuentro nada… el tema es que instale el Google Custom Search en un Portal que estoy por lanzar, y no lo hago justamente por este tema del buscador que no anda bien… el asunto es que pareciera que google no indexa ciertas paginas del sitio, le pongo “fotolitos” por ejemplo y tendria que encontrar las paginas preprensa.php , y las interiores de ese rubro, pero nada… el Portal lo subi hace varias semanas y estoy esperando eso para publicarlo ya uqe el buscador es la principal herrameinta y no funciona bien… alguan sugerencia? Mil gracias por adelantado.
El Miércoles 9 de Abril de 2008 a las 17:59
InKiLiNo
# 30Martincho es posible que no las encuentre porque todavía no has lanzado la web. Te recomiendo que lances la web con un buscador normal y corriente y una vez lanzada y al cabo de una semana prueba otra vez con Google Custom Search.
El Miércoles 9 de Abril de 2008 a las 22:45
Jair Gonzales
# 31Muy buena informacion, y la ayuda de Doctor Informatica es muy util, también tuve unos problemas pero pude solucionarlo. Saludos.
El Sábado 12 de Abril de 2008 a las 7:00
Martincho
# 32Gracias Inkilino, ya va indexando mi sitio el guguel, aunuqe sea de a partes, parece que se cansa si lo hace todo el mismo dia… gracias de nuevo, suerte.
El Domingo 13 de Abril de 2008 a las 22:28
InKiLiNo
# 33Gracias a vosotros por vuestros comentarios
El Domingo 13 de Abril de 2008 a las 22:32
osmodiars
# 34hola, muy buen articula gracias, tengo una gran duda y espero que puedas ayudarme. ¿hay alguna forma de que los resultados del google search se habran en una nueva pagina?
El Lunes 30 de Junio de 2008 a las 19:13
Mario
# 35Hola inkilino, tengo una duda, ¿como puedo reemplazar el botón que dice “buscar”? ¿o como puedo quitarlo como lo hiciste tu?
El Martes 6 de Enero de 2009 a las 1:59
InKiLiNo
# 36@Mario en un tu archivo searchform.php o donde tengas el formulario, tendrás que poner que no quieres mostrar el botón, más o menos así:
El Martes 6 de Enero de 2009 a las 11:25
lalo84
# 37hola amigos miren llevo dias intentando hacer eso de el resultado de google en mi web pero no me sale me manda una pagina en blanco hago todo lo k me dicen y nada no se si es pk uso el wordpress la ultima version saludo espero respuesta pronto s
El Martes 28 de Julio de 2009 a las 19:15
Rafael
# 38hola, buscando me encontre con esta web y me parece interesante, quisiera preguntarle si alguno ha incorporado este buscador en kumbiaphp. ya que no logro hacer que me funciones…
o alguna sugerencia para incorporar el buscador.
realice como esta el manual y me sale pag no encontrada 404
El Lunes 7 de Diciembre de 2009 a las 20:29