Google CSE or Custom Search Engine is an immensely powerful tool that you can provide to your visitors. It not only equips them to research and locate the right content, it even allows you to make money using AdSense. That said, an effective implementation makes sure that your visitors and you benefit the most out of this tool. If you are not familiar with Google CSE you can read more about Google CSE.

1. Use the “Search Element” option:

   The “Search Element” option gives you the most benefits. Other than providing you the most layout and customization, it keeps the visitors and searchers on your own blog instead of directing them to a Google hosted page. The Iframe option requires an additional page on your blog which again you’ll have to customize for theme design and layout. The “Search Element” allows you to show the results inline, uses the Google Ajax API thus leveraging its power and retaining the visitors on your blog. The default code offered by Google CSE looks like —

   <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', {language : 'en'});
    google.setOnLoadCallback(function(){
    var customSearchControl = new google.search.CustomSearchControl('xxxxxxxxxxxxxxxxxxxxx:xxxxxxxxxxx');
    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" />
   

2. Multiple units quirk:

   With the “Search Element” option the default code that Google gives you can conflict with another CSE units since they have the same variable names. For example if you were to use the above code twice on the same page, the object names “customSearchControl” would interefere with the second instance of the code. Make sure that if you are implementing more than two search units on the same page, you must review the copied code and rename the variables and the IDs of the html elements that you will populate with the search box and results. For example you can use a different name for the object like “mycse2″ instead of “customSearchControl”. Additionally this code draws the search form in a div with ID ‘cse’. A second instance should use a div with a different ID. Update the code accordingly. See our post in the forum for implementing more than one search units.

3. Make results open in the same window:

   Add <cse-object>.setLinkTarget(google.search.Search.LINK_TARGET_SELF); before the “draw” call to make sure that the search result links open in the same window. This avoids unnecessary new windows and tabs from opening up.

4. Limit the number of results:

   Replace customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET); with customSearchControl.setResultSetSize(google.search.Search.SMALL_RESULTSET); for 4 results and customSearchControl.setResultSetSize(google.search.Search.LARGE_RESULTSET); for 8 results.

5. Decouple the search element from the results:

   The “Search Element” option allows you to choose the layout options as per your requirements. This allows you to display the results in the full-width and compact forms or even show the results laid out in a block further away from the search element itself.

For the complete documentation head on to the Google CSE documentation to refine the search control further.

 Tweet