How to Create an Image Search on a Website

A picture is worth a thousand words. Adding the ability to search for images directly from your own website opens up the entire World Wide Web's collection of images to your viewers. Thanks to Google's comprehensive indexing of literally billions of images on the web and some simple decoding of URL parameters, you can create an image search tool on your website without needing to know complex scripting languages.

Instructions

Things You'll Need:

• Computer with Internet connection
• HTML editing program such as Notepad
• A live website with FTP access

Adding Google's Image Search to Your Website

1. Step 1

   Understand Google's Image Search URL. The important pieces that make up the URL you will use look like this: "http://images.google.com/images?q=searchterm." The part before the question mark references Google's Image Search address. Everything after it is the list of parameters that are used to define your particular search. The primary parameter is the "q=" parameter, which stands for "query". This is the part that includes your search terms. Additional parameters are noted below under the Advanced Parameters section.

2. Step 2

   Create a form that will pass inputted text from a text box on your site to the query parameter and submit it to Google's Image Search. You can paste the following code directly into your HTML file where you want the image search box to show up (see the References for an example of this on askdavetaylor.com):
   

   
   
   
   

3. Step 3

   Save and publish your HTML file, then test it out.

Advanced Parameters

4. Step 1

   Control the search results by defining additional parameters. Additional parameters include the following: "as_eq," "imgtype," "imgsz," "imgw," "imgh," "imgar," "as_filetype," "imgc," "as_sitesearch," "as_rights," "safe," and "as_st." Refer to http://images.google.com/advanced_image_search for the visual interface for all of these parameters.

5. Step 2

   Make the selections you want on the visual interface link, then press "Google Search" to set an advanced parameter. Copy the URL that is returned.

6. Step 3

   Find the parameters that match your settings; for example, if you limited the "Domain" to "ehow.com," then you would want a parameter that says, "as_sitesearch=ehow.com."

7. Step 4

   Create a hidden input field in your form for each advanced parameter you want to include. Do so in the following manner: , where "name" is equal to the parameter you want to include and "value" is equal to the value of that parameter.

8. Step 5

   Save and publish your HTML page and test.