You may have noticed that the Search box on the top of the page has been replaced by Google Search. This is actually part of the Google
AdSense program and, besides giving site visitors the option to search the site
or the web directly, there’s also a financial incentive to do this. Implementing it,
however, wasn’t as simple as it should have been.
The way Adsense implements
the interaction with your website is through a form on the page that posts (using
GET actually) a response directly to Google. Sample code:
<!– Search Google –>
<center>
<form action=”http://www.google.com/custom”
method=”get” target=”_top”>
<table bgcolor=”#ffffff”>
<tr>
<td align=”left” height=”32″ nowrap=”nowrap” valign=”top”>
<a href=”http://www.google.com/”>
<img align=”middle” alt=”Google” border=”0″ src=”http://www.google.com/logos/Logo_25wht.gif”
/></a>
<input maxlength=”255″ name=”q” size=”31″ type=”text” />
<input name=”sa” type=”submit” value=”Search” />
<input name=”client” type=”hidden” value=”pub-5037564150160211″ />
<input name=”forid” type=”hidden” value=”1″ />
<input name=”ie” type=”hidden” value=”ISO-8859-1″ />
<input name=”oe” type=”hidden” value=”ISO-8859-1″ />
<input name=”cof” type=”hidden” value=”GALT:#008000;GL:1;DIV:#336699;VLC:663399;AH:center;BGC:FFFFFF;LBGC:336699;ALC:0000FF;LC:0000FF;T:000000;GFNT:0000FF;GIMP:0000FF;FORID:1;”
/>
<input name=”hl” type=”hidden” value=”en” />
</td>
</tr>
</table>
</form>
</center>
<!– Search Google –>
This seems perfectly reasonable, except that ASP.Net pages already consist of one
huge form and you cannot have nested forms on an HTML page. Nested forms result in
the inner form not being recognised with the net effect that the search box doesn’t
work.
One solution would have been to turn the code into server-side code and embed it in
the ASP.Net application, but I didn’t really have the time or inclination to delve
into how dasBlog worked and was quite happy for a quick and dirty solution just to
bolt the search onto my existing template. So .. quick and dirty the solution was.
I ended up modifying the Adsense-supplied
form to look like this:
<!– SiteSearch Google –>
<script type=”text/javascript”>
function processSearch() {
var t = ‘googledispatcher.asp?q=’
+ document.mainForm.q.value
if (eval(“document.mainForm.sitesearch[1].checked”)
== true) {
t = t + ‘&sitesearch=internal’;
}
window.location = t;
}
</script>
<!–<form method=”get” action=”http://www.google.com/custom”
target=”_top”> –>
<table border=”0″>
<tr>
<td nowrap=”nowrap” valign=”top” align=”left” height=”32″>
</td>
<td nowrap=”nowrap”>
<input type=”hidden” name=”domains” value=”www.u-g-h.com”></input>
<input type=”text” name=”q” size=”30″ maxlength=”255″ value=””></input>
<!– <input type=”submit” name=”sa” value=”Google Search”></input>
–>
<input type=”button” value=”Google Search” onclick=”processSearch()”>
</td>
</tr>
<tr>
<td>
</td>
<td nowrap=”nowrap”>
<table>
<tr>
<td>
<input type=”radio” name=”sitesearch” value=”” checked=”checked”></input>
<font size=”-1″ color=”black”>Web</font>
</td>
<td>
<input type=”radio” name=”sitesearch” value=”www.u-g-h.com”></input>
<font size=”-1″ color=”black”>www.u-g-h.com</font>
</td>
</tr>
</table>
<input type=”hidden” name=”client” value=”pub-5037564150160211″></input>
<input type=”hidden” name=”forid” value=”1″></input>
<input type=”hidden” name=”ie” value=”ISO-8859-1″></input>
<input type=”hidden” name=”oe” value=”ISO-8859-1″></input>
<input type=”hidden” name=”cof” value=”GALT:#008000;GL:1;DIV:#336699;VLC:663399;AH:center;BGC:FFFFFF;LBGC:336699;ALC:0000FF;LC:0000FF;T:000000;GFNT:0000FF;GIMP:0000FF;FORID:1;”></input>
<input type=”hidden” name=”hl” value=”en”></input>
</td>
</tr>
</table>
<!– </form> –>
<!– SiteSearch Google –>
So, I commented out the form (but left the code there, in case I ever needed it again);
and replaced the Submit button with a Javascript snippet that relays the user search
text and site selection to a proxy ASP page. Note that the hidden fields that were
originally part of the form are just ignored, but once again, I left them in place
so that you can clearly see the changes made and so that if I ever want to reinstate
the original code I could do it easily.
The Google Search Dispatcher (googledispatcher.asp) is a simple ASP page that simply
takes the values presented to it, pops them into the appropriate fields and invokes Google
Adsense for Search in the way it was supposed to be called, by posting the form.
Code shown below:
<html>
<head>
<script language=”javascript”>
<%
if Request.QueryString(“q”) & “” <> “” then
Response.Write “function dispatchRequest() {“
Response.Write ” document.google.q.value = ‘” &
Request.QueryString(“q”) & “‘;”
if Request.QueryString(“sitesearch”) = “internal” then
Response.Write ” document.google.sitesearch[1].checked
= true;”
end if
Response.Write ” document.google.submit();”
Response.Write “}”
else
Response.Redirect “http://www.u-g-h.com”
end if
%>
</script>
</head>
<body onload=”javascript:dispatchRequest()”>
<!– SiteSearch Google –>
<form method=”get” action=”http://www.google.com/custom” target=”_top”
name=”google”>
<table border=”0″ bgcolor=”#ffffff”>
<tr>
<td nowrap=”nowrap” valign=”top” align=”left” height=”32″>
</td>
<td nowrap=”nowrap”>
<input type=”hidden” name=”domains” value=”www.u-g-h.com”></input>
<input type=”text” name=”q” size=”31″ maxlength=”255″ value=””></input>
<input type=”submit” name=”sa” value=”Google Search”></input>
</td>
</tr>
<tr>
<td>
</td>
<td nowrap=”nowrap”>
<table>
<tr>
<td>
<input type=”radio” name=”sitesearch” value=”” checked=”checked”></input>
<font size=”-1″ color=”#000000″>Web</font>
</td>
<td>
<input type=”radio” name=”sitesearch” value=”www.u-g-h.com”></input>
<font size=”-1″ color=”#000000″>www.u-g-h.com</font>
</td>
</tr>
</table>
<input type=”hidden” name=”client” value=”pub-5037564150160211″></input>
<input type=”hidden” name=”forid” value=”1″></input>
<input type=”hidden” name=”ie” value=”ISO-8859-1″></input>
<input type=”hidden” name=”oe” value=”ISO-8859-1″></input>
<input type=”hidden” name=”cof” value=”GALT:#008000;GL:1;DIV:#336699;VLC:663399;AH:center;BGC:FFFFFF;LBGC:336699;ALC:0000FF;LC:0000FF;T:000000;GFNT:0000FF;GIMP:0000FF;FORID:1;”></input>
<input type=”hidden” name=”hl” value=”en”></input>
</td>
</tr>
</table>
</form>
<!– SiteSearch Google –>
</body>
It’s not the most elegant method in the world and there’s a number of alternative
mechanisms that could be used. For example, Ola suggested
using a FORM that falls ouside the main ASP.Net form (to avoid the nested form problem),
and then use a DIV to position it on the page. While this should have worked (and
probably been less invasive than my approach), I was already half-way through the
solution above, so didn’t go down that route. Maybe next time …