Home / Articles / Create a Custom YouTube Widget Using the Google Search API

Create a Custom YouTube 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 and design. 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 video widget.
Searching the Google Video Search Service Using Ajax

Searching the Google Video Search Service Using Ajax

We’ll start by making sure the web page has fully loaded by using the window.onload function to activate the video search. This ensures that all the HTML elements and assets are fully loaded before trying to access them programmatically. The function that initializes the search will be called GoogleAPI.SearchVideos. This function also sets a callback method to retrieve the JSON result set and makes the search request to the Google Video Search API through our gateway.php file. In this example, the callback for the search is GoogleAPI.onVideosSearched. The gateway path will be the path of the gateway.php file with a feed argument that points to the Google Video Search.

The video search service has a number of arguments that you can choose from; 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 video results 0-4. However, if you want to retrieve additional video results, you can change the start to 4, which will retrieve video results 4-8. This allows us to gather random video results, create controls to navigate through pages of video 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.

There is only one optional video search specific argument that can be used to filter results (Table 3).

Table 3—Google Video Search Specific Argument

Argument

Description

scoring

Order search results by relevance or date.

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 what record to receive the search results from. 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.

Once the gateway URL is constructed we can make the Ajax request to Google. The request is made 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.onVideosSearched is triggered.

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