Adding a Custom Search Engine (CSE)

posted Jun 5, 2009, 1:25 PM by Brian Johnson   [ updated Oct 6, 2010, 7:29 PM ]
Updated August 27, 2009: 

Google Sites has released a feature that allows for simple integration of a CSE with your Google Sites website.  For more details on how to make use of this new feature, please visit my article on Custom Search.

Though Google Sites offers a built-in, site-specific search engine, there are times when you would like to do more than just search your site.  For that reason, it's nice to have access to the Google Custom Search Engine (CSE) service. 

With a CSE, you can provide targeted search options for your site visitors.  For example, the following CSE's have been configured to search sites that have specific content that is closely related to Google Sites.  Try them out:

  • Custom Search (User help forums) -  The custom search engine below searches the Google Sites User Help Forums, including the archived user help group hosted at Google Groups.  Results open in a new window.

Now that you've seen Google's CSE in action, how do you make one for your site?  More specifically, how do you make one and include it in your Google Sites site?

Creating your CSE

Your first step in this process is to create yoru CSE.  Follow the steps below to create your CSE:
  1. Navigate to the CSE home page:  http://www.google.com/coop/cse/
  2. Enter "Basic Information":
    • Search Engine Name
    • Search Engine Description
    • Language
  3. What do you want to search?
    • Only sites I select
    • The entire web, but emphasize sites I select
    • The entire web
  4. Specify a list of websites to search (Not an option if "The entire web" is selected in the previous step)
  5. Select an edition:
    • Standard Edition (free, but includes ads on results pages >> Ads can be monetized via your AdSense account!)
    • Business Edition (starts at $100/year, but no ads required on results pages)
  6. Agree to Terms of Service
  7. Click Next
That's it for creating the CSE!  After clicking next in step seven above, you'll be given the opportunity to take it for a test run.



Now, be sure you've placed a check in the box next to Send confirmation email to [email address] and click the Finish button.  You will be taken to the My Search Engines page of the CSE service.  From here, you can do the following:
  1. View or edit your CSE profile
  2. Create another CSE
  3. Explore CSE resources
  4. View or edit your existing CSE's
    • Click on the name of the CSE to perform live searches
    • Access your CSE's control panel to modify settings and provide further customization (including AdSense integration!)
    • View statistics on the use of your CSE
    • Delete your CSE
    • Access CSE code for embedding in your site  (Note:  Google Sites will not allow you to paste this code directly into your site.  You will have to create a custom gadget that is embedded via the Insert >> More Gadgets menu option.)
  5. Manage your email preferences
In the email that is received (remember the comment above?), you will be given links to perform the following options:
  1. Day-to-day management of your search engine
  2. Access code to incorporate your search engine into your site or blog
  3. Add your Custom Search Engine search box to your Google Personalized Homepage
  4. Manage all of your Custom Search Engines from your Google Personalized Homepage, by adding the Custom Search Console at http://fusion.google.com/add

Creating a Custom Gadget for your CSE

As mentioned above, in order to add your CSE to your Google Site, you will have to create a custom gadget.  Once created, the gadget can be embedded into your site via the Insert >> More Gadgets menu option. 

What code do I use in my custom gadget?

In order to create your custom gadget, you're going to need the code for your CSE.  This code can be found in one of two locations:
  1. The To incorporate your search engine into your site or blog, you can find the necessary code at... link in the email mentioned above
  2. The Control Panel >> Get Code link for the spcific CSE.  This can be found on the My Search Engines page mentioned above
On this page, you'll be given multiple options for hosting your search engine.  My recommendation is to use the first option:  Host the result on a page hosted by Google.  Copy this code to your clipboard.  It should resemble the following:

<form action="http://www.google.com/cse" id="cse-search-box">
  <div>
    <input type="hidden" name="cx" value="011079130885249389707:0ocphfqgbku" />
    <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/jsapi"></script>
<script type="text/javascript">google.load("elements", "1", {packages: "transliteration"});</script>
<script type="text/javascript" src="http://www.google.com/coop/cse/t13n?form=cse-search-box&t13n_langs=en"></script>

<script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=cse-search-box&lang=en"></script>

Once copied, proceed to the Google Gadget Editor (GGE) to build your custom gadget as outlined in the tutorial on this site.

Further Customization

Results in New Window

If you want results for your CSE to open in a new window (like the example above), you'll need to add target="_blank" to the <form...> tag of the code copied above.  It should look like this:

<form action="http://www.google.com/cse" id="cse-search-box" target="_blank">

AdSense Integration

AdSense integration can be achieved through the Control Panel link to the right of your CSE on your My Search Engines page.  Once you click on this link, look for Make Money in the left navigation bar.  Click the Make Money link and follow the instructions for integrating your CSE with AdSense.


Adding Your CSE to Your Google Site

Once you've created your CSE and the associated custom gadget, you will be able to embed the gadget into your site.  To do this, follow these simple instructions:
  1. Copy the URL for your gadget.  It should resemble the following:
    http://hosting.gmodules.com/ig/gadgets/file/118139941537578381077/siteshelp_cse-demo.xml
  2. Log into your Google Site
  3. Navigate to the page you on wish to embed the CSE
  4. Click Edit Page
  5. Select More Gadgets from the Insert menu
  6. Click Add Gadget by URL
  7. Paste the URL from step 1 above into the box
  8. Click Add
  9. Set the dimensions
  10. Click OK
You should now see the gadget on your page!
 

Related Information




Have a question, but don't know where to start? 
Check out the Google Sites FAQ