MARS FINDER 2.0 カスタムエレメント版 かんたん設置ガイド (2021.08.20版)

MARS FINDER 2.0 カスタムエレメント版 かんたん設置ガイド (2021.08.20版)

MARS FINDER 2.0 カスタムエレメント版 とは
カスタムエレメント版は、お客様のWebサイト上のhtmlファイルに「タグ」を埋め込んでいただくことにより、htmlファイルの任意の箇所に、
検索窓 および 検索結果 を表示することができるサービスです。最短2ステップで設置が完了します。

カスタムエレメント版 かんたん設置
★用意するもの
-検索窓を表示したいhtmlファイル（例 window.html）
-検索結果を表示したいhtmlファイル (例 result.html)

★動作イメージ
「検索窓を表示したいhtmlファイル」（例 window.html）の検索ボタンをクリックすると、
「検索結果を表示したいhtmlファイル」 (例 result.html)に遷移し、検索結果を表示します。



※「検索結果を表示したいhtmlファイル」（例 result.html）の検索ボタンをクリックした場合は、
　「検索結果を表示したいhtmlファイル」（例 result.html）を再読込し、検索結果を表示します。


ステップ１★検索窓を表示したいhtmlファイルにタグを埋め込む
1) 検索窓を表示したいhtmlファイル(例 window.html)の<head>～</head>の中に、
以下のタグを埋め込んでください。　

<!-- ↓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">


2) 検索窓を表示したいhtmlファイル(例 window.html)の<body>～</body>の中に、以下のタグを埋め込んでください。　
<div class="mf_finder_container">

<!-- ↓検索窓用カスタムエレメント -->
<mf-search-box
submit-text=""
ajax-url="//xxxx.marsflag.com/xxxx__xxxx__xxxx/x_search.x"
serp-url="//xxxx.marsflag.jp/result.html#/"
></mf-search-box>

</div>
※青字の部分はお客様によって異なります。
※緑字の部分は検索結果を表示したいhtmlのパス名またはファイル名となります。（フルパスを推奨します。）

3) 検索窓を表示したいhtmlファイル(例 window.html)の</body>の直前に、以下のタグを埋め込んでください。
<script src="//c.marsflag.com/mf/mfx/1.0-latest/js/mfx-sbox.js" charset="UTF-8"></script>


ステップ2★検索結果を表示したいhtmlファイルにタグを埋め込む
1) 検索結果を表示したいhtmlファイル(例 result.html)の<head>～</head>の中に、以下のタグを埋め込んでください。
<!-- ↓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">

2) 1)と同様に、<head>～</head>の中に、意図しないクロールを防止するための以下の<meta>タグを埋め込んでください。1) の上でも下でも、隣接していなくても構いません。
<meta name="robots" content="noindex,nofollow" />

3) 検索結果を表示したいhtmlファイル(例 result.html)の<body>～</body>の中に、以下のタグを埋め込んでください。　　
<div class="mf_finder_container">
        <!-- ↓検索窓用カスタムエレメント -->
        <mf-search-box
           submit-text=""
           ajax-url="//xxxx.marsflag.com/xxxx__xxxx__xxxx/x_search.x"
        ></mf-search-box>
        <!-- ↓ずばけん用カスタムエレメント -->
        <mf-zubaken></mf-zubaken>
        <!-- ↓オーガニック用エレメント -->
        <mf-search-results></mf-search-results>
</div>
※青字の部分はお客様によって異なります。

4) 検索結果を表示したいhtmlファイル(例 result.html)の</body>の直前に、以下のタグを埋め込んでください。
<script src="//c.marsflag.com/mf/mfx/1.0-latest/js/mfx-serp.js" charset="UTF-8"></script>
これで完成です！

★完成イメージ
-検索窓を表示したいhtmlファイル（例 window.html）


-検索結果を表示したいhtmlファイル (例 result.html)


FAQページもご参照ください。

注意事項：
mf_finder_containerや mf_finder_header内は、DOMが再構築されるので、最小限の範囲となるよう設定してください。
marsfinder off/on は、これらクラス適用された要素内に配置すると動作しません。

参考：