Services

Enabling Google Custom Search on Static Sites

  1. Follow the instructions on the Yale ITS website to create and configure a Google Custom Search engine.

  2. Sign in to the Google Custom Search control panel.  Use the Setup link and Basics tab, then click the Get code button.



  3. Copy the code between the script tags and paste it into a .js file that can be added to your page(s).  Note that the <script> tags should not be included when storing the code in a .js file.



  4. The script to add to the .js file to the head section of pages requiring a search box or search results is as follows:

    where filename should be replaced with the path and name of your file.

  5. A form must also be added to the body section of any pages requiring a search box.  The code for a sample search box can be seen below.
               <form action="/search/results" method="get">
                     <fieldset>
                            <input type="text" name="query">
                            <input type="submit">
                     </fieldset>
               </form>
    where “/search/results” should be replaced with the path to the results page for your website.
    Note that the form method must be set to "get" and the input (type text) name parameter must be set to "query".

  6. Finally, add the following code to your search results page:

    The preceding code will display only the search results (with no included search box). Alternately, the class can be changed to "gcse-search" to include a search box with the results or "gcse-searchbox-only" for just the Google search box.

  7. Your static implementation of the Google Custom Search engine is now set-up and ready for use.  For technical assistance, please contact search@yale.edu.