Warning: I don't think this will return correct results on a Private site, since Google has to crawl your site for the search. It's doubtful.

 

How to replace your NingBar Search with a custom Google Search.

 

Prepare a Page for your Google Search results.

  • We need to create a Ning Page, where our Search Results will be displayed.
  • Create a new Page on your Ning Site: /page/page/new
  • Give your page a name, something like "Search Results".
  • Click on HTML button.
  • Add the following code and click on "Create Page". You may need to adjust the googleSearchFrameWidth = 600.
  • <div id="cse-search-results"></div>
    <script type="text/javascript">
    var googleSearchIframeName = "cse-search-results"; var googleSearchFormName = "cse-search-box"; var googleSearchFrameWidth = 600; var googleSearchDomain = "www.google.com"; var googleSearchPath = "/cse";
    </script>
    <script src="http://www.google.com/afsonline/show_afs_search.js" type="text/javascript"></script>

 

Create Your Custom Google Search Code, go here:
http://www.google.com/cse/

  • Click on "Create a Custom Search Engine" - You'll need to sign-in to Google.
  • Click on "New Search Engine"
  • Add a name, description, and choose language for your custom search.
  • Under: "Define your search engine", and next to"Sites to search...", enter your Ning Network URL - - the full path, i.e. http://jensocial.com. If you want to search more than one site, enter 1 URL per line.
  • Under Standard edition, agree to Google Terms.
  • Click on Next.
  • Choose or customize a style.
  • Click on Next.
  • Now you'll be taken to a page with this header: "Custom Search element code"
  • For now, we will not need the custom search code. We needed to get this far, to create the Search Engine.
  • Go to Google Custom Search Manage Page: http://www.google.com/cse/manage/all
  • You will see your new Search Engine under "My search engines".
  • Next to your new Search Engine, click on "control panel".
  • Do not close this page, you will need the "Search engine unique ID:" for Custom Code Box code, below.

 

Edit/Add Special Script to Custom Code Box:

  • Edit/Add code, below.
  • Locate and edit this line of code: http://yoursite.ning.com/page/search-results
  • Change the path to the full path of your new Search Page.
  • Now you will need your "Search engine unique ID" See last bullet above. Copy the entire ID string. Be sure you don't miss any of the code. Locate and edit this code, which I have used a bogus search engine ID to make it similar to yours: cx.setAttribute('value', '001999399379599247143:kvoos9-d1w4'); Replace the entire ID key with yours.
  • Add your edited code to the Custom Code Box via My Network/Tools/Custom Code
  • Save.
  • If you do not have room in your Custom Code Box, see instructions below: "NOT ENOUGH ROOM IN CUSTOM CODE BOX?"
  • Note: You can't test this from your My Network page.

<!-- Replace NingBar Search with Google Search -->
<script type="text/javascript">
xg.addOnRequire(function() {
document.getElementById('xn_bar_menu_search').action = 'http://yoursite.ning.com/page/search-results';
var cx = document.createElement('input');
cx.setAttribute('name', 'cx');
cx.setAttribute('value', '001999399379599247143:kvoos9-d1w4');
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>

 

NOT ENOUGH ROOM IN CUSTOM CODE BOX?

I had this problem, too.

Instructions on how to move "Custom Code Box" code above, to a js file:

  • After you edit the Custom Code Box code above, copy/paste all of the code between the script tag. For example: <script type="text/javascript">ALL CODE BETWEEN THESE TWO TAGS, BUT NO TAGS.</script>
  • Paste the code into a text file, and save with a .js extension. For example: replaceningsearch.js
  • Make sure the file extension is correct.
  • Go to a Blog or File Manager, and upload your new js file.
  • Copy/paste the new js file URL, you will need the path for code below.
  • The code below will link to your js file.
  • Edit code, and add your js file URL in place of "replaceningsearch.js".
  • <script type="text/javascript" src="replaceningsearch.js"></script>
  • Add script code above to the Custom Code Box via My Network/Tools/Custom Code.
  • Save.

 

Credits:

Thank you to TJ of  http://jqueryhelp.ning.com/, and Ning Creators. TJ reviewed and helped test this code. The original js code came from Ning Creators.

 

Enjoy!
Jen

Views: 633

Reply to This

Replies to This Discussion

Finally it works for me. Thanks Jen.

thanks for the tip

1 question : Adsense rules make it clear that we should not modify codes - doesnt this go against this rule? as we are not putting the code exactly as given by adsense

thanks

Hi Joe,

Of course I can't make any guarantees when it come to Google. But, I definitely don't think this code affects any adsense rules. You're just replacing Ning's search with a custom Google Search. Ning Creators uses this as well.

Happy Holidays,

Jen

thanks Jen

and Merry Christmas to you as well!

Merry Christmas!

RSS

Members

© 2024   Created by JenSocial.   Powered by

Badges  |  Report an Issue  |  Terms of Service

Home
VIP Ning Tips