Create a Custom YouTube Widget Using the Google Search API
- Making a Remote Request to the Google API
- Creating a Google API JavaScript Object
- Searching the Google Video Search Service Using Ajax
- Parsing the JSON Video Result Set
- Rendering the results as HTML
- 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 default widgets which can easily be embedded into any web page. Google’s widgets 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 and the information you want to present. Google provides a RESTful interface and refers to it as an offering for Flash and other non-JavaScript environments, but with a tiny bit of code we can access this interface remotely with JavaScript in order to create our own custom widget.
To 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 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 video widget. The sample code used in this article is available for download here.
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 the cURL library, which we’ll be using to access the Google Video Search service, retrieve a JSON result set, and return it to JavaScript via Ajax.
Listing 1: Bridging the Bap 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 and have it be a local response for JavaScript.
In order to do this, we need to first make sure 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.
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 the CURLOPT_URL, which is simply the URL of the remote content— in this case, it will be represented by our feed argument. Because we know this is a search, we’ll replace 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 that will be used as the response to JavaScript.
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.
Last we’ll use curl_exec to perform the session, which returns the results from the request; then we’ll 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 requesting JavaScript object via Ajax.