jQueryで作るカテゴリRSSを使った関連記事プラグイン [livedoor Blogカスタマイズ] : ずっと工事中

共通テーマ：: ライブドアブログのカスタマイズテーマに参加中！

折角なので、jQueryを使ってブログのカスタム用ソースをもう一つ作ってみました。
livedoorブログのカテゴリRSSを読み取って、個別記事ページに関連記事をリスト表示するプラグインです。好みがあるとは思いますが、関連記事リストはサイトナビゲーションとしてはなかなか有効らしいですね。

設置方法シンプルにはプラグインを追加するだけにしました。テンプレートに手を入れたりFTPでjsファイルをアップロードしたりという操作は不要です。

設置のしかたは

前回と同じです。
jQueryを設置していないブログではJavaScriptプラグインを作って↓のURLを設定してください。

http://parts.blog.livedoor.jp/js/jquery.js

次に以下のソースをフリーエリアに貼り付けます。

プラグインの順序はjQueryのJavaScriptプラグインが先、ソースを貼り付けたフリーエリアが後にくるようにします。
プラグインの順序は「カスタマイズ/管理」の中の「プラグインの設定」で変更することができます。

殆どのブログで動くと思いますが、テンプレートの関係で動かない場合もあります。
その場合はコメントして戴くか、もしくはlivedoorナレッジで質問していただいても構いません。

ソースコード

<script type="text/javascript"><!--
(function() {
  // 個別記事の判別
  if(!document.URL.match(/\d{8,}\.html$/)) return;

  // 記事カテゴリのaタグ要素を取得
  var $cate = $('div#main a[@href*="/archives/cat_"],div#blog a[@href*="/archives/cat_"]');
  var c_cate = 0;
  var article = new Array();

  $cate.each(function() {
    var url = $(this).attr('href').replace(/html$/, 'xml');

    // Ajaxリクエスト
    $.get(url, '', function(xml){

      // XMLのitem毎のループ
      $('item', xml).each(function() {
        var link = $('link', this).text();

        // 開いているページを除く
        if(!document.URL.match(link)){
          // エントリーの重複を避けるため記事URLをキーにする
          article[link] = {};
          article[link].title = $('title', this).text();
          article[link].date = $('date', this).text();
        }
      });

      // 全てのリクエストが返されると実行する
      if(++c_cate == $cate.length) {
        // 日付順に並び替え
        article.sort(function(a, b) {a.date > b.date ? 1 : -1});

        // リスト作成
        var $ul = $('<ul class="relatedarticles"></ul>');
        var j = 0;
        for(var i in article) {
          $('<li />').append(
            $('<a />').attr('href', i)
            .text(article[i].title)
          ).appendTo($ul);

          // 表示件数
          if(++j == 7) break;
        }

        // リストをページに挿入する
        $('div#ad').before($('<h3>関連記事</h3>'),$ul);
      }
    }, 'xml');
  });
})();
--></script>

メモ

開いている記事が属しているカテゴリ情報を、ページ中のカテゴリ・リンクから取り出して、カテゴリRSSのAjaxリクエストを出しています。
もちろん記事にカテゴリが設定されていなければリストは出ないです。個別記事ページにカテゴリページへのリンクが無くてもだめです。
なんちゃってマージというか、2つのXMLリクエストを出した場合は重複ページがあってもリスト上では重複がないようにしてあります。
現在開いているページはリストから省いています。
記事は日付の新しい順でソートしています。必要なければ該当行を削除してください。
RSSの最大件数（=15件、2つカテゴリがある場合は30件、両RSSの記事に重複がある場合は更に減ります）を超える記事数を表示することはできません。
表示件数は「if(++j == 7)」の数値で設定できます。
分かりやすいように変数を作ろうかとも思いましたが、なんとなくやめました。要望があればバージョンアップで対応します。
最後の方にある「リストをページに挿入する」行ですが、上記の例では広告のあるdivブロックの前に関連記事リストを挿入する記述になっています。
表示できない、挿入する位置を変えたい、見出しを変えたい、見出しのh3タグを変えたい…といった場合はこの行を変更すると良いです。
少し手を入れれば個別記事ページ以外でも動作させることはできるかもしれませんが、訪問者側からすると相当鬱陶しいのでやめた方がいいです。

表示サンプル

恐らく全ての個別記事に表示されていることと思います。

同じカテゴリの最新記事を表示する機能が2つのカテゴリを設定できるようになったので、サンプルは撤去しました。
短い命だったなーなんて思いつつ、実は要望を出したのは私だったりして＾＾；
(2008/07/29追記)

livedoor Blog 開発日誌: 同じカテゴリの最新記事を表示する機能を追加しました(7/29 Update!!)

livedoor Blogへの要望・アイデアまとめページ > 関連記事一覧を表示する独自タグ - Fixdap

タグ：: JavaScript; AJAX; jQuery; ブログ・カスタマイズ; RSS

ずっと工事中