Implementation example

Search window example

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>mf-x page</title>

    <!-- ↓CSS -->
    <link href="//c.marsflag.com/mf/mfx/1.0-latest/css/mfx-sbox.css" rel="stylesheet" type="text/css" media="all" charset="UTF-8">

    <style type="text/css">
      html, body {
        padding: 0;
        margin: 0;
      }
    </style>
  </head>
  <body>


    <!-- ↓ Insert custom elements in this tree -->

    <div class="mf_finder_container">

        <!-- ↓custom-element for search box -->
        <mf-search-box
           submit-text=""
           ajax-url="//mfx-sample.marsflag.com/x_search.x"
           serp-url="minimum.html#/"
           doctype-hidden
           options-hidden
        ></mf-search-box>

    </div>

    <!-- ↓js for MF search box -->
    <script src="//c.marsflag.com/mf/mfx/1.0-latest/js/mfx-sbox.js" charset="UTF-8"></script>

  </body>
</html>

Search window behavior sample

Example of search results page

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>mf-x minimum</title>

    <!-- ↓CSS -->
    <link href="//c.marsflag.com/mf/mfx/1.0-latest/css/mfx-serp.css" rel="stylesheet" type="text/css" media="all" charset="UTF-8">

    <style type="text/css">
      html, body {
        padding: 0;
        margin: 0;
      }
    </style>
  </head>
  <body>
    <!-- ↓ Insert custom elements in this tree -->
    <div class="mf_finder_container">

        <!-- ↓custom-element search box -->
        <mf-search-box
           submit-text=""
           ajax-url="//mfx-sample.marsflag.com/x_search.x"
           doctype-csv="html,pdf"
        ></mf-search-box>

        <!-- ↓custom-element recommend search -->
        <mf-zubaken></mf-zubaken>

        <!-- ↓Organic element -->
        <mf-search-results></mf-search-results>

    </div>

    <!-- ↓js for MF search result screen -->
    <script src="//c.marsflag.com/mf/mfx/1.0-latest/js/mfx-serp.js" charset="UTF-8"></script>

  </body>
</html>

Search results page behavior sample

How to make

Basic rules

Load the necessary js below with the script tag according to the purpose
Set up a custom-element for MarsFinder under .mf_finder_container.
Set appropriate css.

How to install the search window

Put <script src="//c.marsflag.com/mf/mfx/1.0-latest/js/mfx-sbox.js" charset="UTF-8"></script> at the end of body tag.

custom-element for search box `<mf-search-box></mf-search-box>`

It is installed under .mf_finder_container If it’s difficult to install it under .mf_finder_container in the shared common header of the site, you can add .mf_finder_header first in the common header, then install the search box under it.

Search box, custom-element API document

How to make a search result page

<script src="//c.marsflag.com/mf/mfx/1.0-latest/js/mfx-serp.js" charset="UTF-8"></script> Add this code at the end of body.

custom-element for search box `<mf-search-box></mf-search-box>`

Insert it under .mf_finder_container

API document for custom-element search box

custom-element for search results `<mf-search-results></mf-search-results>`

Insert it under .mf_finder_container.

API document for custom-element search results

custom-element for recommend search `<mf-zubaken> </ mf-zubaken>`

Insert it under .mf_finder_container.

API document for custom-element recommend search

Default CSS

//c.marsflag.com/mf/mfx/1.0-latest/css/mfx-sbox.css

//c.marsflag.com/mf/mfx/1.0-latest/css/mfx-serp.css

For responsive use

Load it after css above.

//c.marsflag.com/mf/mfx/1.0-latest/css/mfx-serp-resp.css

Language support

Either within a higher element of custom-element (may be body), or in the custom-element itself, you can switch the language by setting the language code with lang attribute.

Switching of display wordings etc. is done by the default CSS mentioned above. You can also customize by adding CSS separately in the page.

Currently it supports the following languages.

Language	Language code
English	`en` or `en-US` no not set
Japanese	`ja` or `ja-JP`
Chinese (Simplified)	`zh` or `zh-CN`
Chinese (Traditianl)	`zh-tw`
Korean	`kr`
Spanish	`es`
Portuguese	`pt` or `pt-BR`
Arabic	`ar`
Thai	`th`
Italian	`it`
Indonesian	`id`
Dutch	`nl`
Greek	`el`
German	`de`
Turkish	`tr`
French	`fr`
Vietnamese	`vi`
Polish	`pl`
Latvian	`lv`
Lithuanian	`lt`
Russian	`ru`
Persian	`fa`

System requirements

Supported Browsers

Applied version

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>mf-x page_classic</title>

    <!-- ↓CSS -->
    <link href="//c.marsflag.com/mf/mfx/1.0-latest/css/mfx-sbox.css" rel="stylesheet" type="text/css" media="all" charset="UTF-8">

    <style type="text/css">
      html, body {
        padding: 0;
        margin: 0;
      }
    </style>
  </head>
  <body>

    <!-- ↓ Insert custom-element into the tree below -->
    <div class="mf_finder_container">

        <!-- ↓custom-element search box -->
        <mf-search-box
           submit-text=""
           ajax-url="//mfx-sample.marsflag.com/x_search.x"
           doctype-hidden
           options-hidden
           use-std-serp
        ></mf-search-box>
    </div>

    <!-- ↓js for MF search box -->
    <script type="text/javascript" src="//c.marsflag.com/mf/mfx/1.0-latest/js/mfx-sbox.js" charset="UTF-8"></script>

  </body>
</html>

Behavior sample of the search box that transits to the conventional search result screen

Search result page to pass parameters with query string without using hash

If you are going to replace the search result page for Google Custom Search with this, you can divert the search box as it is.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>mf-x minimum_nohash</title>

    <!-- ↓CSS -->
    <link href="//c.marsflag.com/mf/mfx/1.0-latest/css/mfx-serp.css" rel="stylesheet" type="text/css" media="all" charset="UTF-8">

    <style type="text/css">
      html, body {
        padding: 0;
        margin: 0;
      }
    </style>
  </head>
  <body>

    <!-- ↓ Insert custom-element into this tree -->
    <div class="mf_finder_container">

      <!-- ↓custom-element search box -->
      <mf-search-box
         submit-text=""
         ajax-url="//mfx-sample.marsflag.com/x_search.x"
         doctype-csv="html,pdf"
         ></mf-search-box>

      <!-- ↓custom-element recommend search -->
      <mf-zubaken></mf-zubaken>

      <!-- ↓Organic element -->
      <mf-search-results></mf-search-results>

    </div>

    <!-- ↓Describe when you manage parameters with a query string without using a hash -->

    <script type="text/javascript">
    !function(){
      var G = GALFSRAM = window.GALFSRAM || {}
      G.mfx = G.mfx || {}
      G.mfx.router_mode = 'history'
    }();
    </script>

    <!-- ↓js for MF search result screen -->
    <script src="//c.marsflag.com/mf/mfx/1.0-latest/js/mfx-serp.js" charset="UTF-8"></script>

  </body>
</html>