How do I add a Google Images search to my site?

Sheesh, I feel typecast, like some Hollywood character actor who invariably plays the heavy in the mob crime films or the dorky computer guy or something. :-)

The problem must be that I actually like to unwrap HTML code and figure out how to add neat search boxes to Web sites. I'm sure there's an entry in the DSM IV on the strange, pathological enjoyment of reverse engineering popular Web sites!

Anyway, okay. So. Google Images.

Let's start by cracking the page and seeing what's inside...

No. Let's not. Let's do this differently. This time, let's just look at the URL generated by a search and unwrap that directly. if I search for "banana", here's the URL generated:

Most of that can be axed, as Google includes information on the browser you're running, language you're using, etc., but they aren't critical for the search to succeed.

Trim it down to the bare essentials and it looks like this:

Actually, a wee bit of testing reveals that the button value (btnG) can be omitted too, which means that in fact the URL is simply:

That's sure nice and simple!

Now, to generate that URL, you need to use a GET form and the input field needs to be named "q" to match the Google specs. This can be easily done thusly:

That's all you need for a basic Google Images search. Here, try it:

Simple enough! Now, I slipped one more thing in, adding target="_blank" as an additional attribute to the "form" tag so that the results would open in a different window. If you don't want that behavior, simply use the code as shown above.

Hope that gets you going with your own personal Google Images search feature.