Googleカスタム検索「Google AJAX Search API」

Google AdSenseのカスタム検索を設置してみた。検索ボックスを作成したかっただけなのですが・・

Google AdSenseにログインしてAdSense設定

手順通り進んで”検索コードを取得”したら、「カスタム検索」「検索結果ページ」にコードを貼り付け。

検索結果ページは「page.php」を以下のようにテンプレートにして名前を付けて保存し、FTPでアップロードしておく。

<?php
/*
Template name:search_google
*/
?>
<?php get_header(); ?>

次にページ作成からこのテンプレートを選択して以下のコードを記述。検索結果のサイズは（width=”800″）以上でないとNGなので表示ページを1カラムに変更。その場合「<?php get_sidebar(); ?>」は削除しないとページからはみ出てしまうので注意！また、「<div id=”content”></div>」内はCSSでサイズ調整が必要。ページのエンコード形式は、「UTF-8」。

サンプルコード：検索結果ページ

<style type="text/css">
@import url(http://www.google.com/cse/api/branding.css);
</style>
<div class="cse-branding-bottom" style="background-color:#FFFFFF;color:#000000">
  <div class="cse-branding-form">
    <form action="検索結果ページ" id="cse-search-box">
      <div>
        <input type="hidden" name="cx" value="サイト運営者 ID" />
        <input type="hidden" name="cof" value="FORID:10" />
        <input type="hidden" name="ie" value="UTF-8" />
        <input type="text" name="q" size="14" />
        <input type="submit" name="sa" value="&#x691c;&#x7d22;" />
      </div>
    </form>
  </div>
  <div class="cse-branding-logo">
    <img src="http://www.google.com/images/poweredby_transparent/poweredby_FFFFFF.gif" alt="Google" />
  </div>
  <div class="cse-branding-text">
    &#12459;&#12473;&#12479;&#12512;&#26908;&#32034;
  </div>
</div>

サンプルコード：ウィジェットなどに貼り付け

<div id="cse-search-results"></div>
<script type="text/javascript">
  var googleSearchIframeName = "cse-search-results";
  var googleSearchFormName = "cse-search-box";
  var googleSearchFrameWidth = 920;
  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>

設定時に検索結果のスタイルを自分好みにしておく事ができます。いろいろ試してみてください！

Googleカスタム検索「Google AJAX Search API」

Google AdSenseのカスタム検索を設置してみた。検索ボックスを作成したかっただけなのですが・・

この記事をご覧なった方はこちらもご覧になっています

関連記事

コメントを残す