Month: August 2007

I was having issues with the built-in search in CS2007.  Basically it was loading a blank page (no HTML at all) instead of the search results page.  I’m sure I could find some info about the issue in the forums, but decided I would take a few minutes to try to implement Google’s Custom Search instead.  I spent more time futzing with the CS files than necessary to figure it out, but in the end the changes were pretty simple.

Step 1: First, sign up on Google to have a custom search engine.  I’m not going to walk through this since it’s not that hard, and I’m sure you’re smart.  After your site is setup, go to the Code link in the control panel.  Expand the “Search box and search results code for your website” panel.  I recommend using the watermark text box because it will most likely match your site better than the other options.

Step 2: Backup these two files: /Themes/Blogs/YOURTHEME/theme.master and /Themes/Blogs/YOURTHEME/search.aspx.

Step 3: Open /Themes/Blogs/YOURTHEME/theme.master and remove the section for <CSBlog:SearchForm … />.  Replace that with code similar to the following, with variables changed based on what you get from Google:

<div id=”Search” align=”right”>  <table cellpadding=”0″ cellspacing=”0″ border=”0″>    <tr><td>      <input name=”q” id=”q” type=”text” class=”searchBox” 
        Button=”SearchButton” onkeydown=”javascript:if((event.which 
        && event.which == 13) || (event.keyCode && event.keyCode 
        == 13)) {GoogleSearch();return false;}else return true;” />    </td><td>      <span class=”SearchButtonOuter”>        <a id=”ctl00_ctl06_ctl00_SearchButton” class=”SearchButton” 
          href=”javascript:GoogleSearch2();”>Search</a>      </span>    </td></tr>  </table>                </div><script language=”JavaScript”>function GoogleSearch2(){window.location = 
“http://www.tapmymind.com/blog/tap_my_mind/search.aspx” +“?q=” + document.getElementById(“q”).value +“&cx=014327199496625865409:3nxxz5mvxtw” +“&cof=FORID:10” +“&sa=search”;}function GoogleSearch() { window.setTimeout(“GoogleSearch2()”, 200);}</script><script type=”text/javascript” 
  src=”http://google.com/coop/cse/brand?form=aspnetForm”></script>

You may have to change some HTML for layout purposes.  I am using the Paperclip theme and this worked for me.  I basically copied the resulting HTML from a source view of the unmodified page, inserting stuff where I thought was appropriate.

Also, the setTimeout was to cause a delay before submitting the form with the Enter key (the whole bit about event.keyCode, etc.) due to some issues I found with IE’s autocomplete not, ummm, completing before the form was submitted.  Also note that I am using the current search URL.

Step 4: Open /Themes/Blogs/YOURTHEME/theme.master and remove then contents of the <asp:Content … /> item — just the contents, leave the asp:Content element itself.  In it’s place add code like this (again, based on what Google gives you):

<h2 class=”pageTitle”>Google Custom Search Results</h2>These results are coming directly from Google’s search engine.  
Consequently, some items do not show up in the results right 
away.  If you are search for a post you expected to find, but 
it is not listed, please try the same search on <a href=”http://blogsearch.google.com/blogsearch?as_q=<% 
Response.Write(Server.UrlEncode(Request.QueryString[“q”])); 
%>&bl_url=tapmymind.com”>Google’s Blog Search tool</a>.<br /><br /><!– Google Search Result Snippet Begins –><div id=”results_014327199496625865409:3nxxz5mvxtw”></div><script type=”text/javascript”>  var googleSearchIframeName = 
    “results_014327199496625865409:3nxxz5mvxtw”;  var googleSearchFormName = “aspnetForm”;  var googleSearchFrameWidth = 500;  var googleSearchFrameborder = 0;  var googleSearchDomain = “google.com”;  var googleSearchPath = “/cse”;</script><script type=”text/javascript” 
  src=”http://www.google.com/afsonline/show_afs_search.js”></script><!– Google Search Result Snippet Ends –>

Note that I specified the search form name as “aspnetForm” (here as well as in the previous step).  This is the name/id the resulting HTML form has and correctly specifying this allows Google to properly add the watermark, as well as pre-populate the text box with the current search term automatically.

I also added a link to do the same search on Google’s Blog Search (GBS) tool.  I noticed that a post I recently added was not showing in the results because it hadn’t been indexed yet (I assume), but it does show in GBS because of pings that CS2007 sends for me.  So I coded the link to automatically search my site (you’ll want to change the value for bl_url) and the current search term.

Step 5: This step may or may not be important to you, but I also had to modify styles.css for the current theme so that the text box was wide enough to show the Google watermark.  I don’t have that file handy at the moment, but I think I changed the width to 140 or 150px.

As far as I can remember, that’s all I did, and so far it works for me.  I imagine many other people have already tried this and figured it out, but I didn’t bother searching for examples.  I didn’t really test this heavily, so please let me know if you find bugs or have suggestions.  I just have to remember this if I change themes or upgrade CS (hence this post).

Be sure to be aware of wrapping issues with the code I have posted here.  Also, I strongly recommend you backup everything you are going to edit first.  I’m not responsible for any damage you cause to your site.  [:)]

If anyone has an easier way, let me know.