FC2ブログのブログ内検索をGoogle AJAX Search APIで

実際このブログのヘッダーの右上に設置しているのでぜひお試しください。検索結果が記事の右側に表示されます。今回実際このブログに設置されているものを紹介します。

まずCSSの設定です。

<link href="http://www.google.com/uds/css/gsearch.css" type="text/css" rel="stylesheet"/>
<style type="text/css">
//検索窓の長さ
  #searchcontrol ,.gsc-control {
  width : 270px;
  }
//検索結果のスタイル
  #somewhere {
  padding:10px 20px 10px 20px;
  line-height:150%;
  }
//powered by の色
  .gsc-branding-text {
  color : #fff;
  }
td.gsc-branding-img {
  width : 75px;
  text-align :left;
  }
//ページ紹介とURLを表示しない
  .gs-snippet ,.gs-visibleUrl {
  display : none;
  }
</style>

まずGoogleサーバーの外部CSSを読み込んで変更点を自分で指定します。

次にJavaScriptです。APIkeyは下記より取得してください。

<script src="http://www.google.com/uds/api?file=uds.js&amp;v=1.0&key=取得したAPIkey" type="text/javascript"></script>

<script type="text/javascript">
  //<![CDATA[
function OnLoad() {

  var searchControl = new GSearchControl();

 //リンク先を同じウインドウで開きます
  searchControl.setLinkTarget(GSearch.LINK_TARGET_SELF);
  var options = new GsearcherOptions();
  options.setExpandMode(GSearchControl.EXPAND_MODE_OPEN);
  options.setRoot(document.getElementById("somewhere"));

  var siteSearch = new GblogSearch();

 //ラベルの文字
  siteSearch.setUserDefinedLabel("サイト内検索");
  siteSearch.setUserDefinedClassSuffix("siteSearch");

 //ブログのURLを入力します
  siteSearch.setSiteRestriction("ブログのURL");
  searchControl.addSearcher(siteSearch, options);

  searchControl.draw(document.getElementById("searchcontrol"));
  searchControl.setResultSetSize(document.getElementById("searchcontrol"));

 //8件表示します。削除すれば4件になります
  searchControl.setResultSetSize(GSearch.LARGE_RESULTSET);
 }
  GSearch.setOnLoadCallback(OnLoad);
 //]]>
</script>

<div id="searchcontrol"></div>

<div id="somewhere"></div>

を挿入したら完成です。

ただインデックスされていなかったら使えません。。