After playing around with this Google's Ajax API Search hack for a week, I'm going to release it here, with the hope that it might be of beneficial to some of my readers.

Not as hurry as the last time, this time I take the "Hello World" approach, starting to learn what is this new API that Google is giving us. Fortunately, the official Google site provides plenty of examples. I took the first one, and by luck they named it "Hello World" as well, after the famous example that Brian Kerninghan and Dennis Richie gave in their book "The C Programming Language." You can see these Google tutorials here: http://code.google.com/apis/ajaxsearch/samples.html

Their "Hello World" is really clean and neat too: http://www.google.com/uds/samples/apidocs/helloworld.html

I wanted the "Hello World" to work on my site, but with a twist, that it must be a widget. I found the "HTML/Javascript" widget fits perfectly, since you could change the search location or initial search by changing the text in the widget's edit form, instead of going inside the code. Here is the result on my test site:

http://deconstructingbetablogger.blogspot.com/

Note: the earlier bug of the absence of navbar is solved, thanks to Hogashi and Brainiac. Thanks.

If you like to have this on your site/test site, then follow these simple instructions:

1. Get a key:

http://code.google.com/apis/ajaxsearch/signup.html

2. Create a "HTML/Javascript" widget:

Go to Template->Page Elements. Click on the sidebar's "Add Page Element", then click on "HTML/JavaScript". Add a location in the title, and something meaningful in the content, then save.



3. Go to Template->Edit HTML (remember to check on Expand Template Widgets)

a) Add this line in bold:

]]></b:skin>
<link href='http://www.google.com/uds/css/gsearch.css' rel='stylesheet' type='text/css'/>

</head>



b) Look for the widget you just created in step 2, probably named "HTML1", and replace it entirely (anything between and including the two <b:widget> and </b:widget> tags) with this code:


<b:widget id='HTML1' locked='false' title='New York, NY' type='HTML'>
<b:includable id='main'>
<div id='searchcontrol'>Loading .....</div>
<script src='http://www.google.com/uds/api?file=uds.js&amp;v=1.0&key=ABQIAAAA3JLs6Hnniw7MynpQ' type='text/javascript'/>
<script type='text/javascript'>

var local="<data:title/>";
var initSearch="<data:content/>";



// Create a search control
var searchControl = new GSearchControl();

// Add in a full set of searchers
var localSearch = new GlocalSearch();
searchControl.addSearcher(localSearch);
searchControl.addSearcher(new GwebSearch());
searchControl.addSearcher(new GvideoSearch());
searchControl.addSearcher(new GblogSearch());
searchControl.addSearcher(new GnewsSearch());

// Set the Local Search center point
localSearch.setCenterPoint(local);

// tell the searcher to draw itself and tell it where to attach
searchControl.draw(document.getElementById("searchcontrol"));

// execute an inital search
searchControl.execute(initSearch);

</script>
</b:includable>
</b:widget>


c) replace the bold key text in step 3b with the key you acquired in step 1.

Here is the result on this test site.

Now if you want to change the search locations (New York, NY and World Trace Center,) change it in the Page Element interface, not in your actual code.

Let me know if this works/not works on your site.