自サイト内検索にGoogle Co-opを導入


以前「WWW.WATCH」内でみつけたGoogle Co-op というサービス。これがなかなかよさそうだったのを思い出し自分のサイトにも組み込むことにしました。

Google Co-opはユーザーが自由にカスタマイズした検索エンジンを作ってしまうことができるサービス。例えば、いくつかの特定ウェブサイト内だけを検索するようにカスタマイズすることなどが可能です。
Google Co-op で My 検索エンジン(WWW.WATCH)

1.Google Co-op でカスタマイズした検索エンジンをつくる

Google Co-op のサイトにいき Google アカウントで sign in します。Google Adsense のアカウントではないので注意してください。

新規に検索エンジンを作成するので「Create a Search Engine」をクリックします。
次のページで情報を入力していきます。

検索エンジン名、検索エンジンの説明は適当に入力(日本語でもいけるのかは不明です)。キーワードには自分のサイトに関連の深いものを選んでおきます。
言語は「 japanese 」を選択します。

「 Sites to search 」に入力したURLが検索対象になります。自分のサイト内だけなので一行目に自サイトのURLを入力。
複数サイトを検索したいときは一行につきURLひとつを入力します。

くどいですが、検索対象は自サイトだけなので「 Search only these sites 」「Only people I invite may contribute to htis search engine 」をそれぞれ選択します。

利用規約に同意するチェックボックスにチェックを入れ、「Next 」をクリックします。

次のページで「Finish 」をクリックすれば自分のサイト用の検索エンジンが完成します。

2. 検索フォームの設置

Google Co-op

My search enginesのページで今作った検索エンジン名の横の「 control panel 」をクリックします。

Google Co-op

メニューから「Code 」を選択します。

ページ内の「Search box and search results code for your website」 をクリックします。

Google Co-op

一番上に検索結果を表示させるページの URl を入力します。
ここではドメイン直下に「 search.html 」というHTMLファイルをおいています。自サイトに合わせてここは書き換えてください。
HTMLである必要もなくPHPファイルでも大丈夫です。
広告の表示場所を選択するラジオボタンをチェックしたら「 Sava Changes 」をクリックしておきます。

ふたつコードがありますが、上が検索フォーム、下が検索結果を表示するためのコードです。
まずは上のコードをコピーして検索フォームを設置したい部分にペーストします。
次に下のコードをコピーして「 search.html 」内の検索結果を表示させたい部分にペーストしましょう。

var googleSearchFrameWidth =600;

上記の部分は検索結果の表示幅を表わしているので自サイトのデザインにあわせます。「 500 」以下にはできないそうなので注意ですね。

3. 検索結果の文字色や背景色を変更する

上部メニューから「 Look and feel 」をクリックします。

Google Co-op

自サイトのデザインに合わせて文字色や背景色を変えることができます。ここで設定するだけで変更が適用されるので貼り付けたコードを変える必要はありません。
管理がとても楽ですね。

そうのひとりごと

© 2017 PAOLOG