keithstric.com :: SnTT: Put Google Site Search Results in the Content pane of BlogSphere

As you are probably aware of, I've been revamping keithstric.com. In that revamp I wanted to add a Google Custom Search (CSE) engine to search only my site. Making the CSE was easy enough with the wizard Google supplies but, I didn't like the way that it either redirected you to a google page or you had to submit the search to another dedicated page on your site. So I set on the quest of getting the results to show up where the content of my website usually shows up. Below I list all the things I tried and then what finally succeeded.

First I tried the default of showing the results on a google hosted page. I just didn't like that at all, I could customize it a little bit but not really.

Next, I tried having the results show up in an article type document, however, the url that gets appended to the search results page starts with "?", seems Domino didn't like this at all and kept dying with an error 500. I tried all sorts of ways to prevent the "?" from being the start of the appended URL to no avail. I did some research on what the subject and it seems when a url contains a "?" Domino expects a domino url extension (i.e. OpenDocument, OpenView or whatever) to come right after the question mark, if it's not what Domino expects, it throws an error 500. To get around it you can create a rewrite rule, but with this blog being hosted by Prominic, I really didn't want to go this route. So, this didn't work...

The last option for displaying the results from a Google Custom Search engine is to display the results as an element. This actually worked with no changes really needing to be made as far as just displaying the results. However, the results just pushed the rest of the blogs content down below the search results. While this worked, I didn't really like it, I think only the search results should show up. But I really liked that the results were "wrapped" within my website. So, how to make it so that when someone performs a search the div which contains the website content is hidden and only the search results are shown? Well, I messed with this for quite a while and never could get it to "really" work. I could hide the div which contained the content but not when the "Search" button was clicked. So I had to post a question over on the Google Custom Search Implementation Forum. The guy that answered didn't leave his actual name, only "omr" is his username and is who really got this to work and who deserves the credit for it.

Now we just need to put this within BlogSphere and we're ready to go. So without further rambling...

First, setup your CSE to only search your site. When you do this if you go through all the options in the wizard you should find your "CSE ID" which is a long number which basically identifies your CSE.
Once you get your CSE ID we're ready to put everything in BlogSphere.

Click the "Read More" link...

In the BlogSphere configuration, navigate to "Blog Setup\Blog Configuration" and open up your configuration document in edit mode. On the left hand side, choose "Page Header" and paste the following code in the "custom HTML" field:
NOTE: In the "Init" function, change "YOUR CSE-ID" to be your CSE ID

 <script type="text/javascript" src="http://www.google.com/jsapi"> </script> <script type="text/javascript"> function findByClass(tagName, className) { var r = new RegExp('\\b' + className + '\\b'); var elements = document.getElementsByTagName(tagName); for (var i = 0; i < elements.length; i++) { var e = elements[i]; if (e.className && r.test(e.className)) { return e; } } return null; } function searchSubmitted() { var e; if ((e = findByClass('input', 'gsc-input')) != null) { if (e.value === '') { searchCleared(); } } } function searchComplete() { document.getElementById('cse-results') .style.display = 'block'; document.getElementById('beta-inner') .style.display = 'none'; } function searchCleared() { document.getElementById('beta-inner') .style.display = 'block'; document.getElementById('cse-results') .style.display = 'none'; } function init() { var cseId = 'YOUR CSE-ID'; var customSearchControl = new google.search.CustomSearchControl(cseId); customSearchControl.setResultSetSize( google.search.Search.FILTERED_CSE_RESULTSET); customSearchControl.setSearchCompleteCallback( null, searchComplete); var options = new google.search.DrawOptions(); options.setSearchFormRoot('cse-search-form'); customSearchControl.draw('cse-results', options); var e; if ((e = findByClass('form', 'gsc-search-box')) != null) { if (e.addEventListener) { e.addEventListener( 'submit', searchSubmitted, false); } else if (e.attachEvent) { e.attachEvent( 'onsubmit', searchSubmitted); } } if ((e = findByClass('input', 'gsc-search-button')) != null) { if (e.addEventListener) { e.addEventListener( 'click', searchSubmitted, false); } else if (e.attachEvent) { e.attachEvent( 'onclick', searchSubmitted); } } if ((e = findByClass('div', 'gsc-clear-button')) != null) { if (e.addEventListener) { e.addEventListener( 'click', searchCleared, false); } else if (e.attachEvent) { e.attachEvent( 'onclick', searchCleared); } } } google.load('search', '1'); google.setOnLoadCallback(init, true); </script>

Save and close your configuration document. Now, navigate to "Look and Feel\Page Templates" and open up your current page template into edit mode. In the "Beta Start" field, you should have something like:
 <div id="beta"> <div id="beta-inner">
Now, just modify the "beta-start" field to read:
 <div id="beta"> <div id="cse-results" style="width:100%; display:none;"></div> <div id="beta-inner">
If you don't have the "beta-inner" div, you should add this. This separates your content from the search results.

Save and close your template document. Navigate to "Look and Feel\Side Blocks" and create a new side block and in the "Block Type" field choose HTML, choose where you want it to show up on your blog and what pages you want the search to be available on and in the "Block Custom HTML" field put the following code:
<div id="cse-search-form">Loading...</div>

Save and close the side block document. Now, go to your website in a browser and your search box should show up and when you do a search, the content of your website should be hidden and the search results shown. When you clear the search results the content of your website should be un-hidden and the search results div hidden.

It's been a while since I've done a SnTT so hopefully you find this one useful.