MTにGoogle AJAX Search APIを導入する方法

記事の数が増えてくるとMTの検索を利用される方も相対的に多くなってきますが、デフォルトの検索ではレスポンスが悪くて、結果が表示される前にページを離脱してしまう人が現れかねないと感じてました。こんなものはいち早く検索向けAdsenseにでも置き換えてしまおうとも思ったのですが、検索まわりをいじるせっかくの機会なので、以前から興味のあった「Google AJAX Search API」を利用した検索を導入してみることにしました。

API Keyを取得

Google AJAX Search APIを利用するために、API Keyを取得します。

やたらと長いKeyが表示されますが、とりあえずテキストファイルに保存しておくなりしてメモしましょう。

MTに導入

登録が完了するとHTMLのコードが表示されますが、とりあえずこれは無視してください。何も考えずに次のコードを新しいウィジェットとして登録します。

<div class="widget-search widget">
   <h3 class="widget-header">Search</h3>
   <div class="widget-content">
     <script src="http://www.google.com/jsapi?key="your api key" type="text/javascript"></script>
     <script src="http://...../google-search.js" type="text/javascript"></script>
     <style type="text/css"/>
      .gsc-control { width: auto; }
     </style>
     <div id="searchcontrol">Now Loading...</div>
   </div>
</div>

key="your api key"とした箇所には、先ほどメモしたAPI Keyを入力。それが終了したら次のファイルをダウンロードしてください。

先ほどずらっと表示されたコードを外部のJavaScriptにしただけ。必要最低限の内容です。これの8行目 siteSearch.setSiteRestriction を検索対象としたい URL に変更して保存。その後、任意の場所にアップロードし、上記コード5行目のパスを変更します。

完成

あとはウィジェットセットで作成したウィジェットを登録、再構築で完成。とっても簡単でした。ちなみにLoading…の箇所は Ajaxload 等で作成した画像に置き換えることも可能です。

コメントを書く

Your email is never shared. * 印の項目は必須項目です。

*
*