Google Custom Search: Buscador personalizado de Google en tu WordPress

google custom searchNo 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 😛

40 pensamientos en “Google Custom Search: Buscador personalizado de Google en tu WordPress

  1. Hola, 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.

  2. No, 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 😉

  3. Pingback: Mis diez mejores posts en Blog Personal de InKiLiNo | Wordpress, Plugins y algo de SEO.

  4. A 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? :(

  5. Herzeleyd 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.

  6. Hola, 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.

  7. ¡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.

  8. Mira 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.

  9. Ah 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 😉

  10. Nada, 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…

  11. Hola 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();

  12. muy 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

  13. Hola 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).

  14. Hola.
    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.

  15. Resulta 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.

  16. Inkilino, 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.

  17. Martincho 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.

  18. Gracias 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.

  19. hola, 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?

  20. @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í:

    <input type="submit" name="sa" value="Search" style="display:none;"  />
  21. hola 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

  22. hola, 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

  23. Hola inkilino gracias por el tuto, todo me funciono, pero tengo una consulta, digamos que buscamos la palabra sygic en el cuadro de búsqueda de mi web, te aparece la búsqueda pero con un tremendo desorden, me explico para que me entiendan.
    digamos que cuando se creo sygic que es un navegador para móviles, fue la versión 1, al cabo de 4 meses tenemos la versión 2, y asi sucesivamente.
    Mi pregunta es ¿porque al buscar esa palabra, me aparece las mas vieja primera o la 4 versión, pero no la ultima versión ya posteada e indexada?. Aparte de esto me salen los tags en las búsquedas y entradas que no tienen nada que ver con la palabra sygic.

    A ti te sale todo ordenadamente y dentro de tu pagina o web, quiero decir, porque yo cree el archivo buscar.php, pero me sale igual como si fuera la de google fuera de mi sitio web, con la dirección de mi sitio, pero no tiene nada que ver de mi sitio.

    http://www.the-genuine.com/
    este es mi sitio para que veas lo que hablo…

Deja un comentario