Documentation

Replace Standard Search With Google Search

From KickApps Documentation

Jump to: navigation, search

Everyone knows that the best search engine on the web is Google. If you're using the SSO API, you'll also know that syncing up the KA search and the external search is rather difficult. For this reason, we have figured a way to replace the standard KIT Cloud Social search bar with a Google Custom Search. Continue reading to figure out how you can do it too!


Contents

Registering With Google

First and foremost, you'll have to register your custom search with Google at google.com/coop/cse. It doesn't matter which edition you select just be aware, if you choose the free version, you will have ads placed in with your search results.


Customize Your Search Input (optional)

After registering, go to your search engine's control panel. Select the option at the top labeled "look and feel". Begin customization of search bar and search results.


Grab The Code

  1. Go on over now to the code tab.
  2. Select the option to host your results on your webpage with an iframe.
  3. In the Specify search results details: text box, enter: [YOUR KIT CLOUD SOCIAL DOMAIN]/service/searchEverything.kickAction
  4. Copy the contents of the Search Box Code and paste into a text editor. Remove the script tag from the bottom and paste this in below: 
    <input type="hidden" name="keywords" value="xyz123z">
<input type="hidden" name="includeBlog" value="off">
<input type="hidden" name="as" value="[YOUR AS NUMBER]">

    Once that is complete, your form should look similar to this: 

    <form action="" id="cse-search-box">
  <div>
    <input type="hidden" name="cx" value="002656335136407295175:n_mnytfwpfc">
    <input type="hidden" name="cof" value="FORID:10">
    <input type="hidden" name="ie" value="UTF-8">
    <input type="text" name="q" size="31" style="border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(126, 157, 185); border-right-color: rgb(126, 157, 185); border-bottom-color: rgb(126, 157, 185); border-left-color: rgb(126, 157, 185); padding-top: 2px; padding-right: 2px; padding-bottom: 2px; padding-left: 2px; background-image: url(http://www.google.com/coop/intl/en/images/google_custom_search_watermark.gif); background-repeat: no-repeat; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(255, 255, 255); background-position: 0% 50%; ">
    <input type="submit" name="sa" value="Search">
    <input type="hidden" name="keywords" value="xyz123z">
    <input type="hidden" name="includeBlog" value="off">
    <input type="hidden" name="as" value="[YOUR AS NUMBER]">
  </div>
</form>
  5. (optional) - You can compress your into one line by removing all line breaks, for better performance.


Use jQuery To Insert New Code

You can now use this jQuery call to ensure that your new search engine will appear on all pages:


$j('#ka_headerSearch').html('[ALL YOUR CODE]');


Where [ALL YOUR CODE] is clearly going to be all of your code from above!


Wrap It All In Script Tags

Wrap your entire code now inside of JS tags, like so:


<script type="text/javascript">
    //your code
    </script>

And then append the script include you set aside in step 3, part 4:

<script type="text/javascript">
    //your code
    </script>
    <script type="text/javascript" mce_src="http://www.google.com/coop/cse/brand?form=cse-search-box&lang=en" src="http://www.google.com/coop/cse/brand?form=cse-search-box&lang=en"></script>


Inserting Your Code

  1. Login to your Affiliate Center and surf to your global page template and in the bottom of your footer paste the code you created above.
  2. Beneath that, add the following on a new line: 
    <script type="text/javascript">
if (Ka.Info.PAGE === "search/searchPage.jsp" && Ka.Util.getLocationParam('cx')) {
    $j('#ka_headerSearch input[name=keywords]').val(Ka.Util.getLocationParam('q'));
    $j('#ka_contentContainer').html('<div id="cse-search-results"></div>');
    var googleSearchIframeName = "cse-search-results";
    var googleSearchFormName = "cse-search-box";
    var googleSearchFrameWidth = 600;
    var googleSearchDomain = "www.google.com";
    var googleSearchPath = "/cse";
    Ka.Util.loadScript('http://www.google.com/afsonline/show_afs_search.js');
}
</script>
  3. It's always good to comment your code, so add the following above the new code snippet you added (before the start of your script tag):
    <!-- GOOGLE CUSTOM SEARCH CODE -->
Retrieved from "http://www.kickapps.com/documentation/index.php/Replace_Standard_Search_With_Google_Search"