Edentity Web Systems
You solve creative. We crack code.
/Header/WhoWeAre.jpg
 

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:

  1. No previous and next buttons
  2. 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 |

0 Comment(s)

Leave Comment

Name:
Comment:  
 
Edentity Web Systems Inc.
Suite 201
40 Spadina Ave.
Toronto ON
M5V 2H8
Tel:
416.591.2500
Fax:
416.352.5270

From Our Blog

02/09/2010
Amazon S3 – Now with Versioning! Posted by Joel Varty
02/02/2010
01/19/2010
411 Length Required in Firefox 3 Posted by Andre Small
Home | Who We Are | What We Do | Clients & Brands | Careers | Contact

Copyright © 2010 Edentity Web Systems Inc. Privacy Policy