I see that you’ve written a helpful tutorial on how to add a Google search box to your Web site, Dave, but have you ever written something similar for Microsoft Bing? If not, can I entreat you to write one for me? Just not a big Google fan…
More people who aren’t fans of Google. Interesting. I like Bing too, fortunately, and there are some things that they’re doing with their search results that are pretty slick, including how they integrate social media connections into the results. Like Google, they also split out your search by content category, offering Web search, image search, video search, news, maps, etc.
Sure I can give you that general Bing search box, but let’s actually do the reverse engineering on Bing Image Search, to make it a bit more interesting. At the very end I’ll show you the tiny tweak needed to turn an image search into a generic Web search too. We’ll delve into some HTML but don’t panic, you can just copy and paste my last code example and it’ll work just fine.
First off, as with most search boxes, it turns out you can reverse engineer Bing search by doing a search and seeing what it produces.
This is easy. Go to Bing Search — aka www.bing.com — and here’s what you see:
To work backwards on the needed variable or variables for the search form, we need simply actually perform a search. We’ll look for the cute children’s book series “frog and toad”. Just because.
If you then look in the address bar on the browser, you’ll see this long, complex URL:
Fortunately, that can all be boiled down to the search term and nothing else. All the other variables are extraneous. The result:
That’s not too bad, is it? What you can see here is the method of the HTML form (by implication: it has to be get), the action of the form — “http://www.bing.com/images/search” — and the name of the search pattern variable — “q” — which is assigned the value of the search.
That’s all we need. Now, poof, an HTML form:
<input type=”text” name=”q”></form>
That’s the most minimal form possible and you can see where all three of those data points are utilized to make it work. it’s not much to view, though: