Home / Articles / Creating a Custom News Search Widget Using the Google Search API

Creating a Custom News Search Widget Using the Google Search API

Article Description

The widgets provided by Google are a great way to get the functionality you’re looking for without writing any code, but sometimes there’s a need for a little more control and flexibility with layout, design, etc. Kris Hadlock explains the steps that are necessary to use the RESTful interface provided through the Google Ajax Search API in order to create a custom JavaScript Google New search widget.
Searching the Google News Search Service Using Ajax

Searching the Google News Search Service Using Ajax

We first need to ensure that the web page has fully loaded so that all the HTML elements and assets are also fully loaded before trying to access them programmatically. In order to do this, we can simply use the window.onload function to activate the news search when the page has fully loaded. The function that initializes the search will be called GoogleAPI.SearchNews. This function also sets a callback method to retrieve the JSON result set and makes the search request to the Google News Search API through our gateway.php file. In this example, the callback for the search is GoogleAPI.onNewsSearched. The gateway path will be the path of the gateway.php file with a feed argument that points to the Google News Search.

The Google search service has a number of arguments from which you can choose; the required arguments are listed in Table 1, while Table 2 lists the optional arguments.

Table 1—Required Arguments for the Google Ajax Search API

Argument

Definition

Description

v

Version

The only value available at this point is 1.0

q

Query

The search term you’re performing on the API

Table 2—Optional Arguments for the Google Ajax Search API

Argument

Definition

Description

userip

User IP

Optional, but recommended by Google

rsz

Number of results

Can have a value of small or large. small retrieves four results, and large retrieves eight results.

hl

Host language

Corresponds to the host language.

key

Application key

If this argument is supplied, it must match the passed referrer header in order to be validated. The referrer header is what we are passing in gateway.php.

start


A powerful argument that allows you to retrieve pages of results—for example, the default is 0; therefore, if you request a small result set, you’ll receive news results 0-4. However, if you want to retrieve additional news results, you can change the start to 4, which will retrieve news results 4-8. This allows us to gather random news results, create controls to navigate through pages of news results, and so on.

callback


Allows you to alter the response format and trigger a function call.

context


When supplied with the callback argument, the context alters the response format normally associated with the callback.

The optional news search specific arguments that can be used to filter results (Table 3).

Table 3—Google News Search Specific Arguments

Argument

Description

scoring

Order search results by relevance or date.

geo

An optional argument that can be used to get news results from a specific location.

qsid

An optional argument that can be used to filter results to quote type results, instead of typical news type results.

topic

An optional argument that can be used to filter results to a particular topic. The value can be any of the following options:

h - Top headlines

w - World news

b - Business news

n - Nation news

t - Science and technology news

el - Elections news

p - Politics news

e - Entertainment news

s - Sports news

m - Health news

ned

An optional argument that can be used to pull results from a specific edition. Editions are related to countries and can be defined as us, uk, fr_ca, etc.

In this example, we are using rsz=small to retrieve four results, and as the start argument we’re also using the GoogleAPI.Index property to determine from what record to receive the search results. The GoogleAPI.Index property will later be used to increase the starting point for the search in order to page through results. The required arguments—v=1.0 and q, which is currently set to “Peachpit”—are also included. The search query or q property can be changed to any value using the GoogleAPI.Query variable in the window.onload event where we are initiating all of the object properties.

With the gateway URL constructed, we can make our Ajax request to the Google Search API through a reusable method called GoogleAPI.makeRequest. This method creates the request object as a property of GoogleAPI, sets the onreadystatechange callback method, opens the request to the gateway URL we are passing as the argument, and finally sends the request. Once the request has been made, the onreadystatechange callback method is triggered through each stage of the readyState. Once it reaches 4, the response is fully loaded and the callback method we set in GoogleAPI.onNewsSearched is triggered.

4. Parsing the JSON News Result Set | Next Section Previous Section