Creating a Google Image Widget Using the Google Search API
- Making a Remote Request to the Google API
- Requesting Remote Results from Google with Ajax
- Parsing the Response
- Rendering the Results
- Summary
- Additional Resources
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
The Google Ajax Search API is a powerful JavaScript library that provides some default widgets which are easily embedded into any web page. 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. For this, Google provides a RESTful interface that supports the GET method with a JSON encoded result set as the response format.
Google refers to this response format as an offering for Flash and other non-JavaScript environments, but it can be indirectly consumed by JavaScript for parsing and creating your own custom widget. To indirectly consume the Google result set using JavaScript, it takes a few additional steps and a little knowledge of object-oriented JavaScript, but it lends a lot of control over the final product.
In order to make a remote request using Ajax, it is necessary to create an intermediate file that can retrieve and return the result set from Google and in turn make it accessible to JavaScript through Ajax. In this article, we will be using PHP and cURL to access the RESTful interface, which will return the JSON result set from Google to JavaScript. This article (and its sample code) will explain 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 Image widget.
Making a Remote Request to the Google API
In order to access an external URL with Ajax, it is necessary to create what I like to call a bridge or gateway file, which acts as an intermediate access point between JavaScript and the external destination (see Listing 1). PHP can access remote files using a function called file_get_contents or using the cURL library. Either option would work in this scenario, but we will be using cURL to access the Google Image Search service, retrieve a JSON result set, and return it to JavaScript via Ajax.
Listing 1: Bridging the gap between Ajax and the Google Ajax Search API (gateway.php)
<?php
header("Content-Type: application/json");
$feed = (isset($_REQUEST['feed'])) ? $_REQUEST['feed'] : '';
if(!empty($feed) && is_string($feed))
{
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, str_replace(" ", "%20", $feed));
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_REFERER, 'http://www.yourdomain.com');
$results = curl_exec($ch);
curl_close($ch);
echo $results;
}
?>
In this example, the cURL library allows you to create a connection to a remote server and return the results, which allows us to make that external request. In order to do this, we first ensure that the result set returned is seen as JSON; therefore, the content-type header is set to application/json.
Next, we’ll look for an argument named feed; if this argument doesn’t exist, then we’ll simply ignore the request and not return anything. This lends us some bit of security by making sure that whoever calls this gateway is required to at least offer the feed argument. On the other hand, if the feed argument does exist, we’ll use it to tell PHP where to access the remote content via cURL.
To use cURL, we first initialize the object using curl_init; then we set a few options. The first option is CURLOPT_URL—the URL of the remote content—which in this case will be represented by our feed argument. Because we know this is a search, I’ve replaced any spaces between words with URL-encoded spaces to avoid any issues. Next, we set CURLOPT_RETURNTRANSFER to true in order to return the results from the cURL execution. The final option we’ll need to set is the CURLOPT_REFERER, which sets the referrer for the HTTP request. It’s important to set this option because the referrer is required by the Google Search API to identify your application. Be sure to replace the placeholder copy http://www.yourdomain.com with your actual domain to meet Google’s requirements.
Finally, we use curl_exec to perform the session, which returns the results from the request. We then close the session using curl_close and echo $results to the page. The results that are printed to the page are then returned as JSON to the requester, which in our case will be a JavaScript object via an Ajax request.