Skip to main content

Add Google search results to MindTouch search

This page applies to:MindTouch Responsive

MindTouch allows custom HTML/Javascript widgets to be included on pages. With the Google Custom Search widget, you can include search results from external sources within your MindTouch site.

 

Step 1: Create a Google custom search engine


Sign into https://www.google.com/cse/ to create a custom search engine. Within Google's editor, you can customize the interface for the search engine, including the sites to search.

Custom_Search_-_Basic.png

In this case, the custom search engine only searches the specified external sites, but it can be configured to include results from across the internet.

NOTE:  Certain features, such as removing ads in search results, require an upgrade to the paid Google Site Search.


Step 2: Copy the widget code


  1. On the Search Setup page, click Get Code:

Custom_Search_-_Basic_-_Get_code.png

 

  1. This brings up a screen with the widget code to insert into MindTouch:

Custom_Search_-_Get_Code.png
 

  1. Keep this page open, as it will be used in the next step.
     

Step 3: Create a New Search Results Page


Now, we will create a page to display the custom search results.

  1. Download the file  Search.mtarc.
  2. Visit the homepage of your site.
  3. Select Options > Import here and select the Search.mtarc file you just downloaded.
  4. Visit http://<yoursite>.mindtouch.us/Search and click Edit.​

Search_-_Edit.png
 

  1. Find the following section and paste in the value from the Google Code page in Step 2:
        var cx = 'INSERT_CUSTOM_SEARCH_ENGINE_ID';
  2. Save the page.
  3. You should now have a blank search form which is ready to be used.

search-blank.png
 

Step 4: Customize the search form


Try a sample search to ensure the widget has been installed correctly. You can customize various search options below:

  1. Customize the number of search results and other options with this line:
        var uri = site.api & 'site/query' & {q: query, limit: 7};
  2. Customize the wording for the HTML input or the <h2> title tag.
  3. Customize the CSS included on the page to match your site's look and feel.


Step 5: Update the default search form


If you have a custom skin for on your MindTouch site:

  • Change the search form submit location to /Search
  • Use "q" as the search parameter


If you have a custom header, add the following Dekiscript to your Header template:

<form action="/Search">
    <input type="search" name="q" placeholder="How can we help you?"></input>
</form>