Creating a Custom News Search Widget Using the Google Search API

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

Table 3—Google News Search Specific Arguments

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.

Parsing the JSON News Result Set

The results that are returned as the response from the news search are accessible via the request object. To access these results, we need to access the Ajax request’s responseText property and then parse the results into a valid JSON string. With the jsonparser included, this is very simple: all we do to parse the response as JSON is:

var gnews = this.request.responseText.parseJSON();

With the parsed response, we can access the results, which are always included in a responseData object. The responseData object includes an array named results, which can be iterated to access the properties of each news result and create an HTML structure to render the news results onto the web page.

var results = gnews.responseData.results;

Table 4—Specific Google News Search Properties

When the news service has been searched and the results have been parsed into JSON, we can start to iterate and render the results as HTML. The example we’re going to create is a simple list of news titles with the publisher, published date, and a link to related stories, if any exist. Each post will have its own containing div element that is tied to a CSS class named post.
To render the titles, we are creating an anchor tag that links to the unescapedUrl property and has an innerHTML value of titleNoFormatting property. This will give us a title that links to the original story in a new window. To render the publisher and published date, we’ll create an italic element and set the innerHTML to the publisher and publishedDateproperties. With the title and publisher/date elements created, we can add them to the post div. Next, we’ll check to see if there are any related stories to the current news result by checking the value of the clusterUrl property. If this property has a value, an anchor tag is created that links to the clusterUrl and is then added to the post div. Once the post is complete, it’s finally added to the gNews element.
To page through results, we simply add an anchor element that will be used to increase thestart argument in the search. To create this functionality, we create an onclick event that increases the GoogleAPI.Index property by four and triggers a new search via the GoogleAPI.SearchNews function. The reason we increase the GoogleAPI.Index property by four is because there are four results in the rsz argument because it is set to small, so we want to get the next four results each time we click more news.

document.write('<script type="text/javascript" src="assets/js/jsonparser.js"></script>');
var GoogleAPI = new Object();
GoogleAPI.SearchNews = function()
{
    GoogleAPI.callback = GoogleAPI.onNewsSearched;
    var gateway = "service/gateway.php?feed="+ escape("https://ajax.googleapis.com/
      ajax/services/search/news?v=1.0&rsz=small&start="+
      GoogleAPI.Index +"&q=")+ GoogleAPI.Query;
    GoogleAPI.makeRequest(gateway);
}
GoogleAPI.onNewsSearched = function(request)
{
    var divNews = document.getElementById('gnews');
    divNews.innerHTML = '';
    if(this.request.responseText)
    {
        var gnews = this.request.responseText.parseJSON();
        var results = gnews.responseData.results;
        if(results.length > 0)
        {
            for(var i=0; i<results.length; i++)
            {
                var post = document.createElement('div');
                post.className = 'post';
                var postHref = document.createElement('a');
                postHref.href = results[i].unescapedUrl;
                postHref.className = 'title';
                postHref.target = "_blank";
                postHref.innerHTML = results[i].titleNoFormatting;
                var postDate = document.createElement('i');
                postDate.innerHTML = 'from '+ results[i].publisher +
                 ' posted '+ results[i].publishedDate;
                post.appendChild(postHref);
                post.appendChild(postDate);
                if(results[i].clusterUrl)
                {
                    var clusterHref = document.createElement('a');
                    clusterHref.href = results[i].clusterUrl;
                    clusterHref.className = 'related';
                    clusterHref.target = "_blank";
                    clusterHref.innerHTML = 'Related Stories';
                    post.appendChild(clusterHref);
                }
                divNews.appendChild(post);
            }
            var moreBtn = document.createElement('a');
            moreBtn.href = "#"+(GoogleAPI.Index+4);
            moreBtn.className = "more";
            moreBtn.innerHTML = "More News &gt;";
            moreBtn.onclick = function() { GoogleAPI.Index+=4;
             GoogleAPI.SearchNews(); }
            divNews.appendChild(moreBtn);
        }
        else GoogleAPI.ThrowError("There were no news results");
    }
    else GoogleAPI.ThrowError("There was an error receiving the news feed");
}
GoogleAPI.makeRequest = function(gw)
{
    this.request = (window.XMLHttpRequest) ? new XMLHttpRequest():
     new ActiveXObject("Microsoft.XMLHTTP");
    this.request.onreadystatechange = function() { GoogleAPI.checkReadyState(); };
    this.request.open('GET', gw, true);
    this.request.send(gw);
}
GoogleAPI.ThrowError = function(msg)
{
    alert(msg);
}
GoogleAPI.checkReadyState = function()
{
    switch(this.request.readyState)
    {
        case 1: break;
        case 2: break;
        case 3: break;
        case 4:
            this.callback(this.request);
}
}
window.onload = function()
{
    GoogleAPI.Index = 0;
    GoogleAPI.Query = "Peachpit";
    GoogleAPI.SearchNews();
}

Rendering the Results as HTML

To render the results on a web page, we’ll need to create an HTML file that embeds the GoogleAPI.js file we just created. Because the GoogleAPI object is self-contained, there are no other files that need to be included, but we do need to create a div element with an id of gnews in order to write the widget to the HTML file (Listing 3).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Creating a Custom News Search Widget using the Google Search API</title>
<script type="text/javascript" src="assets/js/GoogleAPI.js"></script>
<link type="text/css" rel="stylesheet" href="assets/css/googleapi.css" />
</head>
<body>
<div id="gnews">Loading news posts...</div>
</body>
</html>

We’ve also included a CSS file called googleapi.css. The CSS offers a lot of flexibility, allowing us to control the design of the results in any way we choose.

Additional Resources

If you’re interested in learning more about the Google Ajax Search API, JSON, or the PHP cURL library, you can check out the following resources for more information.
The Google Ajax Search API: https://code.google.com/apis/ajaxsearch/documentation
JSON (JavaScript Object Notation) and the JSON Parser: https://www.json.org
PHP cURL (Client URL Library): https://php.net/manual/en/book.curl.php