コメントプラグイン
コメントプラグインがあれば、利用者は自分のFacebookアカウントを使用して、あなたのサイトのコンテンツにコメントすることができます。利用者は、Facebook上でも、自分のコメントアクティビティを友達(および友達の友達)にシェアできます。コメントプラグインには、ビルトインのモデレーションツールも含まれています。
欧州地域でのソーシャルプラグインに対する変更
欧州地域でFacebook製品を使用しているユーザーに関しては、Cookie同意プロンプトが更新されたため、ソーシャルプラグインに何らかの影響が現れる可能性があります。欧州地域のユーザーは、1)Facebookアカウントにログインしている、2) 「アプリとウェブサイトのCookie管理」に同意している、のいずれかの条件を満たさない限り、「いいね！」と「コメント」のソーシャルプラグインのサポートを終了します。この二つの要件が満たされていれば、ユーザーは「いいね」や「コメント」ボタンなどのプラグインを見たり、操作したりすることができます。上記のいずれかの条件を満たさない場合、ユーザーはプラグインを見ることができません。
欧州地域には、以下の国が含まれます。
欧州連合 (EU): オーストリア、ベルギー、ブルガリア、クロアチア、キプロス共和国、チェコ共和国、デンマーク、エストニア、フィンランド、フランス、ドイツ、ギリシャ、ハンガリー、アイルランド、イタリア、ラトビア、リトアニア、ルクセンブルク、マルタ、オランダ、ポーランド、ポルトガル、ルーマニア、スロバキア、スロベニア、スペイン、スウェーデン
EU加盟国ではないが、EEAのみ/EFTA、または関税同盟国: [EEA のみ/EFTA] アイスランド、リヒテンシュタイン、ノルウェー、スイス [EU 関税同盟] すべてのチャンネル諸島、マン島、モナコ、キプロスのイギリス主権基地領域。[欧州関税同盟] アンドラ、サンマリノ、バチカン市国
- EU 加盟国ではないが、欧州最外部地域(OMR)に属する地域: マルティニーク、マヨット、グアドループ、フランス領ギアナ、レユニオン、サンマルタン、マディラ、アゾレス諸島、カナリア諸島
- 英国 (全ブリテン諸島)
手順
1.URLまたはページを選択する
コメントプラグインで使用するウェブサイトのURLを選択します。
2.コード設定ツール
URLをコピーして、下のコード設定ツールに貼り付けます。コメントプラグインのwidthや、デフォルトで表示する投稿数(num_posts)などの設定を調整できます。コメントプラグインのコードを生成するには、[コードを取得]ボタンをクリックします。
3.コードスニペットをコピーして貼り付ける
コードスニペットをコピーし、コメントを実装するウェブサイトまたはウェブページのHTMLに貼り付けます。
設定
上記のコードジェネレーターでは、コメントプラグインで使用できるすべての設定の一部のみを使用しています。以下の設定も変更できます。
| 設定 | HTML5属性 | 説明 | デフォルト値 |
|---|---|---|---|
|
| コメントプラグインで使用するカラースキームです。「light」か「dark」のいずれかを選択できます。 | "light" |
|
| プラグインで投稿されたコメントが固定で関連付けられる絶対URLです。コメントプラグインを使用して投稿されたコメントに関してFacebookでシェアされたすべての記事はこのURLにリンクされます。 | 現在のURL。 |
|
|
|
|
|
| モバイルに最適化したバージョンを表示するかどうかを指定するboolean値です。 | 自動検出 |
|
| デフォルトで表示するコメント数です。最小値は1です。 | 10 |
|
| コメントを表示する際に使用する並べ替え順です。「reverse_time」、「time」のいずれかを選択できます。それぞれの並べ替え順については、「コメントの並べ替え」セクションで説明されています。 | 「reverse-time」 |
|
| ウェブページのコメントプラグインの幅。ピクセル値で指定することも、可動幅に設定する場合はパーセンテージ(100%など)で指定することもできます。モバイルバージョンのコメントプラグインではwidthパラメーターが無視され、100%の可変幅が使用されます。コメントプラグインでサポートされる最小幅は320ピクセルです。 | 550 |
コメントの並べ替え
コメントプラグインの右上にあるメニューを使用すると、日時を基準にしてコメントを並べ替えることができます。
data-order-by属性と次の値のいずれかを使用することで、デフォルトの並べ替え順を定義できます。
reverse_time (デフォルト)
コメントは投稿順と逆に表示されます。投稿日時が最も新しいものが最上部に表示され、最も古いコメントは一番下に表示されます。
time
コメントは投稿順に表示されます。投稿日時が最も古いものが最上部に表示され、最新のコメントは一番下に表示されます。
言語を切り換える
JavaScript用Facebook SDKのローカライズバージョンを読み込むことで、コメントプラグインの言語を変更できます。SDKを読み込むときに、srcの値を変更して、自分のロケールが使用されるようにします。たとえば、フランス語(フランス)であれば、en_USをfr_FRに置き換えます。
src="https://connect.facebook.net/fr_FR/sdk.js#xfbml=1"
使用する言語によっては、ソーシャルプラグインの幅の調整が必要になる場合があります。詳細については、「ローカライズと翻訳」をご覧ください。
コメントのモデレーション
コメントプラグインには高性能なモデレーションツールが備わっています。このツールを使用することで、コミュニティ管理チームは簡単かつ短時間に複数のコメントを一括して管理できるようになります。
設定
コメントのモデレーションツールを使用するには、モデレーションの設定手順に従って設定を行う必要があります。
モデレーションの設定手順コメントプラグイン経由で投稿されたコメントには、グラフAPIを使用して返信することはできません。
ダッシュボード
モデレーションツールを開く方法は次の2つです。
1.アプリベースのモデレーションビュー: developers.facebook.com/tools/commentsにアクセスします。あなたのすべてのFacebookアプリのリストが表示されます。このリストにより、各アプリに関連付けられているすべてのコメントをモデレーションすることができます。コメントプラグインでFacebookアプリを使用していない場合は、このビューは使用できません。
2.ページベースのモデレーションビュー: コメントボックスの隣にある、[モデレーションツール]リンクをクリックします(下記のスクリーンショットを参照)。ビューには、このウェブページ(URL)に投稿されたコメントだけが表示されます。
モデレーションビュー
下記のスクリーンショットで両方のモデレーションビューを示します。アプリベースのモデレーションビューでは、アプリを切り替えるメニューを使用できます。
モデレーションテーブルでは、コメントのステータスに応じて、コメントを承認したり、非表示にしたりできます。複数のコメントのステータスを変更するには、左の列のチェックボックスを使用します。
1.ページベースのモデレーションビュー
2.アプリベースのモデレーションビュー
3.フラグされたキュー
設定
アプリごとにカスタム設定を定義できます。設定ダイアログを開くには、[設定]ボタン(ツールの右上にある)を使用します。
モデレーター
他の人があなたのコメントのモデレーターになるように設定できます。入力ボックスに友達の名前を入力すると、先行入力によってモデレーター候補の友達を簡単に選択できます。
コメントの並べ替えの基準
コメントの並べ替えの基準をコントロールすることもできます。詳細については「コメントの並べ替え」をご覧ください。
モデレーション
新しいコメントのデフォルトの表示方法をコントロールできます。たとえば、すべての新しいコメントを承認したいと思うかもしれません。コメントが承認されないと、モデレーターによる承認があるまでは、そのコメントはコメントした人だけに表示されます。
モデレーションには次の3つのモードがあります。
公開
すべてのコメントが公開されます。コメントは[確認]タブにも表示されます。
非公開
すべてのコメントが非表示となります。
ブロックしたユーザー
モデレーターは[ブロックしたユーザー]タブでブロックした利用者を検索できます。ブロックされた人が新しいコメントを公開すると、そのコメントの表示が自動的に制限され、[確認]タブに表示されます。
URL設定
スレッドを閉じる
コメントプラグインを使用しているURLでは、コメントスレッドを閉じることができます。スレッドを閉じることによって、利用者は該当するウェブページの発言に対して新しいコメントを追加できなくなります。スレッドは[URL設定]メニューで閉じることができます。
自動非公開の切り替え
自動非公開を有効にしてある場合、非公開スレッドをオーバーライドして、コメントできるように再公開することができます。変更するには、[URL設定]に移動し、[自動非公開をオーバーライド]をオンにします。その後、モデレーションしているURLの非公開状態を希望する状態に設定します。
モデレーションの設定
モデレーションツールを使用するには、FacebookアカウントかFacebookアプリのいずれかをコメントプラグインの実装と連携させる必要があります。
Facebookアプリを使用した設定(推奨)
サイト内に多数のコメントボックスがある場合は、管理エンティティにFacebookアプリIDを指定することをおすすめします。こうすることで、アプリのすべての管理者がコメントをモデレーションできます。これにより、Facebookのモデレーターインターフェイスにおいて、アプリIDで管理するすべてのプラグインのコメントを一括して簡単にモデレーションできます。
<meta property="fb:app_id" content="{YOUR_APP_ID}" />
[モデレーター]設定を使用して人を追加するだけでなく、アプリのすべての管理者がコメントをモデレーションできるようになりますが、新規コメントの通知はモデレーターのみに届きます(通知を有効にしている場合)。
サイト内に複数のコメントボックスを実装し、アプリIDを指定してそれらをアプリにリンクすると、選択したモデレーション設定がすべてのコメントボックスに適用されます。
たとえば、表示を制限するようにモデレーション設定を変更すると、同じアプリIDを使用するすべてのコメントボックスに適用されます。サイトの領域ごとに異なるモデレーション設定を適用する場合は、複数のアプリIDを使用する必要があります。これで、コメントボックスのグループごとに異なるモデレーション設定を適用できます。
fb:app_idかfb:adminsのいずれかを指定できますが、両方を指定することはできません。
Facebookアカウントを管理者として割り当てる
Facebookアカウントがコメントプラグインの実装の管理者になるように割り当てるには、コメントプラグインを使用する各ウェブページの<head>セクションに次のメタタグ要素を挿入します。
<meta property="fb:admins" content="{YOUR_FACEBOOK_USER_ID}"/>
複数のモデレーターを追加するには、複数の要素を追加します。1つのFacebook IDに対してそれぞれ追加します。
<meta property="fb:admins" content="{YOUR_FACEBOOK_USER_ID_1}"/> <meta property="fb:admins" content="{YOUR_FACEBOOK_USER_ID_2}"/>
コメントカウンター
fb:comments-countの値を使用すると、ウェブページの<span>要素に含まれる特定のURLへのコメントの数を表示できます。その後、ウェブサイトの残りの部分に合わせて、CSSを使用して<span>要素のスタイルを設定できます。注: 現在のところ、この機能はHTML5では使用できません。
たとえば、example.comに付けられたコメント数を表示するには、次のコードを使用します。
<span class="fb-comments-count" data-href="https://example.com/"></span> awesome comments
この場合、次のように表示されます。
69391 awesome comments
特定のURLのコメント数にはグラフAPIを使ってアクセスできます。たとえば、次のようにURLノードのshareフィールドのcomment_countプロパティを使用することで、example.comのコメント数を取得できます。
https://graph.facebook.com/v2.4/?fields=share{comment_count}&id=<YOUR_URL>Webhooks
コメントが投稿されたときに通知されるようなスクリプトをサーバーに置いて、Webhooksを設定できます。開始するには:
- アプリダッシュボードに移動します。
- 左側のナビゲーションの[+製品を追加]をクリックします。
- [Webhooks]セクションで[設定]をクリックします。
- ドロップダウンメニューで[アプリケーション]を選択します。
- [このトピックをフォローする]ボタンをクリックします。
- 通知を受け取るスクリプトのURLをダイアログに入力します(例:
https://example.org/mywebhook.php)。 - トークン(任意の文字列)を入力します。このトークンは、確認のためスクリプトに送信されます。
- 最後の設定手順として、[確認して保存]をクリックします。
その前に、Webhooksのドキュメントでスクリプトの実装方法の詳細をご確認ください。
PHPでの簡単なmywebhook.phpは次のようになります。
確認を開始する:
<?php
if ($_GET['hub_verify_token'] === 'make-up-a-token') {
echo $_GET['hub_challenge'];
}このmake-up-a-tokenは、上述の手順7で入力した文字列と同じです。
投稿されるすべてのコメントを記録します。
file_put_contents(
'log.txt',
"\n" . file_get_contents('php://input'),
FILE_APPEND
);
?>PHPでは、$_POSTは動作しません。file_get_contents('php://input')が必要です。
Webhooksの確認が完了したら、アプリダッシュボードのWebhooksセクションに、「plugin_comment」と「plugin_comment_reply」が表示されます。
[テスト]をクリックし、サンプル応答で実装を再度確認し、[フォローする]をクリックして公開します。
応答について詳しくは、Webhooksリファレンスのドキュメントをご覧ください。