【How To】5分で、ブログにFacebookコメント欄を設置するには:ライブドアブログを例に【保存版】

   

今日、色々とこちらの記事(Facebookのコメント欄をライブドアブログ( @livedoorblog )に設置するには)を取り上げてもらったので、修正版をアップします。

これが完全版です。

やることは大きく分けて2つ
ここを見てやれば、恐らく10分以内に出来ます。
また、ライブドアブログを例に取りましたが、恐らく色んなブログシステムで使える方法です。

A:FacebookアプリIDを取得する(5分程度)
B:サイトにコードを貼り付ける(1分程度)

オプションですが、管理者向けの設定もあります
C:<head></head>に記述を追加
D:Bのコードを若干改変


A:FacebookアプリIDを取得する

やり方概要

A-2:アプリのIDをコピーしておく:5秒

A-1:専用アプリを登録する
サイト名とURLを登録し、言語を選択してCreateAppするだけ
a-1
A-2:アプリのIDをコピーしておく
a-2

B:サイトにコードを貼り付ける:1分
コードはこちらです。
<div id="fb-root"></div><script src="http://connect.facebook.net/ja_JP/all.js#appId=【ここにA-2を入れる】&amp;xfbml=1"></script><fb:comments xid="<$ArticleId$>" numposts="10" width="425" publish_feed="true"></fb:comments>

ライブドアブログでは、個別ページのテンプレートの表示したい場所にこれを貼り付けましょう。

*1

以上で終わりです!

以上の条件でフォームを設置すると、こんなフォームが現れます。
before

オプションの設定
コメント欄には、Administer Commentsというモードがあります。
これを設定するにはどうしたらいいでしょう。
管理者モードにするとこんなフォームです
after1

右下に、Administer Comments というリンクが現れるのが分かりますでしょうか。
ここをクリックすると、こんな感じの設定画面が現れます。

after2

恐らく、コメントが入るとお知らせが複数人に入る設定が出来るという事のように見えますが、まだ確認してません。違う予感…
で、どうやるかというと

C:<head></head>に記述を追加

一行記述を加えます。

<meta property="fb:app_id" content="【ここにA-2を入れる】"/>

これを<head></head>の間に入れればOK。
D:Bのコードを若干改変

先ほど下記の用に書いたコードですが
<div id="fb-root"></div><script src="http://connect.facebook.net/ja_JP/all.js#appId=【ここにA-2を入れる】&amp;xfbml=1"></script><fb:comments xid="<$ArticleId$>" numposts="10" width="425" publish_feed="true"></fb:comments>

ここにある、A-2の部分をアプリIDではなく、APIKeyに変更します。

これで、無事に管理者モードも使えるようになります。
ログアウトした状態でフォームを見るとどうなるか
logout
こんな感じになります。
ログインが前提になっているのがわかります。
ファンページの名前でログインしているとどうなるか
ファンページユーザは、基本的にファンページにしかコメントが出来ませんね。
ブログに設置した、コメントフォームは何に当たるのかが気になったのでやってみましたが、どうやらコメント欄は表示されないようです
ファンページユーザでブログにコメントしに行くことができたら面白かったのになぁ。残念。

管理者モードにおいて、匿名でのコメントを可能にすることも出来る
ログインしなくてもコメントが出来ます。
フォームはこんな感じに表示される。
メールアドレスは必須ですが、コメントが可能になります。
tokumei

因みに、この状態でコメントをして、他のユーザーがこの画面を見るとこんな感じに表示されます。
AnonymousUser!!
anonymous

以上です。
*1 xidって何か?
コメント欄ジェネレートページに行くと、UniqueIDと呼ばれているものなのですが、これは、そのサイトの中で、そのページを識別するための識別子です。
これを固定の数字とかにしてしまうと何が起こるかというと、全ページで同じコメント欄が現れることになります。これは困りますよね。
その記事その記事でコメント欄は分けたい。それが人情です。
今回、ライブドアブログでは、この部分を<$ArticleID$>という物で設定しました。このタグは、唯一無二の数字を出力してくれます。つまり、絶対かぶらないんですね。
WordPressだったら<?php the_ID(); ?> 

としてあげたり、そのブログ機能によって色々タグは変わると思いますが、唯一の何かを返してくれる変数をここにぶち込みましょう。

おすすめ記事一覧

 - Facebook