検索結果を自分のウェブサイトに表示

検索向けAdSenseでは、検索された結果をGoogleが自動で作成するウェブページに表示する以外に、自分のサイト内にあるウェブページにiframeを使用して検索結果を表示させることができます。ここでは検索結果を自分のウェブページに表示させる方法について解説します。

1.「検索結果」項目の設定
2.検索ボックスコードおよび検索結果コードの確認
3.検索結果を自分のウェブサイトに設定した場合の動作確認

それでは既存のカスタム検索エンジンの設定を変更し、自分のサイトのWebページに検索結果を表示させるように変更してみます。カスタム検索エンジン一覧から対象となるカスタム検索エンジンの名前をクリックして下さい。

p20-1

カスタム検索エンジンの編集画面が表示されます。

p20-2

「検索結果」の箇所を見て下さい。現在は下記のように検索結果を「同じウィンドウの Google ページに表示」するように設定されています。

p20-3

それでは「検索結果」の設定を「iframe を使用して自分のウェブサイトに表示」に変更します。

p20-4

「検索結果を表示する URL」と「検索結果領域の幅」を指定します。検索結果を挿入する対象のWebページのURLと、挿入される検索結果の幅を指定して下さい。幅は795px以上で指定する必要があります。

指定が終わりましたら画面下部の「保存してコードを取得」ボタンを押して下さい。

p20-5

新しいカスタム検索エンジンのコードが取得できますが、今回は検索ボックスを設置するWebページに貼り付ける検索ボックスコードと、検索結果を挿入するWebページに貼り付ける検索結果コードの2つが表示されます。

p20-6

どちらもコピーしておいて下さい。これで設定は完了です。

検索ボックスコードおよび検索結果コードはそれぞれ次のようになっていました。

検索ボックスコード:

<form action="http://www.gugutasu.jp/adsense-start/search_result.html" id="cse-search-box">
  <div>
    <input type="hidden" name="cx" value="partner-pub-0123456789012345:0123456789" />
    <input type="hidden" name="cof" value="FORID:10" />
    <input type="hidden" name="ie" value="UTF-8" />
    <input type="text" name="q" size="55" />
    <input type="submit" name="sa" value="検索" />
  </div>
</form>

<script type="text/javascript" src="http://www.google.co.jp/coop/cse/brand?form=cse-search-box&lang=ja"></script>

検索結果コード:

<div id="cse-search-results"></div>
<script type="text/javascript">
  var googleSearchIframeName = "cse-search-results";
  var googleSearchFormName = "cse-search-box";
  var googleSearchFrameWidth = 800;
  var googleSearchDomain = "www.google.co.jp";
  var googleSearchPath = "/cse";
</script>
<script type="text/javascript" src="http://www.google.com/afsonline/show_afs_search.js"></script>

それではそれぞれの広告コードをWebページに貼り付けます。まず検索ボックスコードは検索ボックスを設置した全てのWebページに貼り付けます。

p20-7

次に検索結果コードを検索結果を挿入するためのWebページに貼り付けます。このWebページはカスタム検索エンジンの「検索結果」の設定で指定したURLでアクセスできるWebページです。検索ボックスで検索された結果は、すべてこのWebページを使って表示されることになります。

p20-8

これで準備は完了です。

それでは実際に試してみます。検索ボックスが設置してあるWebページから次のように検索しました。

p20-9

検索結果が自分が指定した自分のウェブサイト内にあるページに挿入されて表示されました。

p20-10

このように自分のウェブサイトに検索結果を表示することで、他のページとヘッダーやサイドバーなどの見た目を統一することができます。(なお検索結果ページに設置してはいけないコンテンツがあります。「検索向けAdSense利用時にポリシーで禁止されている事項」をご確認下さい)。

( Written by Tatsuo Ikura+ )