How do I use Google Custom Search on my website?

At Indiana University, the Google Custom Search (GCS) service provides a way for you to help people find what they need on your website(s) by allowing you to create a customized search engine that searches your specified website(s) and displays the results. You can configure your Google Custom Search Engine (CSE) to search whatever site(s) you want, even sites you don't own, and you can add a custom search box to your web page(s) by copying and pasting a few lines of HTML, CSS, and JavaScript. People who use the search box will see search results from only the site(s) you choose. At IU, you can use GCS on your website free of charge.

On this page:


Managing your search engines in Google Custom Search

Note:
Google Custom Search is available as a part of your Google at IU account.

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 website, 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 website. 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.

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 website.

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.

  <script type="text/javascript">
    (function() { 
      var cx = '012345678901234567890:abcdefghijk'; 
      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>

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

  <gcse:searchbox-only></gcse:searchbox-only>

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 (replace my_search_results_page_url with the web address of your search results page):

 <gcse:searchbox-only resultsUrl="my_search_results_page_url"></gcse:searchbox-only>

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

  <gcse:searchresults-only></gcse:searchresults-only>

This is document bckj in the Knowledge Base.
Last modified on 2017-10-16 15:33:50.

  • Fill out this form to submit your issue to the UITS Support Center.
  • Please note that you must be affiliated with Indiana University to receive support.
  • All fields are required.

Please provide your IU email address. If you currently have a problem receiving email at your IU account, enter an alternate email address.

  • Fill out this form to submit your comment to the IU Knowledge Base.
  • If you are affiliated with Indiana University and need help with a computing problem, please use the I need help with a computing problem section above, or contact your campus Support Center.

Please provide your IU email address. If you currently have a problem receiving email at your IU account, enter an alternate email address.