Using Google Custom Search on your site

GX WebManager comes with a very well equipped search engine based on Apache Lucene. But suppose you don’t have the time or resources to setup and tune a search engine and just want a plain out the box popular search engine?  Google Custom Search might be a nice alternative for you. Occasionally we get this question from our customers and I will show you that implementing this is really easy and straightforward.

Creating the search engine

To create a Google Custom Search Engine  - or CSE as I will call it from now on – go to

http://www.google.com/coop/cse/

• Click on the button ‘Create a Custom Search Engine’.
• By entering basic information such as name, description, language and site details you can setup your search engine. As an example I created a custom search engine for GX Developerweb. I selected ‘Only sites I select’ and entered only one URL: http://www.gxdeveloperweb.com 

• You  can choose the standard edition with banners (Google’s got to earn some money too) or if you have a small budget ($100/year) or are lucky to be a non-profit institution or government agency you can choose the business edition.
• You can test the fresh CSE in step 2
• Go to ‘My search engines’  (URL: http://www.google.com/coop/manage/cse/) and click on the ‘control panel’ link
• Click on the ‘code’ link.
• Change the ‘hosting options’ setting to ‘Host results on your website’ and choose the iframe option.
• From the code in the ‘Search box code’ field, copy the value of the hidden field ‘cx’. This should be a code like ‘014765577166074708146:t_bphqhesla’
• Create a presentation WCB with one JSPf file with the following code:

<%@ page language="java" session="false" buffer="none" %>
<%@ taglib uri="http://www.gx.nl/taglib/wm" prefix="wm"%>
<form action="${presentationcontext.page.link.url}" id="cse-search-box">
  <div>
    <input type="hidden" name="cx" value="014765577166074708146:t_bphqhesla" />
    <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="Search" />
  </div>
</form>
<script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=cse-search-box&lang=en"></script>
<div style="overflow: auto">
	<div id="cse-search-results"></div>
	<script type="text/javascript">
	  var googleSearchIframeName = "cse-search-results";
	  var googleSearchFormName = "cse-search-box";
	  var googleSearchFrameWidth = 450;
	  var googleSearchDomain = "www.google.com";
	  var googleSearchPath = "/cse";
	</script>
	<script type="text/javascript" src="http://www.google.com/afsonline/show_afs_search.js"></script>
</div>

The only thing that has to be changed in this JSPf is the CX value in the same hidden form field. Replace it by the value you copied from Google. Create an XML descriptor file for the JSPf and give it the same scope as the GX WebManager Search Element

<presentation>
  <name>GXlabs Google Custom Search element</name>
  <display-name>GXlabs Google Custom Search element</display-name>
  <scope>SearchElement</scope>
</presentation>

• Deploy your WCB, add a search element to a page et voila! Of course you can find this WCB on WCMExchange: http://www.wcmexchange.com/googlecustomsearch/

Additional steps

From here on its time to play around with your CSE and JSPs. Some ideas:

• You can set the background colors and presentation in Google, add additional banners (AdWords), or set up a business edition. Just check all the tabs in the CSE generator
• You can upgrade to a business account to get rid of the banners legally. This will also allow you to retrieve the search results in raw XML format. That enables a much nicer integration than an iframe. For example you could display the search results by using AJAX calls or integrate search results with the WebManager presentation layer. 
• Combine the Google CSE  with the GX WebManager search engine. This gives visitors the choice between various search engines. A real life example is the Google CSE implementation at HetNet:

  http://www.hetnet.nl This is a combination between web search handled by Google and local site search handled by the GX WebManager search engine.

• This simple presentation WCB could be replace by a special Google Custom Element WCB where you can enter the CX id manually and add more customization parameters.

You can dump your creations in the comments!