I saw your article about adding an eBay search box to your site – very cool – and would like to find out how I can add a search box for Google’s Froogle shopping service to my page. Ideally, I’d like to have it open up in a new window when someone does a search. Can you help me out?
You’ll want to take the same basic steps that I showed in my article about Adding an eBay search box to your page, but let me step through it directly.
First step is to go to the page that has the search box you want, view the source code and try to isolate exactly what section of code powers the search box itself. That’s usually pretty easy as it’s wrapped with <form> and </form>. When I did that on the Froogle page, however, it turns out that the HTML is full of JavaScript, CSS and other stuff that’s rather a huge distraction.
In this case, therefore, I’m going to do something a bit different and reverse engineer the form. Since it’s using a method=”get” (that is, sending its arguments via the URL) it’s easy to do this: Search for something, then look at the resultant URL.
I searched for teapots and here’s the URL of the search results page on Froogle:
We can get everything we need from this URL. Here’s this same information poured into a rudimentary form:
<input type=”text” name=”q” />
<input type=”submit” name=”btnG” value=”Search Froogle” />
</form>
Hopefully you can see how the URL became the “action”, the name of the search variable (“q”) became the name of the text input variable, and the submit button was given the name “btnG” and the value of “Froogle Search” so that the resultant query would be in exactly the same form as generated from the Froogle home page?
One small refinement: add target=”_blank” to the form tag and you’ll ensure that the search results appear in a new window.
Let’s test it out:
Nice! Now, a few refinements to make it look a bit better, yes?
Here’s what I did:
target=”_blank”
style=”border:1px solid #669;padding:4px;background-color:#cfc;
width:350px;font-weight:bold;text-align:center;”>
What would you like to buy today?
<input type=”text” name=”q” />
<input type=”submit” name=”btnG” value=”Search Froogle” />
</form>
Hope that gets you going with Froogle!
PLIS HELP ME
hello sir, i am a student of web Design..i want to add a link on my webpage..like “EDUCATION”..when user click on this link he will get other links from google search..on a special form or table on my webpage..is this possible..if not please give any suggestion to do it please..help me
Hi Dave,
I hope it’s OK with you, I just tweaked your froogle search box code to create a google images search box. I’ve been looking everywhere for help with this and am endlessly greatful to you for your brilliant and clear information! Not only do I now have a google images search box, but I also understand how it works 🙂
Thanks again,
Ellie
Ive been searching and searching. I see “how to make google search my site” and I see “how to add a froogle search” but I dont see “how to make froogle search my site”. Google and Froogle seem to do things different so editing one to work with the other doesnt seem to do it.