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

[Kit Wynkoop]

Aloha SweetPotato! And thanks much for this code. I tried it and found the Google function a thousand time better. I'm finding, though, that the Google search box only remains on the "page" I set up and doesn't replace my Ning search box (at the top of the screen). Any suggestions?

My site: http://oahu-nei.ning.com/

The Google search "page" I set up: http://oahu-nei.ning.com/page/search-results

Mahalo in Advance!

Kit

[SweetPotato]

A quick check of your site would suggest you've not done step 3.

SP

[Kit Wynkoop]

Hmm, step 3 is in place. I double-checked the Google custom search ID and URL of search-results page that I put in the code - all fine. Could there be something in the custom Ning bar code that's interfering:

/* Cutsomized Ning Bar */
    #xn_bar {
        background-color: #666666 !important;
        border-bottom: 0px solid #CCCCCC;
        border-radius: 23px 23px 23px 23px;
        border-top: 0 solid #CCCCCC;
        bottom: 0;
        box-shadow: 3px 6px 23px #CCCCCC;
        height: 22px;
        margin-left: auto;
        margin-right: auto;
        opacity: 0.26;
        padding-bottom: 0px;
        padding-top: 0;
        position: relative;
        top: 8px;
        width: auto;
        z-index: 23;
        display:table;
        min-width:0;
    }

    #xn_bar:hover{opacity:0.87;}

Cheers

Kit

[SweetPotato]

CSS shouldn't affect it so I'm not sure what's up here.
On iPad at present so I'll tal e a look tomorrow.
Sp