Custom Google Search API Setup Tutorial

Sam Deering

googlesearchapi

So today I did a little tutorial on how to setup Google Search API for your blog/website. This could be used instead of the standard search facilities usually provided in WordPress Themes. It’s really easy to setup! You can customise the search to show results only from your blog/website and other searches such as images, video, news and others (see below for full list).

Live Demo
Download Source

How to do it

  1. Get your Google API Key
  2. Put your key in the code below
  3. Customise the search (add your own domain name!)
  4. Customise the styles to suit your website
  5. Enjoy!

The JavaScript

google.load("search", "1", {"language" : "en"});

// Call this function when the page has been loaded
function initialize() {
var searchControl = new google.search.SearchControl();

// site restricted web search
var siteSearch = new google.search.WebSearch();
siteSearch.setUserDefinedLabel("jquery4u.com");
siteSearch.setUserDefinedClassSuffix("siteSearch");
siteSearch.setSiteRestriction("jquery4u.com");
searchControl.addSearcher(siteSearch);
	
//Search API Topics
searchControl.addSearcher(new google.search.WebSearch());
searchControl.addSearcher(new google.search.NewsSearch());
searchControl.addSearcher(new google.search.BlogSearch());
searchControl.addSearcher(new google.search.ImageSearch());
searchControl.addSearcher(new google.search.BookSearch());
searchControl.addSearcher(new google.search.VideoSearch());
//others
//searchControl.addSearcher(new google.search.LocalSearch());
//searchControl.addSearcher(new google.search.PatentSearch());
	
// create a drawOptions object
var drawOptions = new google.search.DrawOptions();
// tell the searcher to draw itself in tabbed mode
drawOptions.setDrawMode(google.search.SearchControl.DRAW_MODE_TABBED);
searchControl.draw(document.getElementById("searchcontrol"), drawOptions);
}
google.setOnLoadCallback(initialize);

The HTML

<p>Type in a search below!</p>
<div id="searchcontrol"></div>

The CSS

/* the width of the controls (keep same as gsc-results for flush look) */
#searchcontrol { width:600px; }
.gsc-control { width:600px; }
/* the width of the search results box; no height value = nice auto look  */
.gsc-results { width:600px; }
/* the width of the search input */
.gsc-input { width:20px; }
/* hide "powered by google" (optional) */
.gsc-branding { display:none; }
/* custom colors */
.gs-title a { color:orange; font-weight:bold; }
#searchcontrol a { color:orange; }

Developers Guide

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • Pingback: Custom Google Search API Setup Tutorial « Big Engine Media

  • sasha

    why it show result 4 item in ever page?

    • Mubarak

      Hi Sasha,

      it display by default 4 pages. If you want to more pages please add the following code after setSiteRestriction() function.

      siteSearch.setSiteRestriction(“jquery4u.com”);
      searchControl.addSearcher(siteSearch);
      siteSearch.setResultSetSize(GSearch.LARGE_RESULTSET);

      It’s working for me …For more detail please check it on http://code.google.com/apis/websearch/docs/reference.html

  • jquery4u

    Hi Sasha,

    I don’t think you can specify the number of results displayed. I think it may be based upon the height of the containing element. Sorry I couldn’t be of more help.

    Take a look at the Google APIs Console: https://code.google.com/apis/console/?pli=1#welcome: I’ll do a post on this soon when i get some spare time.

    Cheers
    Sam

  • Neeraj

    Hi,

    How can i get the whole component to work across 2 pages?
    Page 1 – will have the text box to enter search query. (Eg. index.html)
    Page 2-will show the search results. (Eg. searchResult.html)

    I have the logic to get the value from 1 page to another through GET method.

    Thanks.

    • jquery4u

      @Neeraj – I’m assuming you mean 2 pages by using an iframe for the 2nd page? You could pass the iframe a query string by modifying the src attribute. Something like this (ps haven’t tested this!):

      var iframeSrc = $(‘#iframe’).attr(‘src’);
      var searchQuery = [capture your users query and store here]
      $(‘#iframe’).attr(‘src’,searchQuery);

      then reload the iframe:
      $(‘#iframe’).contentWindow.location.reload(true);

      hope this helps
      Sam

  • chahi

    Hi,

    i want to show Paid links and Related Searches with above Demo Code
    any idea you guys have ..??

    thanks

  • Pingback: 10 Easy API Tutorials with jQuery | jQuery4u

  • Waqas Ahmed

    I implemened google search in my website but i m getting following error.

    Google is undefined… (In google chrome)

    could not complete the operation due to error 80020101. (IE)

    Please help