https://www.billionwallet.com > Google > WebサイトにGoogleカスタム検索エンジンを設定する《2》
それでは、Google カスタム検索の設定から取得されたコードを自分のページに直接貼り付けてみましょう。まず、最初に取得した検索ボックスコードから始めます。
このコートは、ページ内で検索キーワードを入れて検索ボタンを押す検索窓を設置するのために必要なコードです。検索ボックスを表示したい個所に下記のコードを貼り付けます。
設置場所は<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カスタム検索を連動させるなどの作業が必要です。
まず、検索結果を表示してくれる別途のページが必要になります。適切な名前をつけて例えば、"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>
結果、検索ボックスにてキーワード検索をすると、下記のように合致する検索リストが表示します。
スポンサーリンク
スポンサーリンク
Category
BILLION WALLET Copyright©All rights reserved