11/20/2009
Using Google search control to Integrate Google custom search into your website
Posted by
Henry Ji
There are several ways to use Google custom search. One way to do it is using Search Control. After logging in the Google Custom Search site http://www.google.com/cse/, you can create your own search engine, add site search restrictions, configure search languauges etc.. You can then go to Preview page under Control panel menu to preview your own search engine and configurations. There is also a Statiscs page under Control panel, where you can see useful statistics about how people have searched your website.
Now you can go to Get code page under Control panel. You can just copy this Custom Search element code as below to your webpage and your website now have a custom search.
<div id="cse" style="width: 100%;">Loading</div>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
google.load('search', '1');
google.setOnLoadCallback(function(){
var customSearchControl = new google.search.CustomSearchControl('[YOUR KEY WILL BE HERE!');
customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
customSearchControl.draw('cse');
}, true);
</script>
<link rel="stylesheet" href="http://www.google.com/cse/style/look/default.css" type="text/css" />
You may want to specify UI language by changing "google.load('search', '1');" to "google.load('search', '1', {"language" : "en"});", which will display search text in the search button and more results text beside page indexes in English or any other language you like and Google supports.
If you have business account for Google custom search, you choose to remove Google branding. You can override CSS attributes of the HTML elements within search control. You can also use the CSS code from the article "CSS image replace for submit buttons" to replace the search button with an Image.
When you use Google search control, another things you need be aware of are:
- No previous and next buttons
- No total result number. The max number is 10 results * 10 pages = 100 results. If clicking the 10 page index, "more results" link will be displayed and leads to google custom search page.
If you look for more flexibility, you can use google.search.WebSearch so you can get search results from it and create UI on your own. One important feature I notice from WebSearch is that you can use google.search.search.RESTRICT_EXTENDED_ARGS to restricts a web searcher to a specific language as below:
searcher = new google.search.WebSearch()
searcher.setRestriction(google.search.Search.RESTRICT_EXTENDED_ARGS,
{ "lr" : "lang_de", "filter" : "0"});
You can find more information in Google AJAX Search API documentation here.
« Back to Blog Main Page |