GEOLOG / @geeorgey のゲオログ

武器は走りながら拾え

2009–2020年のブログ保存版 ・ 全941記事

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

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



これが完全版です。

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


A：FacebookアプリIDを取得する（５分程度）
B：サイトにコードを貼り付ける（１分程度）


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


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

やり方概要
A-2：アプリのIDをコピーしておく：５秒

A-1：専用アプリを登録する
サイト名とURLを登録し、言語を選択してCreateAppするだけ
［画像はバックアップに含まれていません: a-1］
A-2：アプリのIDをコピーしておく
［画像はバックアップに含まれていません: a-2］


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>

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

*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