Add Google Programmable Search Engine to a Website


Results from the University's Programmable Search Engine (PSE) can be embedded within a department or program's website. This article contains instructions on how to embed the search engine.

Alert! Please be aware that embedding search results means displaying content from the Google index and carries some risk. For this reason, it is important to prevent Google from crawling the search results page (described below).

Follow these instructions to embed the University's Programmable Search Engine.

  1. Create a form that posts to a results page.
  2. On the results page, add the PSE code snippet.

    All-Campus PSE Code Snippet

    		 
    <script>
  (function() {
    var cx = '011384946451046217786:f8oiwuqtaui';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);
  })();
</script>
  3. Add the results element to the results page, too. Choose from one of these options. Include enableOrderBy if you want to allow sorting. 
    Note: The last option illustrates how you can filter to show results from specific websites.

    PSE Results Element Options

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

<gcse:searchresults-only as_sitesearch='magazine.uchicago.edu'></gcse:searchresults-only>

    <gcse:searchresults-only as_sitesearch='www.chicagobooth.edu/magazine/*'></gcse:searchresults-only> 

    <gcse:searchresults-only enableOrderBy='false' webSearchQueryAddition="site:biophysics.uchicago.edu/ OR 
    site:nerve.bsd.uchicago.edu/FB/ OR site:crescentus.bsd.uchicago.edu/ OR site:dinner-group.uchicago.edu/ OR 
    site:engelgroup.uchicago.edu/ OR site:squishycell.uchicago.edu/ OR site:mgcb.uchicago.edu/faculty/glotzer/ OR 
    site:www.chem.cornell.edu/bab13/biophys.html OR site:chemistry.uchicago.edu/faculty/faculty/person/member/chuan-he.html 
    OR site:mgcb.bsd.uchicago.edu/faculty/kron/index.html OR 
    site:pps.bsd.uchicago.edu/faculty/jason_maclean.html</gcse:searchresults-only>
  4. Block Google from indexing your search page. In a robots.txt file on your website, disallow your search results page. For example, if your search results are at mysite.uchicago.edu/search/, add this line to mysite.uchicago.edu/robots.txt:

    A robots.txt Example

    		 
    User-agent: *
Disallow: /search/

    See The Web Robots Pages for more info.

    See Block Search indexing with noindex for alternatives to robots.txt.
  5. Optional: If your website uses the UChicago theme, drop the LESS or SCSS file given below to override the minimalist PSE styles. Use the file as a starting point for customizing your own style. (The undefined variables in the file are for setting fonts and colors.

    Download the LESS or SCSS file from the UChicago Box Public Files folder.

  6. Optional: If your site visitors have very strict adblocker settings, the search results embed can be blocked. The following jQuery function, an ad-blocker fallback for PSE, will display a message in place of the search results with a link to conduct the search directly on Google.

    Ad-Blocker Fallback

    		 
    <script></script>

    Download the jQuery file from this UChicago Box Public Files folder.

PSE is managed by the UChicago Web Services group within IT Services. If you have a question or an issue with implementing a PSE-powered search form, please send a note to search@lists.uchicago.edu.