fb:comments: コメント欄プラグインで新着通知を受け取る : Facebook開発者向けドキュメントの日本語訳とTips

2011/03/03 補足：fb:commentsの仕様変更後の新着通知という補足エントリを書きました

2011/03/02 補足：この記事を出して数時間で、コメント欄の仕様が変わってしまいました。
あとで和訳部分の補足をして、この記事に関しても変更が必要だったら書きます。

先週の「ブログにFacebookコメント欄を設置する時の設定：時系列表示など」という記事で、最後に以下のように書きました。

Legacy FBMLのfb:commentsではsend_notification_uidという項目があって、指定したユーザに対してコメント通知が送れてたらしいんですが、XFBML版では設定できないようです。表示されたコメント欄右下のAdminister commentsをクリックすると設定が出るんですが、皆、そこからやってるんでしょうか？？

おさらい

旧FBMLのfb:commentsでは send_notification_uidにユーザのidを指定することで新着通知が送れたのですが、その項目がXFBMLでは使えなくなっています。そこで、何か代わりになるものがあるんではないかと探して見つけたのが、下のキャプチャ右下にある「Administer Comments」というメニューです。

下記のようにウィンドウが開きます。

ここの「Notification Subscribers」という項目の「include me」をチェックすると、新着通知が送られてきそうに見えます。で、みんなはここから設定してるんだろうか、というのが「ブログにFacebookコメント欄を設置する時の設定：時系列表示など」で書いていたことです。

ここを設定した後に自分自身でコメントしても通知がなかったので、同僚の方のアカウントでも試してもらったりしたんですが、やっぱり通知は着ませんでした。

調べてみると、この通知設定も既にサポートされていないらしいことが分かりました。Forumにある「Facebook Platform Developer Forum / [TLK] Comments Box」の2010年10月の回答で、この昨日は無効になっていると書かれています。

This feature has been disabled,
if you want you can get notifications to your email, for this follow my Comments-box email-notifications tutorial.

ここで参照されているページに行くと、代替手段の紹介です。

代替手段

まず、

<fb:comments xid="1234"></fb:comments>

のように書かれている部分に、以下のようにtitleとurlとnotify="true"を足します。

<fb:comments xid="1234" title="My page title" url="http://example.com/news/1234" notify="true"></fb:comments>

そして<head>内でjQueryを読み込みます。

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

それから下記を足す、もしくは下記jsをダウンロードしてそれを足します。
（FB.Event.subscribe('comments.add', function(response) {}) )の中身がコメント投稿時に実行され、内容がサーバへPOST送信されます。）

<script type="text/javascript"
src="http://fbcomments-email-notifications.googlecode.com/files/CommentsboxEmailNotifications.js"></script>

「Download the PHP file」をダウンロードして自分のサーバに置きます。（上記関数から送られてくる情報の受け口です。）

最後に、下記jsを書き足して該当箇所を変えると完了です。

<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'YOUR APP ID',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});

/* --- Email Notifications begin --- */
// Send to email - enter the recipient email address (admin email) //
var cn_sendtoemail = 'admin@example.com';

// From Name - enter the from sender name (website name) //
var cn_fromname = 'My site name';

// From Email - enter the from email address (website email)
// Must to be from your domain, if your domain is: example.com then use: info@example.com
// It's can also be a fake one as: blabla@example.com
// It's can NOT be 'noreply' as: noreply@example.com //
var cn_fromemail = 'info@example.com';

// Subject - enter a custom email message subject text (default is 'false') //
var cn_subject = 'false';

// Title - enter a custom email message title text (default is 'false') //
var cn_title = 'false';

// SendPHP path - the path to the PHP file //
var cn_path = 'CommentsboxEmailNotifications.php';

commentsEmailNotifications(cn_sendtoemail,cn_fromname,cn_fromemail,cn_subject,cn_title,cn_path);
/* --- Email Notifications end --- */

};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
</script>

必要となる変更

無料のブログサービスなどを使っていて、自分のサーバが違うドメインなどになっている場合、多少変更が必要になると思います。多分クロスドメインのポストでCommentsboxEmailNotifications.jsが使えないので、僕は一部を変更して試しました。

$(document).ready(function(){
$.post(cn_path,{ to: cn_sendtoemail, fromname: cn_fromname, fromemail: cn_fromemail, subject: cn_subject, message: email_message }, "html");
});
});

上記箇所を下記のようにです。

$.ajax({
    crossDomain: true,
    type: "POST",
    url: cn_path,
    data: ({
         to: cn_sendtoemail,
         fromname: cn_fromname,
         fromemail: cn_fromemail,
         subject: cn_subject,
         message: email_message
    }),
    dataType: "html",
    success: function(){
        ...................
    }
});

あと、自分のメールアドレスを見える形で書いておくのもイヤだという場合は、ここにではなくサーバ側のファイルに移すのが良いと思います。

ドキュメントの間違い

<fb:comments>にnotify="true"を指定すると、コメント投稿時にFB.Event.subscribe('comments.add', function(response) {})が実行されます。下記のようにです。

FB.Event.subscribe('comments.add', function(response) { alert('コメントありがとうございます') })

ドキュメントにはcomments.createというイベント名がサポートされていると書かれていますが、JS SDK内にはcomments.addとなっているので気をつけてください。正しいのはcomments.addです。

subscribe: function(name, cb) {
    var subs = this.subscribers();

    if (!subs[name]) {
      subs[name] = [cb];
    } else {
      subs[name].push(cb);
    }
},

となっているので、FB.Event.subscribe('comments.add', .......)を何個も書いた場合も、最初のが上書きされること無く、コメント追加時に追加したい関数が足されて行きます。

タグ：: #fb:comments

Facebook開発者向けドキュメントの日本語訳とTips