Threaded Recent Comments v1.51をリリースしました

久しぶりにThreaded Recent Commentsを更新します。
ページへのコメントを表示する際にページタイトルを取得できるようにしました。

Threaded Recent CommentsはGoogle Blogger Blogのコメントを対話的に表示できるjQuery Pluginです。本ブログの下の方に設置してあるブログパーツです。

3年ぶりの更新です。細かい修正はしていましたが、中身は大きくいじっていませんでした。
今回は常々気になっていた、ページへのコメントでページタイトルの取得ができない問題を修正しました。

Threaded Recent Commentsの基本的な説明はこちらをご覧ください。
スレッド対応最近のコメントを LINE風に表示してみた

jQuery Pluginとして動きます。
CSSにより一覧表示や吹出表示をする事ができます。

今回はバージョンはv1.51となります。
スクリプトはこちらにおいてあります。
ThreadedRecentCommentsV151_mini.js Google Drive

Google Bloggerの仕様変更によりコメントの取得数は最大150件となります。

bloggerに設置するには別途 このJavaScriptとcssをホストする場所が必要です。
ホスティングの場所としてFirebaseを利用する方法があります。
Google Driveのホスティングサービスが終了したのでFirebaseへ乗り換えてみる

jQuery Pluginですので、jQueryを読み込む設定をしてください。
ホスティング場所を確保したら次のコードでコードとCSSを呼び出します。

<script defer type="text/javascript" src='https://HOST-URL/ThreadedRecentCommentsV151_mini.js' ></script>
<link rel="stylesheet" href="https://HOST-URL/TRC_BaloonV102.css" type="text/css" />

ブログのどこかに書いておきます。
ブログ記事にはIDを指定した要素を設定しておきます。class名を"TRC_feed"とする事でCSSの設定が適用されます。

<div id="TRC" class="TRC_feed">Loading...</div>

そして、次のJavaScriptを書いておくとコメントが流し込まれます。

<script type="text/javascript" charset="UTF-8">
//<![CDATA[
<!--
//============================================================
// Threaded Recent Comments
// Google Blogger用 最近のコメント表示 JQuery Plugin
//
// 2017/08/14: Ver.1.51 ページタイトルの取得
// 2014/09/21: Ver.1.32 エラー処理部修正
// 2014/08/29: Ver.1.31 CSS修正
// 2014/08/27: Ver.1.30 DOM構造見直し 吹き出しスタイル対応
// 2014/08/24: Ver.1.23 スタイル指定を分離した
// 2014/08/22: Ver.1.22 JQueryのプラグイン化
// 2014/08/21: Ver.1.11 パラメータを配列にして変数を削減
// 2014/08/20: Ver.1.10 コールバック関数を分離しグローバル変数を削減
// 2014/05/22: Ver.1.02 タイトルを取得できかった場合の処理を追加
// 2014/05/07: Ver.1.01 ビュレットを三角記号にする.main-inner .widget ul li, .main-inner .widget #ArchiveList ul.flat li
// 2014/04/29: Ver.1.00 初版
//     https://signal-flag-z.blogspot.com/
//      Copyright 2014-2017 Signal Flag "Z"
//============================================================

jQuery(document).ready(function () {
 jQuery('#TRC').ThreadedRecentComments({
  yourURL: "http://YOUR-BLOG.blogspot.com/",
  itemCount: 4,
  daysNew: 7,
  isMobile: /[?&](m=1)[&]?/g.test(location.href)
 });
});
//-->
//]]>
</script>

異なるIDを用いれば複数の異なるコメントフィードを表示できます。

次にやりたいのは名前を識別して左右に吹出を分ける事です。DOM構造の再設計が必要なのと、Anonymousさんばかりだと意味が無いのでやる気が出ませんが・・・