2008年12月27日土曜日

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

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

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

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

今回も、Googleで検索して見つけた、下記ページを参考にさせていただきました。このページでは、記事に付けられたラベルを基に、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が機能しないようです)。
# つまり、会員制とかの非公開のブログでは使えません。
投稿者 Magica 時刻: 14:48
ラベル:

関連する記事

0 コメント:

コメントを投稿