How to add a Google search box to a web page
19 October, 2008
Adding a Google search box to your website is just about as easy it was to add YouTube videos to your website. After a little bit of digging around the Google site, we find that Google is giving away the code to add the search box to your site!
This is the code Google gives us:
<!-- Use of this code assumes agreement with the Google Custom Search Terms of Service. -->
<!-- The terms of service are available at /coop/docs/cse/tos.html -->
<form name="cse" id="searchbox_demo" action="http://www.google.com/cse">
<input type="hidden" name="cref" value="" />
<input type="hidden" name="ie" value="utf-8" />
<input type="hidden" name="hl" value="" />
<input name="q" type="text" size="40" />
<input type="submit" name="sa" value="Search" />
And now adding the Google search bar to your web page is as easy as pasting that code in where you want it. The way it appears on the page is shown below:
Customising the search box (a little, within Google's guidelines - these guidelines, and these ones...) is easy too. What we are going to do is style the button to match the others on our site and change the text on the button.
To style the button, we simply add out predefined class: class="form_button". And to change the text we simply change the value attribute to be whatever we want. It looks like this:
<input type="submit" name="sa" value="Search with Google" class="form_button" />
So our implementation can be found on our search page, and looks like this:
Google gets its search results from pages linked to by the page the search is on, as well as its cached results for that domain. So, the search on this article page in particular is inaccurate as it brings up a host of results from Google itself, due to the preceeding links to Google in the text. However, the one implemented on our Search page does a much better job of it.
To finish off, it is worth noting that Google provides a lot more options through its paid service, Google Site Search. These features allow you to keep the search results on your domain, add a custom header and style the results to match your theme - but it comes with a price.