https://www.billionwallet.com > Google > WebサイトにGoogleカスタム検索エンジンを設定する《2》

ホームページにGoogle カスタム検索エンジンを設定する《2》

それでは、Google カスタム検索の設定から取得されたコードを自分のページに直接貼り付けてみましょう。まず、最初に取得した検索ボックスコードから始めます。

1. 検索ボックスコードを貼り付ける。

このコートは、ページ内で検索キーワードを入れて検索ボタンを押す検索窓を設置するのために必要なコードです。検索ボックスを表示したい個所に下記のコードを貼り付けます。

設置場所は<body>～<body>要素にて、<div>～<div>間に入れます。

<html>
 <head>
<title>google検索ボックスコードの貼り付け</title>
 </head>
<body>
 <div class="gsearch">
  <script>
  (function() {
    var cx = '++++++++++++++++++++:++++++++++';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
        '//www.google.com/cse/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);
  })();
  <script>
<gcse:searchbox-only></gcse:searchbox-only>
 </div>
</body>
</html>

当ウェブサイトの場合は、ページの一番上に位置するよう設定しました。

2.検索結果コードをページに入れ込む

次に、検索ボックスにて入力した検索キーワードに一致する検索結果を表示させるページ作成や作成したページとgoogleカスタム検索を連動させるなどの作業が必要です。

検索結果ページを作成する

まず、検索結果を表示してくれる別途のページが必要になります。適切な名前をつけて例えば、"search-result.html"、html検索結果ページを作っておきます。

当サイトの場合は、http://www.billionwallet.com/gsearch/search-result.htmlのパスを用意しました。

検索結果ページurlを指定する

ここで、Google カスタム検索の検索結果コードの取得画面に戻り、検索結果の詳細ボタンをクリックして、事前に作成しておいた、検索結果ページのurlを入力します。これで連動することになりました。

検索結果ページにコードを貼り付ける

検索結果コードをページ内に検索結果を表示させたい個所に下記の検索結果コードを貼り付けます。設置場所は<body>～<body>要素にて、<div>～<div>間に入れます。

<html>
 <head>
<title>google検索ボックスコードの貼り付け</title>
 </head>
<body>
 <div class="gsearch">
  <script>
   (function() {
    var cx = '++++++++++++++++++++:++++++++++';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
        '//www.google.com/cse/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);
  })();
  <script>
    <gcse:searchbox-only></gcse:searchbox-only>
 </div>
</body>
</html>

結果、検索ボックスにてキーワード検索をすると、下記のように合致する検索リストが表示します。

ホームページにGoogle カスタム検索エンジンを設定する 《2》