Googleのカスタム検索を導入してみたので、
そのメモ書きです。
まず、
以下のサイトにアクセスしてください。
http://www.google.com/cse/manage/create?hl=ja
すると、
検索エンジンの設定画面が開きます。
必須項目である「名前」「検索するサイト」を入力します。
「名前」はそのサイトに合ったものを適当に入力してやります。
「検索するサイト」は実際にサイト内検索を行いたいサイトのURLを入れてください。
今回は取り敢えず、
名前：サンプルサイト
検索するサイト：google カスタム検索
としておきます。
で、
「エディション」を選択して、
利用規約を読んだ上で「次の利用規約を読んだうえで同意します」にチェックを入れてから、
「次へ」ボタンをクリックします。
※この際、広告を表示させたくない場合には「エディション」で有料版の「Site Search」の方を選択してください。
次に、
テスト画面へ移動します。
検索結果をテストしたい方は、ここでテストしてみてください。
今回はテストは飛ばします。
で、
さらに「次へ」ボタンをクリックすると、コードの取得画面へ遷移します。
今回だと、
1 2 3 4 5 6 7 8 9 10 11 12 13 | <!-- Put the following javascript before the closing </head> tag. --> <script> (function() { var cx = '001963001459958428322:icpwdrhhguc'; 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> <!-- Place this tag where you want both of the search box and the search results to render --> <gcse:search></gcse:search> |
こんなソースを取得できるので、
これをサイト内のどこかにそのまま貼り付けます。
するとこんな感じでユーザー側には表示されます。
デザインなんかはいろいろカスタマイズできるので、
興味がある方は勉強してみてください。
この記事へのコメントはありません。