2011年8月3日水曜日

GoogleのBloggerに関連記事を表示する(brps - gas.js)

クリボウの Blogger Tips: Blogger で「関連記事」リストを表示する 2 つの方法 を参照して「3行コピペでできる方法」を今日試したのだが、期待どおりに動作しなかった。具体的には、関連記事のリストが表示されるべき位置に「キーを取得してください」という旨のエラーメッセージが表示されてしまった(英語だった)。

問題の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 == &quot;item&quot;'>
    <div>
      <h3>Related Posts</h3>
      <div id='gas-results'/>
    </div>
  </b:if>

見出しに相当するh3の部分は、利用しているテンプレートに依存する(h2h4を使うほうが適切な場合もあるだろう)。<b:if>...</b:if>で囲んでいるのは、一つの記事だけが表示される場合に限り関連記事を表示するため。トップページやアーカイブページのように複数記事が表示される場合、今回の方法はうまく動作しない(1番上にある記事しか関連記事が表示されない)。

3. </body>の前あたりにJavaScriptを追加
<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <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の所に列挙する。

以上の操作を行ってレイアウトを保存すればhtmlに反映される。あとは必要に応じてCSSを調整すればOK。

0 件のコメント:

コメントを投稿