アメブロの検索ボックスをGoogleAjaxSearchにしてみる | アメブロ解体新書

アメブロ解体新書

Amebaブログウォッチング・・・

以前はGoogleのAPIはAPI keyが必要だったんですがいつの間にか不要になってたので燃料投下・・・

あまり検索精度が良くないアメブロの検索ボックスをGoogleAjaxSearchで代用するスクリプトです。

まずはフリープラグインに以下を追加します。

<script src="https://www.google.com/jsapi"></script>
<script>
google.load("search", "1");
</script>

<script>
function OnLoad() {
var searchControl = new GSearchControl();
var siteSearch = new GwebSearch();
siteSearch.setSiteRestriction("http://ameblo.jp/webmemorandum/");
siteSearch.setUserDefinedClassSuffix("siteSearch");
searchControl.setLinkTarget(GSearch.LINK_TARGET_SELF);
searchControl.addSearcher(siteSearch);
searchControl.draw(document.getElementById("searchcontrol"));
}
google.setOnLoadCallback(OnLoad);
</script>


3行目の

google.load("search", "1");


これでGoogleAjaxSearchのライブラリを読み込みます。

10行目の

siteSearch.setSiteRestriction("http://ameblo.jp/webmemorandum/");


ここにブログのURLをいれます。例だと当ブログのURLになってるのでそのままコピペするとうちのブログの検索結果が表示されちゃうので必ず変更してください。

表示させたい場所に

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


これを挿入します。挿入といってもアメブロの場合フリースペースかフリープラグインしかないのでどちらかに追加してください。

アメブロのお約束で

・フリースペースはメニューの最初に配置する
・フリープラグインはメニューの後ろのほうに配置する

のが基本なのでフリースペースに入れるのをオススメしておきます。「Loading...」の部分はローディングのgif画像にするとAjaxっぽくていいかもしれません。

あと、気をつけて欲しいのは「<div id="searchcontrol">Loading...</div>」を表示するサイドは幅が広いカラムを選択すること!!

GoogleAjaxSearchのデフォルトのCSSはかなり面倒な仕様になってるんで変更がめっちゃ大変なんですけどアメブロの広いほうのサイドカラムは横幅300pxなのでCSSをいじらなくてもすんなりアメブロのサイドカラムに収まります。

いちおう当ブログにも設置してありますので試しに検索してみてください。

(Ajaxなんで当たり前ですが)検索結果がページ遷移することなく表示されます。

もう一点・・・ブログのページがGoogleにインデックスされてないと検索結果に反映されません 当たり前ですけど・・・