How to use Google Custom Search (CSE) for your site search

A few month a ago Google introduced the Ajax powered Custom Search feature, which is an extension on the existing Search control class. The CSE is a great site search feature for your website with additional features like:

  • Monetize search results with Google Adsense
  • Promote websites based on specific search queries
  • Create refinements
  • Easy to integrate search bar for all your web pages and many more…

In the past you need to use some Iframe version to integrate this search into your website, with the result that your search results looks ugly and old fashioned. Since the Ajax powered custom search feature belongs this to the past, the new results looking much better and you have much more controls on the style.

How-to start?

Creating a site search is easy, you didn’t need to create a CSE, just use this code on your site:

<!-- Google Custom Search Element -->
<div id="cse" style="width:100%;">Loading</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().draw('cse');
  }, true);
</script>

This code works without modifications using the Google results from your website. So far so good, but there are some things you don’t like for your site search. This code will always generate a search box together with the results. So it would be hard to integrate this feature in your existing site.

What you need is a search result page, place the code there. Place all JavaScript code into you web page’s header and add the DIV container with the ID “CSE” in to your web page’s body.

Creating a “standalone” search box

Actually you need just a form with a text input element and a search button. Create a form with your search result page as target:

<form action="/search-results.php" id="cse-search-box">
	<input type="text" name="q" size="31" />
	<input type="submit" name="sa" value="Search" />
</form>
<script type="text/javascript" src="http://www.google.com/cse/brand?form=cse-search-box&lang=en"></script>

Because you’re using this form for the free Google Custom search you need to use some element for the “Google branding”. We use the JavaScript code at the bottom of the form. If we submit this form we will send the search value to our result page. Now we need a work around to execute the Ajax search with this value, we do that with this row of code in the JavaScript snippet (place it after the row with the “draw” command):

cse.execute('<?php echo trim($_GET['q']); ?>');

This code will create a “predefined search” and this way it’s possible to add your search box on any location of your website.

Create your CSE and get access to more features

If you don’t already have, create your CSE for your website to have access to all features. With the code from your CSE it’s possible to “connect” your search / result page with the Google the system, replace your previous code with the following:

  google.load('search', '1');
  google.setOnLoadCallback(function(){
    var cse = new google.search.CustomSearchControl('Your unique CSE code');
    cse.enableAds('pub-your adsense publisher ID');
    cse.draw('cse');
    cse.setNoResultsString('No results for this query, try a different search.');
	cse.setResultSetSize(GSearch.FILTERED_CSE_RESULTSET);
    cse.execute('<?php echo trim($_GET['q']); ?>');
  }, true);

You see we have now more options:

  • We enabled Google Adsense
  • We added a custom message for empty results
  • We show 10 results instead of 8

Replace also the the search box with the snippet you can obtain via the code area from the CSE panel.

If you don’t like that add this row to your site search page (within the JavaScript section)

cse.setLinkTarget(GSearch.LINK_TARGET_SELF);

Actually this kind of solution is (for my situation) just a workaround because it’s not possible (for me) to replace the content from some DIV container…

Maybe you know a better solution using some “extra” Google code?

Related Posts