I want to add a Google News search box to my Web site and also add some pre-made links. How do I code that?
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:
<input type=”text” name=”q” />
<input type=”hidden” name=”tbm” value=”nws” />
<input type=”submit” value=”search Google News” />
</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:
Search Google News: <input type=”text” name=”q” size=”40″ style=”border:1px solid black;padding:3px;border-radius:4px; ” />
<input type=”hidden” name=”tbm” value=”nws” />
<input type=”submit” value=”Go!” style=”border-radius:4px;” />
</form>
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 ~ez_ldquo+ez_rdquo~ 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!
I’d like to know when having a google search bar on ones website does google have any restrictions on the amount of searches one can do?