Add a Google News Search Box to your Site?

If you’re so inclined, you can certainly go to Google News, crack open the source code and figure out exactly what’s going on with the search form. That’s the hard way because Google has a lot of smarts in the search boxes, including hints and matches as you type. Those are nice, but complicated.

Instead, I’m a fan of reverse engineering the problem: Figure out the data needed to get the search results page to show matches for a given search and you can unwind the results and identify exactly what’s needed.

To start, therefore, you need to pop onto Google News and do a search. Let’s do a quick news search for actor Chris Evans.

On the Gnews home page, there’s a nice big search box on the top:

Type in “Chris Evans”, click on the magnifying glass button and you’ll get the results of the search:

The important thing here is the URL, actually, not any of the code on the page itself.

A copy and paste reveals this is the full URL of the search results page:

We can unwrap that to the following:

• hl=en
• gl=us
• tbm=nws
• authuser=o
• q=chris+evans
• oq=chris+evans
• gs_l=really long sequence of stuff

With a bit of experimentation, it turns out that you only need two of these fields: “tbm” to specify that it’s a news query, and “q” to specify the query string. That makes the URL a lot less overwhelming:

And it gives us everything we need to create a quick and easy HTML search form:

Let’s give that a whirl, shall we? Here’s the search box, live:

Did you try it? Not glamorous in appearance, for sure, but functional!

Now let’s pretty it up just a bit so it’ll be something you’d want to actually add to your site:

And the result, with its groovy blue background:

That’s it! Just copy the above HTML and make sure you paste it into your page editor in Source or Raw or HTML mode.

And, finally, since you know the short URL format, you can always pre-build any search pattern you’d like by replacing “chris+evans” with something else. Like “captain+america”:

Just make sure you remember to use the “+” to replace any spaces in the search phrase. Then you can also just sprinkle them into your regular text too, like this: Get breaking news about Captain America with a click!