How to add an integrated Google search to the website

google-custom-searchsearch

Basically I have a website. I have a properly setup sitemap so I assume Google knows about all of my pages. And I've seen on some sites, the search form leads to a page with the shell of the original site but the results are clearly provided by Google. Similar to codinghorror.com's search, however his results aren't shown within his website's layout.

Any idea what I'm talking about or how to achieve this?

Best Solution

Nov. 2008: Like this (but you will find a more up-to-date 2012 example here)

<form method="get" action="http://www.google.com/search">

<div style="border:1px solid black;padding:4px;width:20em;">
<table border="0" cellpadding="0">
<tr><td>
<input type="text"   name="q" size="25"
 maxlength="255" value="" />
<input type="submit" value="Google Search" /></td></tr>
<tr><td align="center" style="font-size:75%">
<input type="checkbox"  name="sitesearch"
 value="askdavetaylor.com" checked /> only search Ask Dave Taylor<br />
</td></tr></table>
</div>

</form>

For displaying the results in a separate frame, you have this site as an example.

That would be something along the lines of:

<html>
<head>
    <meta http-equiv="Content-Language" content="en-gb">
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">

    <script language="javascript" type="text/javascript">
    function showFrame () {
        var e = document.getElementById("if1");
        e.style.visibility = "visible" ;
    }
    </script>
</head>

<body>
    <p> </p>
    <p>
    <span id="spSearch" onclick="showFrame()">Search</span>
    </p>
    <p> </p>
    <p><iframe name="I1" id="if1" width="100%" height="254" style="visibility:hidden" src="http://www.google.co.uk">
        Your browser does not support inline frames or is currently configured not to display inline frames.
    </iframe></p>
</body>
</html>
Related Question