Current status of the Ning Platform is always available on the Ning Status Blog.

NC for Hire

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

You need to be a member of Ning Creators Social Network to add comments!

Join Ning Creators Social Network

Votes: 0
Email me when people reply –

Replies

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

  • 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?

  • NC for Hire

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

    SP

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

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

      • NC for Hire

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

        SP

  • 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.  :)

  • Interesting. Very nice, SP!

  • NC for Hire

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

This reply was deleted.
 

Some interesting articles related to community management, digital marketing etc. could be found in our digest. Don't hesitate to leave a feedback so we would know that we should continue :-)

Latest Activity

bryant tutas posted a discussion
Cant figure out how to add playlists. All my loaded songs are in the same list and I don't see an …
yesterday
Angie Breidenbach updated their profile
Monday
Ning Support posted a discussion
 
We’ve expanded Group Admin capabilities with a new permission: Delete Comments
Where to find it…
Sunday
kostasgr liked Alex - Rosas † Negras's discussion I managed to add group video calling, if anyone is interested I will post the codes
Jul 8
Steve C replied to ⚡JFarrow⌁'s discussion
What is going on with Ning? What Do We have to Look Forward To?
"Ning is based in California but operations are in Kyiv, Ukraine. Due to the war, operations may…"
Jul 6
Alex - Rosas † Negras replied to Alex - Rosas † Negras's discussion
I managed to add group video calling, if anyone is interested I will post the codes
"⚡JFarrow⌁  
I'm working on the stories and I don't have time to work on the video call you just…"
Jun 28
Alex - Rosas † Negras replied to Alex - Rosas † Negras's discussion
I managed to add group video calling, if anyone is interested I will post the codes
"if you want I'll give you the codes privately and we'll see if the two of us can make it perfect"
Jun 27
Eva and ⚡JFarrow⌁ are now friends
NC for Hire
Jun 25
⚡JFarrow⌁ replied to Eva's discussion
For three days now, my networks, Ning 2.0 and Ning 3.0, are incorrectly visible
"Ug... thats not right..  ill send you my phone number in messages and we'll talk it over."
Jun 24
Eva replied to Eva's discussion
Help Help Help
" I just started a test network on Ning. I'm having the same problems there too! No photos, in…"
Jun 21
Eva posted a discussion
Jun 21
Eva posted a discussion
For three days now, my two networks, Ning 2.0 and Ning 3.0, have been displayed incorrectly, they…
Jun 21
More…

Meanwhile, you can check our social media channels