As a long time Windows user, I have grown to really like the MSN.com home page and Bing search. Now I’d like to add an MSN search box to my own site. Is that possible?
You can definitely reverse engineer the search system that Microsoft uses on its popular MSN.COM site and create a similar search for your own Web page. In fact, I offer details on how to do just that for search boxes tied to Google, YouTube, eBay, IMDb and even Bing here on my site. So you could add a lot of search boxes if you really wanted! 🙂
Up to now, however, I’ve never really looked at MSN. But it’s easy. Turns out that there are two basic ways that a Web page can pass information back to the server from within a FORM, known as a GET or a POST. The latter turns out to be more complicated, but sites that use the GET method of sending form data are quite easy to reverse engineer because all the name=value pairs of the submission are exposed right in the Web site URL itself.
For example, on MSN.com if you search for “kashmir” the actual URL of the search results page is:
https://www.bing.com/search?q=kashmir&form=PRUSEN&mkt=en-us&httpsmsn=1&refig=3cea5d44599a40f1bac7058d6d1f2d42&sp=-1&ghc=1&pq=kashmir&sc=10-7&qs=n&sk=&cvid=3cea5d44599a40f1bac7058d6d1f2d42
Scary complicated, right? But wait! You can typically dump almost all of these fields because they contain information that’s not essential to a search. But I’m getting ahead of myself. Let’s hold that thought and look at the MSN search:
You’ve seen that box before, I bet. This time start typing and notice that you automatically get search suggestions from MSN:
There’s a lot of interesting data being shown here, actually, particularly if you’re interested in search engine optimization (SEO), but for our purposes I just need to share the bad news: It’s really super complicated to add search suggestions to your own copy of the MSN search box, so that will be above and beyond what we’ll be coding up.
Instead, finish a search and just for a moment bask in the glory that is Bing search results:
Okay, now that you’ve checked out the results, it’s time to look at the URL or Web page address for the search results page.
As I showed earlier with a Kashmir search, the “best player epl” search produces this gnarly URL:
https://www.bing.com/search?q=best+player+epl&form=PRUSEN&mkt=en-us&httpsmsn=1&refig=3cea5d44599a40f1bac7058d6d1f2d42&sp=-1&ghc=1&pq=best+player+epl&sc=8-15&qs=n&sk=&cvid=3cea5d44599a40f1bac7058d6d1f2d42
GET form URLs area always in the format of
url ? name=value & name= value & name=value
So you can unwind the above and see that the search itself is performed by the page https://www.bing.com/search and that the first few variable value pairs are q=best+player+epl and form=PRUSEN.
This is where you need to pull on your mad scientist lab coat and experiment. <rubs hands together>
Ready?
Let’s get rid of every single name=value pair other than the very first one that contains the actual search term. You can do this in the URL box in your Web browser easily enough:
Nice short URL? Press Enter or Return to actually hand that data to the Bing search service and… it works! You get the same search results!
So it turns out that all you need is q=query and you’re good to go. Phew. That’s easy. Now to construct a new FORM that uses all the proper variables and fields:
<form method="get" action="https://www.bing.com/search"> Search for: <input type="text" name="q" /> <input type="submit" /> </form>
That should do it. Here’s the form live:
You can clean it up with fancy formatting commands, of course, but at its most basic, that’s your solution. Now carefully copy and paste this HTML onto your own Web page or blog post and see if you can get it to work for you!
Pro Tip: I’ve been writing about HTML coding for a long, long time. Please check out some of my HTML and Web page coding help while you’re here. Thanks!
