In order to restore my integrity (see comments), I have decided, against my completely subjective opinion, to show you how to add Google’s search box to your site.
Keep in mind that my previous post on this subject, Adding Search To Your Site (In 5 Minutes), was written using the Live Search box for one simple reason:
It’s easier than using Google.
Even Dave Taylor, a well-known and respected blogger, feels that Google’s “HTML samples could be cleaned up a bit, usually, so I’ve also recast it as proper XHTML rather than somewhat sloppy HTML.”
Why is it sloppy? Why is not that intuitive? Because Google also offers this service for a fee, and most every way you search for a “Google Search Box” leads you to the paid service. Check this out:
Having Said All That…
Here’s how we implement the Google AJAX search box on your site. Start by heading over to the sign up page.
1. Create an AJAX Search API Key
You need to generate an API key that will authenticate you each time that the search service is called. If you have more than one site, you will need more than one API key. Check the box and enter the URL to get your key.
2. Copy the HTML they provide you
We are immediately provided with some HTML for a “sample” page to get us started. It basically contains two javascript <script> blocks, and a <div> that needs to be placed in your page’s <body>.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>My Google AJAX Search API Application</title>
<script src="http://www.google.com/jsapi?key=[redacted]" type="text/javascript"></script>
<script language="Javascript" type="text/javascript">
//<![CDATA[
google.load("search", "1");
function OnLoad() {
// Create a search control
var searchControl = new google.search.SearchControl();
// Add in a full set of searchers
var localSearch = new google.search.LocalSearch();
searchControl.addSearcher(localSearch);
searchControl.addSearcher(new google.search.WebSearch());
searchControl.addSearcher(new google.search.VideoSearch());
searchControl.addSearcher(new google.search.BlogSearch());
// Set the Local Search center point
localSearch.setCenterPoint("New York, NY");
// Tell the searcher to draw itself and tell it where to attach
searchControl.draw(document.getElementById("searchcontrol"));
// Execute an inital search
searchControl.execute("Google")'
}
google.setOnLoadCallback(OnLoad);
//]]>
</script>
</head>
<body>
<div id="searchcontrol">Loading...</div>
</body>
</html>
This was the differentiator for me. I now need to take this sample code apart, moving the javascript to one part of my code, and adding a div to another part. Not everyone can look at a chunk of HTML and figure out where all of the pieces are supposed to go. There’s a link to the API Documentation, but to a non-developer, that page might be even scarier.
3. Customizing the control.
At this point, we have a search box that searches for the term “Google,” and uses “New York, NY” as our “local” location. We need to change those values, at a minimum. But if that’s all we change, we’ll still be returning results from the entire Internet, not just our website.
In order to get this control to search ONLY our website, we’re going to have to start reading the API Documentation. Which means understanding the Google API Class Library, which means having a respectable background in understanding software.
All of this adds up to a control that could be very useful, but just falls short in comparison to the Live alternative. Here’s how you do it though…
var siteSearch = new google.search.WebSearch();
siteSearch.setUserDefinedLabel("Blankenthoughts");
siteSearch.setUserDefinedClassSuffix("siteSearch");
siteSearch.setSiteRestriction("jeffblankenburg.com");
searchControl.addSearcher(siteSearch);
Why the search engine is actually irrelevant
Several of the commenters on my previous post felt that I was “snubbing” Google by not discussing their search box option, and that Google was the only “true” search provider out there. I contend that in this scenario, where I am only searching through the pages of my site, the search engine doesn’t matter.
Live Search, Google, and Yahoo! are all going to have my pages indexed. All three of them are capable of bringing back the most relevant results for my search terms. So why does it really matter what search engine you’re using?
For that matter, what criteria are you using to determine which search engine is the “best?” Live Search and Yahoo both bring me very relevant results when I use them as a search engine. What is Google providing you as a search engine that Live and Yahoo aren’t? I’m truly interested to start a discussion here. Sell me on why I should use Google over one of the other guys. I’m always open to a convincing argument.
JEFF BLANKENBURG 
Leave a Reply