Adding Google Search to Your Website

, ,
Want to master JavaScript in a week? Buy Xah JavaScript Tutorial.

This page tells you how to add a Google search widget to your website.

New Search Box

Go to Google customized search home page at http://www.google.com/cse/. Then, you can get the code. Here's how it looks:

google custom search

The code is a single line of JavaScript, like this:

<script type="text/javascript" src="…"></script>

The src= value looks like this: (linebreak added by me for easy reading)

http://www.gmodules.com/ig/ifr?url=
http://www.google.com/coop/api/011457790424202083459/cse/4gyr8njd5kg/gadget&amp;
synd=open&amp;
w=320&amp;
h=75&amp;
title=Xah+Lee+org+Search+Engine&amp;
border=%23ffffff%7C3px%2C1px+solid+%23999999&amp;
output=js

However, there are several major problems for me to adopt it.

Besides these bad points for me personally, there are few strong positive points for it, as with most of Google's technology. This search box is not just a inert search box. It is actually a widget, that people can add to their blogs or websites. So, it's a viral distribution model, good for site owner as well as google. This search box actually has its own home page, so that site owners can customize and add contributors and stuff.

On the tech side, Google is really the king of JavaScript.

Update: Now the Google custom search engine doesn't show those ugly link and buttons. It's just a plain search box with “Powered by Google” logo. The new look is similar to their “Custom Search Element”, like this:

google custom search element

Google Web Elements: Custom Search Element

,

I asked on Google Webmaster forum, for the solution of a simple search box. One Google employee Jonathan Simon provided helpful answer. The answer is 《Google Custom Search Element》 at http://www.google.com/webelements/customsearch/.

Here's how it looks:

google custom search element

Here's the code:

<!-- Google Custom Search Element -->
<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(){
    new google.search.CustomSearchControl().draw('cse');
  }, true);
</script>

The search results are inserted directly into your page under the search box. Nice.

You can set the style="width:100%;" to 50%. With that, the search result all becomes 50% width too.

This search box works only for accessing a site online. It does not work for web pages that are saved to disk. If you save a web page containing that search box, then, view the page offline and try to search, it will result in a loading error.

This is a problem for some of my projects. For examples, the GNU Emacs Lisp Reference Manual or classical literature works such as The Arabian Nights and Shakespeare, i provide a download version so that readers can read offline. However, that also means the search box will not be functional when used offline.

blog comments powered by Disqus