関連記事リストを追加してみた

iPhone工房にも、他のブログでよく見かける「関連記事リスト」を追加してみました。各記事の個別ページで、記事の後ろに関連しそうな記事へのリンクが表示されます。

ところで、Bloggerを使用している人ならご存知でしょうが、Bloggerには「関連記事リスト」を自動生成するような機能は用意されていません。では、どうやったのかと言うと・・・。

世の中には似たようなことを考える人は必ずいるもので、ググれば大抵、解決策(あるいはそのヒント)が見つかるものです。

今回も、Googleで検索して見つけた、下記ページを参考にさせていただきました。

• Bloggerに「関連記事リスト」を。

このページでは、記事に付けられたラベルを基に、BloggerのGDATA APIを利用して関連記事を検索し、一致するラベルの数・投稿日でソートして表示する、という方法を採用しています(いわゆるAJAXの手法ですね)。

組み込み方等、詳細については記述されていませんが、「気になる方はこのページなりJavascriptなファイルなりを参照して下さい」とのことでしたので、遠慮なく、参照して一部手直しの上、利用させていただきました(^^)。この場を借りてお礼申し上げますm(__)m。

さて、ここで、簡単に組込み手順を説明しておきます。興味のある方は参考にしてください。

1. 関連記事リスト作成用のJavaScriptを入手する
   このページのソースを表示して、
   <!-- InsertRelativeLinks begin --> から
   <!-- /InsertRelativeLinks end --> までを
   テキストファイルにコピーし、適当な場所にセーブしてください。
   
   もしくは、上のページを参照して、InsertRelativeLinks.jsファイルをダウンロードしてください。
   # ただし、オリジナルのスクリプトは、ラベルで絞り込んだ記事が1件のみの場合、一覧ページでも関連記事リストが表示されます。必要に応じて修正して下さい。


2. テンプレートに関連記事リスト表示用のタグを追加する
   Bloggerの[レイアウト]-[HTMLの編集]ページで、[ウィジットのテンプレートを展開]にチェックを入れ、テンプレートを以下のように変更します。

   <b:includable id='comments' var='post'>
     <div class='comments' id='comments'>
       <a name='comments'/>
       <!-- add by Magica -->
       <div>
       <h4>関連する記事</h4>
       <div class='sidebar' id='RelativeLinks'/>
       </div>
       <!-- /add by Magica -->
       <b:if cond='data:post.allowComments'>

   斜体字の部分が追加するタグです。挿入する場所は「id='comments'」で検索してください。
   
   なお、class='sidebar'となっているのは、関連記事リストのスタイルを、サイドバーのリストスタイルに合わせるためです。必要に応じて変更してください。


3. 関連記事リスト作成用のJavaScriptをページの一番最後に追加する
   Bloggerの[レイアウト]-[ページ要素]ページで、HTML/JavaScriptガジェットを追加して、手順1でセーブしておいた、関連記事リスト作成用のJavaScriptをページの一番最後に追加します。
   
   ページの一番最後でないと、他のブログパーツ等と競合して、正常に動作しない場合がありますので注意してください。

これで、記事の個別ページに関連記事リストが表示されるようになります。

なお、ブログの閲覧者が「全てのユーザー」になっていないと、関連記事リストは表示されませんのでご注意を(GDATA APIが機能しないようです)。
# つまり、会員制とかの非公開のブログでは使えません。