nDiki : 2011年02月11日

2011年2月11日 (金)

Facebook コメントボックスをつけた

最近 Facebook のコメントボックスをつけているサイトを見かけることが多くなった。Facebook にログインしている状態だと自分のアイコンがそこに表示されているので、いつもちょっとビックリする。

ということでビックリ用にここにも設置してみた。以下手順。

1. XBML コードの取得

で Get Code を押すと XFBML コードの書かれたダイアログが表示されるのでこれをコピー。

2. アカウント認証する (まだならば)

次に同ダイアログの registering your site というリンクを選択する。

初めてなのでアカウント認証を求められる携帯電話メールアドレスかクレジットカード番号が必要のようだ。ここではNTTドコモメールアドレスを指定した。ケータイメールが届いたら確認用のコードを入力して認証完了。

3. アプリ ID の取得

registering your site というリンク先の Create an App ページで[サイト名]と[サイトURL]を入力してアプリ ID を取得する。

4. XFBML コードを記事に埋め込む

先に取得した XFBML コード中の APP_ID をこの アプリ ID で書き換える。

それから fb:comments の中の xid をコメント対象毎にユニークになるようにする。 ここでは記事の permalink の URL エンコードしたものが自動的に入るようにした。

あと、コメントボックスの上部に「いいね!」ボタンが付くのだけれど、そのままだと「いいね!」した時のリンク先が閲覧しているページになる(ので1ページに複数記事が表示される場合によろしくない)。ここは記事の permalink にしたいので、fb:comments に url 属性を追加し、値として permalink の URL が自動的に入るようにする。

表示は日本語にしたいので en_US を ja_JP に書き換え。

こんな感じ。

 <div id="fb-root"></div><script src="http://connect.facebook.net/ja_JP/all.js#appId=アプリID&amp;xfbml=1"></script><fb:comments xid="$permalink_encoded" numposts="10" width="500" publish_feed="true" url="$permalink"></fb:comments>

これでコメントボックスが各記事に表示されるようになった。

5. 今まで使っていた Like Button を削除

既に設置済みの「いいね!」ボタンは重複するので削除。

自前でコメント機能を用意する必要のない手軽さ

この nDikiDiKicker という自作のシステムで運用している。コメント関連の実装は面倒なのでスルーしてきたんだけれど、認証も含めてそこらへん Facebook 側で全部やってくれるのでお手軽にコメント機能を追加できることになった。

Facebook ユーザとしてコメントすることになるため spam も少ないと思われ、その点で運用コストも少なくてすむのではと思われる。

また「Facebookプロフィールにコメントを投稿する」がチェックされているとその友達にも口コミとして流れるのもサイトによっては嬉しいはずだ。

いいね!

スポンサード リンク

今日のさえずり: 子供なんて1歳半にもなれば普通のコンパクトデジタルカメラ使えるから

2011年02月11日

[ 2月11日全て ]

About Me

Naney Naney (なにい)です。株式会社ミクシィでマネージャー・プロダクトオーナーをしています。

nDiki1999年1月に始めたコンピュータ日誌を前身とする NaneyWeb 日記(兼パーソナルナレッジベース)です。ちょっとしたノートは nNote にあります。

follow us in feedly

※内容は個人的見解であり所属組織とは関係ありません。

月別インデックス
Process Time: 0.047874s / load averages: 0.43, 0.62, 0.53
nDiki by WATANABE Yoshimasa (Naney, Google profile)
Powered by DiKicker