amazon

Now Loading...
Now Loading...

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さんばかりだと意味が無いのでやる気が出ませんが・・・

コメント

  1. (´・ω・`)今までのより、見やすくなっておるのう……

    (ノ゜ω゜)(ノ゜ω゜)やはり、この人は……魔法使いだったんだ……

    返信削除
    返信
    1. 雨ばかりで暇だし勢いと忘れないうちに改造してます。今週中にVer2をリリースします。

      削除

コメントを投稿

最近のコメント

Threaded Recent Comments will be here.

amazon

Now Loading...

このブログの人気の投稿

フローリングのワックス剥がしを簡単にするにはどうするのが良いのだろうか

非常用の発電機を選んでみる

ビデオカメラでライブ配信をしたいのでHDMIキャプチャ機器を調べた