Industry guru Dave Taylor offers tech support on technical and business topics, including iPhone, iPod, Microsoft Windows, Sony PSP, cellphones, online advertising, CSS, Web design, business, Unix, Linux, SEO, Mac OS X, and shell script programming.     


Add a Bing Search Box to my Web Site?

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...


Dave's Answer:

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:

http://www.bing.com/images/search?q=frog+and+toad&go=&qs=n& form=QBIR&pq=frog+and+toad&sc=8-13&sp=-1&sk=

Fortunately, that can all be boiled down to the search term and nothing else. All the other variables are extraneous. The result:

http://www.bing.com/images/search?q=frog+and+toad

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:

<form method="get" action="http://www.bing.com/images/search">
<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:

Not even a submit button! You can try it, though: enter a search term, then press Enter or Return on your keyboard.

Let's make it a bit more interesting, shall we?

First off, a submit button is easily added, as is a preface that explains what the search is:

Look for: on Bing Image Search.

Now let's add a box around the entire search, and change the background color just a little bit to make it stand out:

&nbsp; Look for: on Bing Image Search.

That looks good! Here's the code I used to create that search box:

<form method="get" action="http://www.bing.com/images/search" target="_blank"
style="border:1px solid black; background-color: #ddf; border-radius:2px;padding:3px;">
&nbsp; Look for: <input type="text" name="q"> on Bing Image Search.
<input type="submit" value="Go!">
</form>

I made one additional tweak by adding the &nbsp; character entity: it's a non-breaking space and forces the Web browser to have a bit of blank space before the words "Look for" so that it's not too close to the left margin. Easily removed if you'd prefer.

Anyway, that's the code you'd need for a simple Bing Image Search box on your site, and it even looks rather pretty.

To make it a generic Web search is incredibly easy. Simply remove "/images" from the 'action' element of the form. Like this:

<form method="get" action="http://www.bing.com/search" target="_blank"
style="border:1px solid black; background-color: #ddf; border-radius:2px;padding:3px;">
&nbsp; Look for: <input type="text" name="q"> on Bing Search.
<input type="submit" value="Go!">
</form>

That's it. Want to switch to video search? Replace "/images" with "/videos". Search for news articles? Use "/news". Boy, that's easy.

Hope that helps you out!


More Useful HTML, JavaScript and Web Site Programming Articles:
✔   How to Create Predefined Google Image Search Links?
Thanks for the Amazon URL [see Creating Amazon Search Links]. That worked beautifully. In fact, I sent you $5.00 for coffee in thanks....
✔   Can I embed a Facebook search box on my blog site?
I've seen your articles about how to add a Twitter or Google search box on a Web page, but I have a tougher...
✔   Can I use CSS for drop shadows on my blog?
I want to give my site a bit of a facelift and add some neat graphical elements. One of which is drop shadows....
✔   How can I embed interactive photo panoramas on my site/blog?
I read through your blog entry about how to take panoramic photos with iOS 6 and an iPhone 5 and got enthused. I've...
✔   How can I create a Twitter search URL shortcut?
I'd like to add a few Twitter search links to my Web site. Is that possible, or does Twitter prohibit this sort of...

Let's stay in touch!
Sign up for my weekly AskDaveTaylor Newsletter and you'll receive even more tech and gadget help right to your inbox, along with exclusive news and industry updates. It's good stuff. I promise!
    Enter your name: and your email addr:  





Categorized: HTML, JavaScript and Web Site Programming   (Article 10421, Written by )
Tagged: bing search, form examples, google search, html form example, microsoft bing, reverse engineering, search html
Previous: Malware virus DNSChanger could kill your Internet connectivity
Next: Find my MacBook with "Find My iPhone" Service?




Reader Comments To Date: 1

Metje Perea said, on July 10, 2012 12:30 AM:

More people who aren't fans of Google.

Starbucks coffee cup I do have a lot to say, and questions of my own for that matter, but first I'd like to say thank you, Dave, for all your helpful information by buying you a cup of coffee!

I do have a comment, now that you mention it!











I will never send you any unsolicited email. Ever.






Check This Out Too...

 
Look for Answers
Need Help? Ask Dave Taylor!


Follow Me on Pinterest

Find Me on Google+
ADT on G+
© 2002 - 2013 by Dave Taylor. All Rights Reserved.

Note: This web site is for the purpose of disseminating information for educational purposes, free of charge, for the benefit of all visitors. We take great care to provide quality information. However, we do not guarantee, and accept no legal liability whatsoever arising from or connected to, the accuracy, reliability, currency or completeness of any material contained on this web site or on any linked site. Further, please note that by submitting a question or comment you're agreeing to my terms of service, which are: you relinquish any subsequent rights of ownership to your material by submitting it on this site. My lawyer says "Thanks".
"Ask Dave Taylor®" is a registered trademark of Intuitive Systems, LLC.