Googleカスタム検索①

Googleのカスタム検索を導入してみたので、

そのメモ書きです。

まず、
以下のサイトにアクセスしてください。
http://www.google.com/cse/manage/create?hl=ja

すると、
検索エンジンの設定画面が開きます。

必須項目である「名前」「検索するサイト」を入力します。
「名前」はそのサイトに合ったものを適当に入力してやります。
「検索するサイト」は実際にサイト内検索を行いたいサイトのURLを入れてください。

今回は取り敢えず、
名前：サンプルサイト
検索するサイト：google カスタム検索

としておきます。

で、
「エディション」を選択して、
利用規約を読んだ上で「次の利用規約を読んだうえで同意します」にチェックを入れてから、
「次へ」ボタンをクリックします。

※この際、広告を表示させたくない場合には「エディション」で有料版の「Site Search」の方を選択してください。

次に、
テスト画面へ移動します。

検索結果をテストしたい方は、ここでテストしてみてください。

今回はテストは飛ばします。

で、

さらに「次へ」ボタンをクリックすると、コードの取得画面へ遷移します。

今回だと、

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

こんなソースを取得できるので、

これをサイト内のどこかにそのまま貼り付けます。

するとこんな感じでユーザー側には表示されます。

デザインなんかはいろいろカスタマイズできるので、

興味がある方は勉強してみてください。