nlog(n): Disqus でリアクションだけを表示したい

Tue August 03, 2010

Disqus でリアクションだけを表示したい

Discus コメントを使って Twitter リアクションを表示させる。コメントは抑止の方向で。

■ ■ ■

はじめに

最近，Twitter のツイートにブログ記事へのリンクがあるとき，それらのツイートを一覧で表示するサイトを見かけるようになった。多いのは DISQUS コメントシステムである。もともとはコメントの入力と表示を提供する外部システムなのだが，Twitter や FriendFeed その他のソーシャルメディアでのリアクションをサポートするようになったのである。リアクションの収集は，Disqus 自身ではなくパートナー企業の BackType が行っている。

Disqus は Movable Type 用のプラグインを公開してくれているが，残念ながら MT5 対応だと言っている (Twitter / DISQUS: Disqus Comments: Movable T ...)。サポートされている文字コードは UTF-8 である。このブログは MT2 で，しかも EUC-JP なので当然対象外。問題外の外である (それって内?)。

対策が必要なのは以下の点である。

ブログシステムのバージョンがサポート外 (Movable Type 2.661)
文字コードがサポート外 (EUC-JP)

幸いにも，Disqus は一般のシステムで使える「Universal Code」を提供してくれているので，MT の古さにはこれで対応ができる。文字コードはプラグインを書くことにする。WikiにDisqusを組み込む - KamoLand さんのまとめがとても役に立つ。

コード

文字コード変換プラグイン

Disqus がサポートしているのは UTF-8 であるが，表示には，一般に Javascript なサイトで使われる \uXXXX の形式の「Unicode エスケープシーケンス」が使われる (WikiにDisqusを組み込む - KamoLand)。そこで Unicode::Escape Perl モジュールの力を借りて，MT2 用のプラグインを書くことにした。

ファイル名は encode_ues.pl などとしてプラグインディレクトリに保存する。

package MT::Plugin::EncodeUnicodeEscapeSequence;
use strict;
use Unicode::Escape;
use vars qw($VERSION);
$VERSION = 0.1;

use MT::Template::Context;
MT::Template::Context->add_global_filter(encode_ues => sub {
  my $text = shift;
  my $charset = {
   'UTF-8' => 'utf8',
   'EUC-JP' => 'euc-jp',
   'Shift_JIS' => 'shiftjis',
   'ISO-2022-JP' => 'iso-2022-jp'
   }->{MT::ConfigMgr->instance->PublishCharset} || 'utf8';
  $text = Unicode::Escape::escape($text, $charset);
  $text;
});

1;

Shift_JIS や JIS な人も多分大丈夫。MT5 は UTF-8 以外の日本語文字コードをサポートしていないので，そもそも変換する必要がない。

テンプレートに埋め込む Javascript

コメントやリアクションを表示するために，ページには Javascript を埋め込む。Movable Type のテンプレートには次のように書く (参考: Ogawa::Buzz: MTに DISQUSを配備するには)。ベースは Disqus 提供の Universal コードで，これに MT のテンプレートタグで情報を追加した形になっている。上記のプラグインは「encode_ues="1"」で有効になる。「short_name」の部分は Disqus アカウントを取得したときのショートネームに書き換える必要がある。

<div id="disqus_thread"></div>
<script type="text/javascript">
  var disqus_url = '<$MTEntryPermalink$>';
  var disqus_title = '<$MTBlogName$>: <$MTEntryTitle encode_js="1" encode_ues="1"$>';
  var disqus_message = '<$MTEntryExcerpt encode_js="1" encode_ues="1"$>';
  (function() {
   var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
   dsq.src = 'http://short_name.disqus.com/embed.js';
   (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
  })();
</script>
<noscript><p>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript=short_name">reactions powered by Disqus.</a></p></noscript>
<a href="http://disqus.com" class="dsq-brlink">blog reactions powered by <span class="logo-disqus">Disqus</span></a>

「<div id="disqus_thread"></div>」の部分にコメントやリアクションが動的に挿入される。

HTML の </body> の直前には次のコードを書く。ここも short_name は自分のショートネームに書き換える。

コメント表示を抑止するカスタム CSS

上記のコードは Disqus のコメント表示をさせる際にも有効である。以下での目的は，コメントシステムは MT の自前のものを使い続けて，Twitter などでのリアクションだけを追加することである。したがって，Disqus のコメントとコメント入力欄は表示させたくない。Disqus は CSS のカスタマイズもサポートしているので，これを使って共生的に表示を抑止してしまうことにする。

ソーシャルメディアリアクションの表示を有効に

まず最初にソーシャルメディアリアクションの表示を有効にする。現在 Disqus が対応しているソーシャルメディアは，FriendFeed, Twitter, Digg, Reddit, Hacker News, Blogger, Wordpress, YouTube, Vimeo, Picasa, Flickr, Type Pad, Movable Type, Other services (その他) である。有効にするには，Disqus にログインして「Settings」→「General」で「Reactions」にチェックし，サービスを選んでチェックする。例えば Twitter を選ぶ。

CSS のカスタマイズ

CSS をカスタマイズするには，Firefox に FireBug などを導入するなどして，表示部分の id や class を調べる。Disqus のダッシュボードでは，上述の「General」の画面の1つ上のタブに「Customize」があるのでこれを選択する。利用できるテーマは「Narcissus」のみで，「Lite」は coming soon ということでグレーアウトしている。「Custom CSS」タブを選んで，次のコードを貼り付ける。

#dsq-comments-title { display: none !important; }
.dsq-options { display: none !important; }
#dsq-comments { display: none !important; }
#dsq-pagination { display: none !important; }
.dsq-thread-settings { display: none !important; }
#dsq-new-post { display: none !important; }

コメント関係はすべて「display: none」にしてしまうということだ。試してみたところ，「!important」で優先してやる必要があった。貼付けたら「Save Changes」ボタンをクリックする。Disqus ダッシュボードにはプレビューがついているので CSS の設定の効果を確認することができる。上記の CSS を適用すると，「0 Comments」と「blog comments by DISCUS」の2行のみになる。残念ながら Reactions のプレビューはない。

表示例と問題点

表示例

表示としては次のようになる。リアクションが少ないブログなので困るのだが…。

Disqus リアクション表示の例

例えば nlog(n): 間違っていた「ご冥福をお祈り致します」の使い方では上のように表示される。

問題点

Disqus によるリアクション表示の問題点は，すべてのリアクションが表示されないことである。

BackType の Conversations 表示

実例としては，上の nlog(n): 間違っていた「ご冥福をお祈り致します」の使い方での Disqus の表示と BackType の表示 Conversations ― BackType を比較すると，BackType の方が多くなっているのである。これが Disqus の BackType からのデータの取得に問題があるのか，それとも上記のコードに問題があるのかは今のところ不明。

まとめ

この記事では Disqus の導入の仕方についてだが，大きく2つの部分に分けられる。ひとつは文字コードが UTF-8 以外になっている Movable Type サイトにおける導入方法。もうひとつは，カスタム CSS を設定して必要な部分だけを表示するというもの。この2つのトピックは別の記事にしたほうがよかったかも知れないな。

コメントシステムを将来的に Disqus にすることを考えに入れて，今回のリアクション表示をしてみたが，若干問題があるので本格導入は見送るかも知れない。

Posted by n at 2010-08-03 21:41 | Edit | Comments (2) | Trackback(0)

Trackbacks

「手違いで複数トラックバックを送ってしまった!」という場合でも気にしないでください (重複分はこちらで勝手に削除させていただきます)
タイムアウトエラーは，こちらのサーバの処理能力不足が原因です (詳細はトラックバック送信時のエラーをご覧ください)
トラックバックする記事には，この記事へのリンクを含めてください(詳細は迷惑トラックバック対策をご覧ください)

Comments

カスタムCSSは重宝していますが、リアクション箇所のアバターアイコンのサイズが変えられずに奮闘中です。

Posted by: Takao Asayama at October 13, 2010 08:33

Takao Asayama さん
アバターアイコンのサイズは
.dsq-header-avatar img
で指定できるみたいですよ。カスタム CSS 設定は例えば次のように。
#dsq-content #dsq-comments .dsq-header-avatar img { height: 48px; width: 48px; }
引用元: http://sites.google.com/site/pressinfosofia/home/disqus

Posted by: n at October 13, 2010 13:00