14 Custom Search Engines exercises

In this series of exercises, you're going to construct different versions of a custom search engine for your term project. Before you start, think of at least two or three web sites that it should search. Use these same web sites in each of the following. In each one of these cases, you will be able to go back and revise the list of URLs, so don't obsess about getting a complete and correct list here at the beginning.

Also, when you look at the custom search engines that have been created in these tools below, you should take advantage of being able to see the list of sites that these tools access (or deny) — you can add these sites to the sites you already know about when you create your own custom search engine.

After you have completed this series of exercises, you will be prepared to create a custom search engine for your term project. If you choose to use Google Custom Search Engine, you will need to embed the tool within your wiki; if you use any of the other tools, you will just include a link to the tool. I will definitely expect some type of custom search engine delivered with your term project.

Google Custom Search engine

Google CSEs can be embedded in your own Web page or can be accessed via a link from your Web page.

  1. Go to Google Custom Search Engine and sign in.
    • Google Marker is a tool that can make the process of adding sites to your custom search engine easier.
  2. Create your own search engine.
    1. Click on New search engine…
    2. Set up the search engine by giving it a name, description, enter some sites, choose standard edition (we'll change this in a minute), and then agree to the terms of service.
    3. On the Control panel, you have lots of options but the choices you're going to look at are Basics, Sites, Look and feel, and Get code.
      • Under Basics/Preferences, change Advertising status to Do not show ads on results page. Be sure to Save Changes.
      • Sites is where you can continue to add sites that your search engine will search.
      • Look and feel is where the tools are located to change how your search engine looks and how it's integrated into your site.
      • Finally, Get code is where you get the code that you'll copy into your wiki in order to integrate the search engine into your site.
  3. You can embed the search engine in a page within your own wiki. You have several different options for how to do this. Each is explored below. Before you continue with the rest of this page, you should make sure that you have created a basic custom search engine that returns some results.

Google-hosted search engine results

I have an example on this page. (Note: if you want to look at how this page, or any wiki page, is written, use the options/view source button at the bottom of this page. If you use the edit button this keeps anyone else from looking at the code while you're looking at it.) This is the easiest one to set up and one that I encourage you to try before you do anything else.

  1. Use the GCSE site, under Control Panel/Look and feel, choose Google-hosted page.
  2. Click on theSave and then Get Code button.
  3. This should bring up a new page with a single text box titled "Search box code".
  4. Create a page on your site in order to hold the search engine (and results).
  5. Copy the code below into that page.
  6. In that code, replace codeFromGCSEpageHere with text from the "Search box code".
  7. Now replace theURLofTheSearchPageGoesHere with the URL of the search results page that you are currently creating.
  8. Save the page and give it a try.
[[collapsible show=" " hide=" "]]
[[code type="HTML"]]
codeFromGCSEpageHere
[[/code]]
[[/collapsible]]

[[iframe http://theURLofTheSearchPageGoesHere/code/0 frameborder="1" scrolling="yes" width="800px" height="600px"]]

IFrame-based search engine

My example is on this page. This is a bit more complicated to set up because you have to create a file on your personal Web space. The contents of this file are the second box of code from the Google CSE page.

  1. Use the GCSE site, under Control Panel/Look and feel, choose Iframe.
  2. Click on the Save and then Get code button.
  3. This should bring up a new page with three text boxes: Specify search results details, Search box code, and Search results code.
  4. You are going to need a plain text page on your personal Web space. Determine the name of that file. For my search engine results, I created a file www-personal.umich.edu/~samoore/teach/bit330f09/nutrition-results.html.
  5. Type the URL of this search results page into the Specify search results details box. This will update information in the other two boxes.

On the wiki search engine page

  1. Create a page on your wiki where you want the search engine to appear.
  2. On the wiki search engine page, copy the code below into the page.
  3. Replace searchBoxCode with the code from the Search box code text box.
  4. Replace theURLofTheSearchPageGoesHere with the URL of the search results page that you are currently creating.
  5. Save this page.
[[collapsible show=" " hide=" "]]
[[code type="HTML"]]
searchBoxCode
[[/code]]
[[/collapsible]]

[[iframe http://theURLofTheSearchPageGoesHere/code/0 frameborder="1" scrolling="yes" width="820px" height="900px"]]

On the Web search results page

  1. Using whatever method is easiest for you, it is now time to create that text file on your personal Web space.
  2. The contents should simply (and only) be the code from the Search box code from the GCSE page.
  3. Save the file.
searchResultsCode

Wrapping it up

  1. Now you have a wiki page and a Web page.
  2. Go to the wiki page and run a search. If you're lucky the results will appear on that page in the wiki.

What's going on here? After you run the query, the results are put into the Web page that you created, and the contents of the Web page are then copied over the search engine box on the wiki page. So you are never taken outside of the wiki — it appears as if the results are put into the wiki directly, but they're actually being put into a Web page and the Web page is being put into the wiki. Subtle, but that's what's going on.

Search element based process

This is actually the version that I like best. It looks the best and I think it provides the best user interface. The full width version is not that difficult to set up; the compact version is useful for two-column pages or other pages where you don't want search information to take over the whole page; and the two-column version would be really versatile (and the one that I think I would most prefer…if I could only get it to work.

Full width

My example is on this page. This setup demands its own page within your wiki.

  1. Use the GCSE site, under Control Panel/Look and feel, choose Search element.
  2. Under Choose a layout, choose Full width.
  3. Click on the Save and then Get Code button.
  4. This should bring up a new page with a single text box titled "Custom Search element code".
  5. Create a page on your site in order to hold the search engine (and results).
  6. Copy the code below into that page.
  7. In that code, replace searchElementCode with text from the "Custom Search element code".
  8. Now replace theURLofTheSearchPageGoesHere with the URL of the search results page that you are currently creating.
  9. Save the page and give it a try.
[[collapsible show=" " hide=" "]]
[[code type="HTML"]]
searchElementCode
[[/code]]
[[/collapsible]]

[[iframe http://theURLofTheSearchPageGoesHere/code/0 frameborder="1" scrolling="yes" width="820px" height="900px"]]

Compact

My example is on this page. If you have a two-column setup and want to include this search engine on your home page, then you could probably get this to work in the desired amount of space.

In order to create this search engine style, follow the same instructions as just above except choose Compact instead of Full width.

[[collapsible show=" " hide=" "]]
[[code type="HTML"]]
searchElementCode
[[/code]]
[[/collapsible]]

[[iframe http://theURLofTheSearchPageGoesHere/code/0 frameborder="1" scrolling="yes" width="420px" height="500px"]]

Two column

I could not get this to work. Here is my attempt.

This would be very useful. You could (possibly) put the search engine in the side navigation bar and have it put the results in a separate wiki page. But, as noted, I haven't been able to get this to work.

For your project

You will definitely want to have a custom search engine for your site. This site should use the web sites (mostly) and pages (the really good ones) that you find during the semester. This is one of the most useful ways that you can share your experience and knowledge with someone else.

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-NonCommercial-ShareAlike 3.0 License