クリボウの Blogger Tips: Blogger で「関連記事」リストを表示する 2 つの方法 を参照して「３行コピペでできる方法」を今日試したのだが、期待どおりに動作しなかった。具体的には、関連記事のリストが表示されるべき位置に「キーを取得してください」という旨のエラーメッセージが表示されてしまった（英語だった）。
問題のJavaScriptを提供しているbrpsプロジェクトページ brps - Blogger Related Posts Service - Google Project Hosting を調べたら、「ClientGasJs」のページに違う方法が書いてあった。BRPSデータベースを使う方式から、Google AJAX Search APIを使う方式に変えた、ということらしい。
こちらの方法はうまく動作したので、メモしておく。
- 1. Blogger 管理画面「レイアウト ＞ HTML の編集」ページを開く
- 「ウィジェットのテンプレートを展開」にチェックを入れる
- 2. 関連記事を表示したい場所に
<div id='gas-results'/>等を追加 <b:if cond='data:blog.pageType == "item"'> <div> <h3>Related Posts</h3> <div id='gas-results'/> </div> </b:if>見出しに相当する
h3の部分は、利用しているテンプレートに依存する（h2やh4を使うほうが適切な場合もあるだろう）。<b:if>...</b:if>で囲んでいるのは、一つの記事だけが表示される場合に限り関連記事を表示するため。トップページやアーカイブページのように複数記事が表示される場合、今回の方法はうまく動作しない（1番上にある記事しか関連記事が表示されない）。- 3.
</body>の前あたりにJavaScriptを追加 <b:if cond='data:blog.pageType == "item"'> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js'/> <script> window.brps_gas = { // remove_tags: ['unwanted_tag1', 'unwanted_tag2'], // tag_selector: 'a[rel=tag]', limit: 5, // add_sites: ['secondblog.blogspot.com', 'thirdblog.blogspot.com'], remove_string_regexp: /^.*?: /, exclude_url_regexp: /(\/search\/label\/|(archive\.html|blog\.example\.com\/|\.blogspot\.com\/)$)/, html_loading: '<span>Loading...</span>', html_no_results: '<span>Found no results.</span>' }; </script> <script src='http://brps.appspot.com/gas.js'/> </b:if>jQueryをすでに利用している場合、
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js'/>は必要ない。動作を調整するためにremove_tags, tag_selector, limit等のオプションを指定できるので、状況に合わせて調整する。自分の場合は不要だったので//でコメントアウトしたが、- 関連記事を洗い出すときに無視して欲しいラベル（tag）があれば、
remove_tagsの所に列挙する - ラベル（tag）のhtmlコードをカスタマイズしているのであれば、
tag_selectorの所で変更する - 複数のドメインでブログを書いているのであれば、
add_sitesの所に列挙する。
- 関連記事を洗い出すときに無視して欲しいラベル（tag）があれば、
以上の操作を行ってレイアウトを保存すればhtmlに反映される。あとは必要に応じてCSSを調整すればOK。
