Google’s Search for AdSense and MOSS/WSS – CKS:EBE

Since starting this blog, I’ve tried to add features that I thought might be useful.  After experimenting with a few searches, I decided to go with Google’s Search for AdSense.  It seemed to be a pretty useful tool, with advertising harmlessly placed on the side of the search results page, and if someone finds an ad that they are interested in, I’d make a few pennies.

However, with the way MOSS is constructed, with ASPX pages, master pages, and the rendering and server call structure, it was not as easy as some of the other features I put on this site.  The code that Google provides to copy and paste into the page is nested inside a <FORM> tag.  With the way ASPX pages are generated, that would be nesting one <FORM> tag inside another <FORM> tag and that dog just won’t hunt.  After doing quite a bit of head banging, and a ton of searching and experimenting, I was able to come up with some javascript that I thought would post properly.  This worked out just fine in Safari, I didn’t test on Firefox, but failed miserably in IE.  In Safari, the link would redirect properly, but in IE, the page would simply post back to itself, adding the proper querystring variables, the information after the URL that sites sometimes use to determine what you’ve done on a prior page, but failing miserably to deliver the desired result.  As IE is one of the most used browsers on the Internet, this just wasn’t acceptable.  Thus began my search for content on how to do it.  I couldn’t believe I was the only one with the issue.  After some pain, I came up with the solution listed below, and even some javascript to get Google’s branding back into the text box.  I didn’t want to violate any of their terms of use. 😉

The code below is used to replace the <FORM> that Google’s code generator spit out, and behaves properly within SharePoint (sorry, no syntax highlighting or proper formatting, as I haven’t gotten around to that ‘feature’ yet):

 

<!– Google Search for Adsense –>
<script type="text/javascript">

    // This function processes the search fields with a redirect.
    // Change the parameters to your Google account information
    // and your search results page. Make sure you leave the question 
    // mark at the end of the main URL. Also make sure you leave the
    // ampersands (&) at the end of each line, and don’t allow the
    // javascript lines to break before the semi-colons.
    function processSearch(){
        tUrl = "http://blogs.d3planet.com/clement/search_results.aspx?";
        tUrl = tUrl + "cx=partner-pub-9998047318812355:exjllsfo6g2&";
        tUrl = tUrl + "cof=FORID:9&";
        tUrl = tUrl + "ie=ISO-8859-1&";
        tUrl = tUrl + "q=" + document.getElementById("ctl00_txtQuery").value;
        
        window.location = tUrl;
    }

    // The next two functions maintain Google’s branding within the
    // text box.
    function OnFocus(elementId, defaultText)
    {
       if (document.getElementById(elementId).value == defaultText)
       {
          document.getElementById(elementId).className = "googleNoWatermark";
          document.getElementById(elementId).value = "";
       }
    }
    function OnBlur(elementId, defaultText)
    {
       var textValue = document.getElementById(elementId).value;
       if (textValue == defaultText || textValue.length == 0)
       {
          document.getElementById(elementId).className = "googleWatermark";
          document.getElementById(elementId).value = defaultText;
       }
       else
          document.getElementById(elementId).className = "googleNoWatermark";
    }
</script>

<!– View Source on your page to make sure the ‘ctl00’ matches whatever your control name is, and that is C T L, not C T 100 inside the OnFocus and OnBlur events–>
<asp:TextBox ID="txtQuery" runat="server" Width="140px" CssClass="googleWatermark" onfocus="OnFocus(‘ctl00_txtQuery’,”)" onblur="OnBlur(‘ctl00_txtQuery’,”)"></asp:TextBox>
<input type="button" value="Search" onclick="processSearch()" />
<!– End Google Search for Adsense –>

Pay attention to the comments above, surrounded by <!– and –>, and the javascript comments preceded by //.  They tell you where to customize the code for your search.

You’ll now need to include the following tags in your style sheets (.css files) replacing the image location in the background-image tag with your own:

.googleWatermark
{
    background-image:url("images/googleSearchWatermark.jpg");
    background-repeat:no-repeat;
}
.googleNoWatermark
{
}

That worked like a charm, though I had to copy the image for Google’s textbox watermark into my images directory.  I’ll link it hear so you can copy it directly if you need it.

googleSearchWatermark   – Click the image for the version without the ‘drop shadow’.

Finally the code for the search results page: (Which really didn’t have any problems whatsoever, but I modded to include another search box)

<!– Google Search for Adsense –>
<script type="text/javascript">
    function processSearch(){
        tUrl = "http://blogs.d3planet.com/clement/search_results.aspx?";
        tUrl = tUrl + "cx=partner-pub-9998047318812355:exjllsfo6g2&";
        tUrl = tUrl + "cof=FORID:9&";
        tUrl = tUrl + "ie=ISO-8859-1&";
        tUrl = tUrl + "q=" + document.getElementById("ctl00_PlaceHolderMain_txtQuery").value;
        tUrl = tUrl + "&cd=3";
        //alert(tUrl);
        window.location = tUrl;
    }
    function OnFocus(elementId, defaultText)
    {
       if (document.getElementById(elementId).value == defaultText)
       {
          document.getElementById(elementId).className = "googleNoWatermark";
          document.getElementById(elementId).value = "";
       }
    }
    function OnBlur(elementId, defaultText)
    {
       var textValue = document.getElementById(elementId).value;
       if (textValue == defaultText || textValue.length == 0)
       {
          document.getElementById(elementId).className = "googleWatermark";
          document.getElementById(elementId).value = defaultText;
       }
       else
          document.getElementById(elementId).className = "googleNoWatermark";
    }
</script>
<asp:TextBox ID="txtQuery" runat="server" Width="200px" CssClass="googleWatermark" onfocus="OnFocus(‘ctl00_PlaceHolderMain_txtQuery’,”)" onblur="OnBlur(‘ctl00_PlaceHolderMain_txtQuery’,”)"></asp:TextBox>
<input type="button" value="Search" onclick="processSearch()" /><br /><br />
<!– End Google Search for Adsense –>

</div>
<div id="cse-search-results"></div>
<script type="text/javascript">
  var googleSearchIframeName = "cse-search-results";
  var googleSearchFormName = "cse-search-box";
  var googleSearchFrameWidth = 900;
  var googleSearchDomain = "www.google.com";
  var googleSearchPath = "/cse";
</script>
<script type="text/javascript" src="http://www.google.com/afsonline/show_afs_search.js"></script>

Don’t forget to make the changes to correspond to your server and Google account info.

On the search results page, since this was not included in a master page, I had to place this code into an <asp:Content> tag within SharePoint.  Remember that you can ‘view source’ on almost any page to see how someone’s accomplished what they are doing, but keep in mind that server tags like <asp:Content> will not display since they render HTML.

The results are fine, as you can see and experiment with on this site, and it includes Google’s watermark inside the HTML textbox so their branding isn’t taking up real estate that you may need for something else.

Also keep in mind that if you edit the search results page googleSearchFrameWidth parameter, make sure you keep it above 800 or it will not render properly.

Hope this saves you some headaches.  It sure would have saved me one. 😉

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s