Adding 'Two Page' Google Custom Search (GCSE) to a Drupal site

There is a problem with a 'page not found' error showing when implementing a 'Two page' Google Custom Search on a Drupal site. Using the 'Two page' approach you can have a seperate search box and results page.

Following the Google Search setup instructions results in you being diverted to a URL matching the search keywords, rather than the search results page URL. For instance, if searching for 'sunflower' you'll be directed to 'www.yoursite.com/sunflower'.

The problem lies in the fact that both Google Search and Drupal use 'q' in their query string. There is a module for Google Custom Search, but this isn't maintained and doesn't support the 'Two page' approach.

Here is the way to get around it when adding the scripts to your Drupal site. Just make sure you select the 2 page layout when setting up the 'look and feel' on the Google Custom Search pages.

1) Add the Google search script to your site <head>

Add the below script before your closing </head> tag. The script will be something like the below, with the following customisations:

  • Replace the var cx value with your own unique Google Search Engine ID. Obtained when setting up the search in Google Custom Search Engine pages.
<script>
  (function() {
    var cx = 'xxxxxxxxxxxxxxxxxxxxxxx:xxxxxxxxxxxxx';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
        '//cse.google.com/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);
  })();
</script>

2) Add the search box

Add this to the area where you want to render your search box - probably in a block. You will need to add this using PHP text format.

  • Add your search result destination page results_Url so that it points to your own search results page URL.
  • Notice the additon of queryParameterName="as_q"  -  this is the bit which stops the conflict with Drupals default 'q' query string.
<gcse:searchbox-only resultsUrl="http://www.mysite.com/search-results" queryParameterName="as_q"></gcse:searchbox-only>

3) Add the search results

Add this to the region where you want to render out your search results, probaby the content region of a search results page you've created (again using PHP text format).
The URL of the page you put this on will be specified when setting up your Google Custom Search settings within Google Webmaster Tools.

  • Notice the additon of queryParameterName="as_q"  -  which as mentioned above stops the conflict with Drupals default 'q' query string.

<gcse:searchresults-only queryParameterName="as_q" linkTarget="_self"></gcse:searchresults-only>
Justin Chevallier

Justin Chevallier

Avid Drupal site builder & user for +9 years.

Comments

Submitted by Shraddha on

Thanks alot for your article.

Submitted by electrokate on

thank you very much, this helped me today. Just a note, that Google now specifies the destination URL with this: resultsUrl="YOUR_RESULTS_PAGE_URL" inside the <gcse:searchbox-only> tag.

Thanks!

Submitted by Justin on

Indeed it has changed. I'll update the post with the changes. Thanks.

Submitted by Jura on

Thank you very very much! This helped me really out. I was trying to do it for hours. And you gave the solution.

Submitted by Justin on

Glad I could help. It also took me a while to figure out originally as the setup was exactly as the Google documentation described it should be! 

Submitted by Rick P on

All these years later your post is still helping people. I followed Google's documentation but couldn't get it to work. Your code works for whatever reason. Maybe it's the as_q, maybe not, but whatever it is, I'm damn glad I found your post. Thanks so much!

Rick

Add new comment

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.