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