Web Design Archive

Google was offering free search modules for websites but they did not allow to modify the look of the results that much before. With the “Google AJAX Search API”, now we have the ability to modify the look of the results. Even better, you can be more creative with the results queries.

In this post I will show you how to create a tabbed search results for your site. First thing to do is to sign-up and get your Google AJAX API.
There is a very useful “Developer’s Guide” and samples of the codes to play around in the playground.

In this blog, I am using the tabbed version of Google Search and here is how I accomplish. (At the time of writing this post, content of the blog was carried from another domain that’s why Google hasn’t indexed the pages yet. So that search results will be empty for this blog for a while.)
There are 3 pieces of code, 1 for the header section of your HTML, 1 for the search box and 1 for the results area.

Code for the header section;

This piece of code has to be in the head section of your HTML before the “</head>” tag.

<script src="http://www.google.com/jsapi?key=YourAPI" type="text/javascript"></script>
<style type="text/css">
#searchResults .gsc-control { width : 500px; }
.search-control { margin: 20px; }
</style>
<script language='Javascript' type='text/javascript'>
//<![CDATA[
// Load Search and Feed APIs
google.load("search", "1");
function OnLoad() {
var controlRoot = document.getElementById("searchResults");
// Create a search control
var searchControl = new GSearchControl();
searchControl.setLinkTarget(GSearch.LINK_TARGET_SELF);
searchControl.setResultSetSize(GSearch.LARGE_RESULTSET);

var searchFormElement = document.getElementById("searchControl");
var drawOptions = new GdrawOptions();
drawOptions.setSearchFormRoot(searchFormElement);
drawOptions.setDrawMode(GSearchControl.DRAW_MODE_TABBED);

// this is where you create your tabbed search results
// for every URL tab, you have to use the search address and the tab label
        // This Blog
      var searcher = new GwebSearch();
      searcher.setSiteRestriction("http://www.lycie.com");
      searcher.setUserDefinedLabel("Lycie");
      searchControl.addSearcher(searcher);

      // google also allow you to search the entire web
      searcher = new GwebSearch();
searcher.setUserDefinedLabel("Web");
      searchControl.addSearcher(searcher);

      // search all other blogs
      searcher = new GblogSearch();
searcher.setUserDefinedLabel("All blogs");
      searchControl.addSearcher(searcher);

// draw it
searchControl.draw(controlRoot, drawOptions);

}
google.setOnLoadCallback(OnLoad, true);
//]]>
</script>

There are 3 important things to do in this code.

1. Sign up and get your Google AJAX Search API. Put your API key where it says YourAPI in the code.

   <script src="http://www.google.com/jsapi?key=YourAPI" type="text/javascript"></script>
   <style type="text/css">

2. CSS styling and tab creation are handled by Google. But if you want to use more styling use the CSS section in the code.

   <style type="text/css">
   #searchResults .gsc-control { width : 500px; }
   .search-control { margin: 20px; }
   </style>

3. Creating the tabs for the search results. Whenever somebody search my blog, search results will be displayed in 3 tabs, Lycie – results from my site, Web – results from the web and All Blogs – Results from all the blogs on the web.

Here is how I do. For every URL tab you want to create use the code below.

var searcher = new GwebSearch();
searcher.setSiteRestriction("http://www.lycie.com");
searcher.setUserDefinedLabel("Lycie");
searchControl.addSearcher(searcher);

There are 2 things to change in this piece of code in order to create new tabs.

searcher.setSiteRestriction("http://www.lycie.com");
searcher.setUserDefinedLabel("Lycie");

This is where you limit your search results. In other word, you tell Google to display results only from this URL. Here I say, limit this tab’s results for this URL “http://www.lycie.com” and use the label “Lycie”

Limiting your results from an URL means, only results from that URL will be displayed in that tab. This is very useful if you have different sections on your site. Common usage for this is Forums and Galleries. If you have a forum on your site, most likely its URL is www.example.com/forums. By using the code below, you can create another tab just for results from your forums.

searcher.setSiteRestriction("http://www.example.com/forums/");
searcher.setUserDefinedLabel("Forums");

Google does not only allow URL restrictions. Google also allows you to search the entire web for videos, blogs, news, images, books and patents. Check the AJAX API’s Playground for more coding tips.

Code for the search box

Put this into your HTML wherever you want to show your search box.

<div id="searchControl">Loading...</div>

Code for the search results

Put this into your HTML wherever you want to show your search results.

<div id="searchResults">Loading...</div>

That’s it. Enjoy your new search engine.