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.
Rendering the Results as HTML

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).

Listing 3: The GoogleAPI Object Renders the Widget in the HTML File (index.html)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> <html xmlns="http://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.

6. Additional Resources | Next Section Previous Section