How do I use Google Custom Search on my web site?

The Google Custom Search (GCS) service allows you to create a customized search engine that searches your specified web sites and displays the results for you. At Indiana University, you can use GCS on your web site free of charge.

On this page:

• Managing your search engines in Google Custom Search
  • Creating a search engine
  • Editing a search engine
  • Deleting a search engine
• Search results
  • Branding requirements
  • Displaying results on a different page
• GCS sample code

Managing your search engines in Google Custom Search

Creating a search engine

Note: In GCS, you can create multiple Custom Search Engines using one Google account; doing so saves you the inconvenience of managing multiple Google accounts. UITS recommends that you use a shared departmental Google account to create and manage your university-affiliated search engines. For more, see What account do I need in order to use Google Custom Search at IU?

1. Go to Google's Custom Search Engine page and log in with your Google account. Click Create a custom search engine; if you have already created a search engine, click New search engine... in the left-hand column.
   
   
2. Name and describe your new search engine. In the "Sites to search:" field, list the URLs of all of the websites you want the search engine to search.
   
   
3. Make sure you have selected the free Standard edition, check the box to indicate that you have read and agree to the Terms of Service, and then click Next.
   
   
4. On the following page, choose a style. You can do some limited customization of your search engine's appearance from this page; once you have the search engine installed on your web site, you can customize it further by applying your own CSS rules. When finished, click Next.
   
   
5. Copy and paste the code from the text box into the HTML on your web site. The <div id="cse"></div> tags should go where you want your search results to appear. The <script> tags, containing the JavaScript, should go where you want the search box to appear.

Note: In addition to the JavaScript-based search referenced above, GCS has a JSON/Atom Application Programming Interface (API). The GCS API allows you to manually make queries against a custom search engine. Use of the GCS API is free up to 100 queries per day, but any usage beyond that free quota will result in charges being assessed. For this reason, UITS recommends that you instead use the JavaScript-based search.

Editing a search engine

1. On the Custom Search Engine page, click My search engines in the left-hand column.
   
   
2. Click the name of the search engine you wish to edit, and then click Edit this search engine.

Deleting a search engine

1. On the Custom Search Engine page, click My search engines in the left-hand column.
   
   
2. Click delete in the row that corresponds to the search engine you wish to delete, and then click OK.

Back to top

Search results

Branding requirements

Do not remove Google branding from your search results. The text "powered by Google Custom Search" is a standard component of your search engine's presentation and cannot be altered in the search engine's control panel. Though the text, which appears in light gray, can be hidden using CSS, UITS asks that you not do this, so the university can honor its agreement with Google. The text color can be changed using CSS, but UITS recommends that you avoid using a gray background for your search pages; most IU-affiliated search pages have white backgrounds. The Google logo is an image, and its appearance cannot be changed.

Displaying results on a different page

To generate code that places a search field on one page and displays results on another page:

1. On the Custom Search Engine page, click My search engines in the left-hand column.
   
   
2. Next to the name of your search engine, click control panel.
   
   
3. On the control panel page, click Look and feel in the left-hand column. In the "Choose a layout" section, select Two page, and then click Save & Get Code... .
   
   
4. Type in an absolute address on your site for your search results page. If you want to change the query parameter that gets passed to your results page, do that as well. Click Save Changes.
   
   
5. The top text box on this page has the code for your search field. The bottom one has the code for your results page. Copy and paste the code into the correct pages.

You can customize the appearance of your search field and search results using CSS on your web site.

Back to top

GCS sample code

UITS recommends that you use the V2 code for your custom search engine, rather than V1 code, for multiple reasons:

• V2 syntax is easy to use and requires no knowledge of JavaScript.
• Custom search engine elements (search boxes and results pages) are rendered based on settings stored on the custom search engine servers, along with any client-side customization, so server-side changes do not require you to change the code on your site.
• All JavaScript is loaded asynchronously, which reduces page load time.

Place the following JavaScript before the closing </head> tag. The cx value should be replaced with your search engine ID.

Place this code where you want the search box to render:

If you have not set a custom results page for your search engine in the search engine's control panel, you can set the resultsUrl attribute on the element. For example:

Then, place this code where you want the search results to render:

Back to top