Tip: Search Function Like Creators Using Google Custom Search

[SweetPotato]

Ever wanted to use the same search functionality that Ning use here on Creators? ie. to have your Ning search bar use Google's Custom Search Engine?

OK, here goes.

This assumes that you have a Google CSE already set up and have the ID required (bolded in the code below). This is not a tutorial on how to set up Google's Custom Search Engine

1) Create a 'page' with the url /page/search-results.

2) Now put this code in the html of the page and change the bold purple Google ID to yours.

<div id="cse" style="width: 100%;">Searching ...</div>
<script src="http://www.google.co.uk/jsapi" type="text/javascript">// <![CDATA[

// ]]></script>
<div>
<script type="text/javascript">// <![CDATA[
google.load('search', '1', {language : 'en', style : google.loader.themes.MINIMALIST});   google.setOnLoadCallback(function() { var customSearchOptions = {};  var customSearchControl = new google.search.CustomSearchControl('003627612489542594954:avrq4otogmg', customSearchOptions); customSearchControl.setLinkTarget(google.search.Search.LINK_TARGET_SELF);    customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);   customSearchControl.draw('cse');      function parseParamsFromUrl() { var params = {};        var parts = window.location.search.substr(1).split('\x26'); for (var i = 0; i < parts.length; i++) { var keyValuePair = parts[i].split('='); var key = decodeURIComponent(keyValuePair[0]); params[key] = keyValuePair[1] ?             decodeURIComponent(keyValuePair[1].replace(/\+/g, ' ')) :             keyValuePair[1];} return params;} var urlParams = parseParamsFromUrl(); var queryParamName = "q"; if (urlParams[queryParamName]) {       customSearchControl.execute(urlParams[queryParamName]);}}, true);
// ]]></script>
</div>

3) Now put this in the Custom Code section of your site, again changing the bolded purple ID and the url as required.

<script type="text/javascript">

xg.addOnRequire(function() {
    document.getElementById('xn_bar_menu_search').action = 'http://yoururl.com/page/search-results';
    var cx = document.createElement('input');
    cx.setAttribute('name', 'cx');
    cx.setAttribute('value', '003627612489542594954:avrq4otogmg');
    cx.setAttribute('type', 'hidden');
    document.getElementById('xn_bar_menu_search').appendChild(cx);
    var ie = document.createElement('input');
    ie.setAttribute('name', 'ie');
    ie.setAttribute('type', 'hidden');
    ie.setAttribute('value', 'UTF-8');
    document.getElementById('xn_bar_menu_search').appendChild(ie);
    var cof = document.createElement('input');
    cof.setAttribute('name', 'cof');
    cof.setAttribute('type', 'hidden');
    cof.setAttribute('value', 'FORID:11;NB:1');
    document.getElementById('xn_bar_menu_search').appendChild(cof);
    var sa = document.createElement('input');
    sa.setAttribute('name', 'sa');
    sa.setAttribute('type', 'hidden');
    sa.setAttribute('value', 'Search');
    document.getElementById('xn_bar_menu_search').appendChild(sa);
});

</script>

And that's it. See it in action here

Enjoy

SP

More tips

[Ceddy J]

Trust me it works everyone. I was rattling my brain about this for about a week.

[Jordon McGee (Jords)]

Very nice!! =] Thanks so much for such a grand tip!!

[John]

I think I have it wired up now.  But I am getting no results

http://motorhomes.com/page/search-results?q=winnebago&cx=013925...

Does it take a while for Google to create the index?

[SweetPotato]

You haven't changed the 003627612489542594954:avrq4otogmg in the page html. replace with 013925145384365025681:pk9vngrlv2k

SP

[John]

Thanks for pointing that out SP.  It's working now.

Looking at the other templates.  Don't like the default's hover style.

[SweetPotato]

sweet.
you can change the css and put it in your custom section on the page.
good luck

SP

[John]

As a finishing touch I removed the page title.  The reader will recognize the search results without "Search Results" in bold at the top of the page.

In the page's custome code box:

<style>
.xg_widget_page .xg_headline {display:none !important;}
</style>

Very happy.  :)

[SweetPotato]

looks good on your site. :-)

[Patrick Chappelle]

Interesting. Very nice, SP!

[Bernard Lama]

Very good tip. BTW, can you tell me SP from where do we get the bold element like this 003627612489542594954:avrq4otogmg. ?

[SweetPotato]

that is your google custom search engine ID that you will have when you set it up http://www.google.com/cse

[Jen]

Oh well, guess I wasted time writing that tip. LOL

Just FYI SP, I will put my tip on my site. Didn't want you to think I hijacked yours. =)