Disqusのコメントプラグインを外して Facebook Comments に変更しました。今までコメントしてくれた皆さんすいません。
DisqusはWordpressのコメントに同期してくれたりTwitterの発言まで取得できて非常に便利だったんですが、スクリプトの読み込みとレンダリングが遅くて、最近は特に読み込み自体がエラーになることが頻発していました。
標準のコメント機能を使うのは嫌だったので、いろいろ検討した結果、スクリプトの読み込みとレンダリングが遅いのは変わりませんが、仕事で必要な気がしたので、Facebook Commentsを導入してみることにしました。
というわけで、導入メモを残しておきます。
簡単導入
簡単に導入したい場合はプラグインがオススメです。
設定も豊富で、OGPにも対応のプラグインがあるので、すぐに導入可能です。
Facebook Comments for WordPress
アプリIDを取得して、高度なセットアップをする事も可能ですし、簡単な設定ですぐに始める事も可能です。
ただ、これでは面白くないので、全部手動で設定してみます。
コードの取得
コードの取得は以下のURLから取得できます。
Comments – Facebook Developers
これを元に、WordpressテンプレートのPostループの中に入れてパーマリンクのタグを入れるとこんな感じです。
<?php while (have_posts()) : the_post(); ?>
...
<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<fb:comments href="<?php the_permalink() ?>" num_posts="2" width="500"></fb:comments>
...
<?php endwhile; ?>
ここから、必要ない物を除いていきます。
<div id="fb-root"></div>
これは無くても動きます。というより、同画面内で「いいね」ボタンとかある場合に、生成したコードをそのまま使っていたらidカブります。<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
これも、一度読み込めばよいので、ループ外のヘッダーかフッターに入れましょう。num_posts="2" width="500"
num_postsはデフォルトでいいや、とか。幅は後で100%指定したいからいいや、とか。で消してしまいます。
ということで、必要なコードがシンプルになりました。
<fb:comments href="<?php the_permalink() ?>"></fb:comments>
次に headタグ 内、もしくは bodyタグ内の最後 にスクリプトの読み込みコードを入れます。
日本語環境なので、「en_US」は「ja_JP」にしましょう。
<script src="http://connect.facebook.net/ja_JP/all.js#xfbml=1"></script>
最後に html タグの属性にネームスペースを追加します。
<html lang="ja" xmlns:fb="https://www.facebook.com/2008/fbml">
横幅をコンテンツ幅に合わせる
このサイトは横幅が一定範囲内で可変に作ってあるので、横幅をピクセルで指定すると都合がよくありません。またiPad等のタブレットから見る場合もあります。
「width=”100%”」とか書ければいいのですが、出来ないので CSS で対応します。
<style type="text/css">
#comment-block iframe, #comment-block .fb_iframe_widget { width: 100% !important; }
</style>
<div id="comment-block">
<fb:comments href="<?php the_permalink() ?>"></fb:comments>
</div>
これで #comment-block の幅にフィットします。
iPhone対応
このサイトではiPhoneへの対応に WPtouch を使っています。WPtouchはプラグイン内に専用のテンプレートを使っているのでその対応をします。ただ、アップデートの度にテンプレートファイル全体が入れ替わってしまうので、直接編集するのは避けたいところです。
そこでプラグインの設定画面の「Adsense, Stats & Custom Code」の中の Stats & Custom Code にコードを書きます。
ここに書かれた内容はHTMLのまま Bodyタグ内の最後に追加されますので、Facebookのスクリプトファイルの読み込みと、fbタグを生成するjavascriptを記述します。
<style type="text/css">
#comment-block iframe, #comment-block .fb_iframe_widget { width: 100% !important; }
</style>
<script src="http://connect.facebook.net/ja_JP/all.js#xfbml=1"></script>
<script type="text/javascript">
(function() {
var newdiv=document.createElement("div");
newdiv.id = 'comment-block';
newdiv.className = 'post';
newdiv.innerHTML = '<fb:comments href="'+location.href+'" width="300"></fb:comments>';
document.getElementById("bookmark-box").parentNode.appendChild(newdiv);
})();
</script>
コメントの管理
Facebookでアプリケーション登録して以下のメタタグを追加すると、禁止ワードでのコメント管理や、通知機能が使えます。
<meta property=”fb:app_id” content=”{アプリケーションID}”>
<meta property=”fb:admins” content=”{ユーザーID}”>
また、OGP仕様のメタタグを設定することでウォールに表示される画像を変えたりできますので、是非設定しましょう。