コメントプラグイン

コメントプラグインがあれば、Facebookアカウントを使用して、サイトのコンテンツにコメントすることができます。利用者は、Facebook上でも同様に友達(および友達の友達)とコメントアクティビティをシェアできます。コメントプラグインには、モデレーションツールやソーシャル関連度ランキングも組み込まれています。

コメントプラグイン構成ツールモデレーション設定言語の変更よくある質問

手順

1. URLまたはFacebookページを選択する

コメントプラグインで使用するウェブサイトを選択します。

2. コード構成ツール

URLをコピーして、下のコード構成ツールに貼り付けます。コメントプラグインのwidthや、デフォルトで表示する投稿数(num_posts)などを設定できます。コメントプラグインのコードを生成するには、[コードを取得]ボタンをクリックします。

3. コードスニペットのコピーと貼り付け

コードスニペットをコピーし、コメントを実装するウェブサイトやウェブページのHTMLに貼り付けます。

コメントプラグインのコードジェネレータ

コメントするURL

幅

投稿数

コードを取得

設定

上述のコード構成ツールでは、コメントプラグインで使用できるすべての設定の一部のみを使用しています。次のような設定も変更できます。

設定	HTML5属性	説明	デフォルト値
`colorscheme`	`data-colorscheme`	コメントプラグインで使用するカラースキームです。「light」か「dark」のいずれかを選択できます。	「light」
`href`	`data-href`	プラグインで投稿されたコメントが固定で関連付けられる絶対URLです。コメントプラグインを使用して投稿されたコメントに関してシェアされているFacebookのすべての記事はこのURLにリンクされます。	現在のURL
`mobile`	`data-mobile`	モバイルに最適化したバージョンを表示するかどうかを指定するboolean値です。	自動検出
`num_posts`	`data-numposts`	デフォルトで表示するコメント数です。最小値は1です。	10
`order_by`	`data-order-by`	コメントを表示する際に使用する並べ替え順です。「social」、「reverse_time」、「time」のいずれかを選択できます。これらの並べ替え順のタイプについては、「よくある質問」をご覧ください。	「social」
`width`	`data-width`	ウェブページ上のコメントプラグインの幅。ピクセル幅で指定、または可動幅に設定する場合はパーセンテージ(100%など)で指定します。モバイルバージョンのコメントプラグインではwidthパラメーターが無視され、100%の可変幅が使用されます。コメントプラグインでサポートされる最小幅は320ピクセルです。	550

コメントの並べ替え

コメントプラグインの右上にあるメニューを使用すると、日時やソーシャルランキングを基準にしてコメントをソートすることができます。

data-order-by属性と次の3つの値のいずれかを使用することで、デフォルトの並べ替え順を定義できます。

`social` (デフォルト)

これは「Top」とも呼ばれます。コメントプラグインでは、ソーシャルシグナルを使用することで、最も質の高いコメントが最上部に表示されます。コメントは、友達や友達の友達からの関連度の最も高いコメント、「いいね！」の数が最も多いスレッド、発言数の多いスレッドが最初に表示されるように並べ替えられます。スパムとして報告されたコメントはビューに表示されません。

注: コメントプラグインの最初のリリース前に作成されたOpen Graphオブジェクトに関連付けられているスレッドを含む、古いコメントスレッドは、ソーシャルを基準にして並べ替えることはできません。

`time`

コメントは投稿順に表示されます。投稿日時が最も古いものが最上部に表示され、最新のコメントは一番下に表示されます。

`reverse_time`

コメントは投稿順と逆に表示されます。投稿日時が最も新しいものが最上部に表示され、最も古いコメントは一番下に表示されます。

言語を切り換える

JavaScript用Facebook SDKのローカライズバージョンを読み込むことで、コメントプラグインの言語を変更できます。SDKを読み込む際のjs.srcの値を、使用する言語に変更します。たとえば使用する言語がフランス語であれば、en_USをfr_FRに置き換えます。

js.src = "https://connect.facebook.net/fr_FR/sdk.js#xfbml=1&amp;version=v2.4";

使用する言語によっては、ソーシャルプラグインの幅の調整が必要になる場合があります。詳細については、「ローカライズと翻訳」をご覧ください。

コメントのモデレーション

コメントプラグインには高性能なモデレーションツールが備わっています。このツールを使用することで、コミュニティの管理チームは簡単かつ短時間に複数のコメントを一括して管理できるようになります。

設定

コメントのモデレーションツールを使用するには、モデレーションの設定手順に従って設定を行う必要があります。

モデレーションの設定手順

コメントプラグイン経由で投稿されたコメントには、グラフAPIを使用して返信することはできません。

ダッシュボード

モデレーションツールを開くには、次の2つの方法のいずれかを使用します。

1. アプリベースのモデレーションビュー: developers.facebook.com/tools/commentsに移動します。Facebookアプリがすべて一覧表示されて、それぞれのアプリに関連付けられたすべてのコメントを管理できます。コメントプラグインでFacebookアプリを使用しない場合は、このビューは使用できません。

2. ページベースのモデレーションビュー: コメントボックスの横にある[モデレーションツール]のリンクをクリックします(次のスクリーンショットを参照)。ビューには、このウェブページ(URL)に投稿されたコメントのみが表示されます。

モデレーションビュー

以下に、両方のモデレーションビューのスクリーンショットを掲載します。アプリベースのモデレーションビューでは、アプリを切り替えるメニューを使用できます。

モデレーションテーブルでは、コメントのステータスに応じて、コメントを承認したり、非表示にしたりできます。複数のコメントのステータスを変更するには、左の列のチェックボックスを使用します。

1. ページベースのモデレーションビュー:

このモデレーションビューでは、特定のURLのすべてのコメントが表示されます。

2. アプリベースのモデレーションビュー:

このモデレーションビューでは、アプリケーションのすべてのコメントが表示されます。

3.フラグ済みキュー

利用者またはFacebookがフラグを付けたコメントはここに表示されます。このリストのコメントは、アプリケーションの設定またはコメントの報告方法に応じて公開または非公開になります。

4.表示順

開発者間の分業を円滑にするために、この機能を使用してモデレーション用にコメントを自分に割り当てることができます。割り当てられたコメントをさらに別のモデレーターや管理者に割り当てることもできますが、自分のキューに入っているコメントは他の利用者のキューには表示されません。

設定

アプリごとにカスタム設定を定義できます。設定ダイアログを開くには、[設定]ボタン(ツールの右上にある)を使用します。

モデレーター

他の利用者を、コメントのモデレーターとして設定できます。入力ボックスに友達の名前を入力すると、先行入力によってモデレーター候補の友達を簡単に選択できます。

コメントの並べ替えの基準

コメントの並べ替えの基準を変更することもできます。詳細については「コメントの並べ替え」をご覧ください。

モデレーション

新しいコメントのデフォルトの表示方法をコントロールできます。たとえば、新しいコメントすべてに承認を求めることができます。コメントが承認されないと、モデレーターによる承認があるまでは、そのコメントはコメントを入力した利用者だけに表示されます。

モデレーションには次の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}"/>

複数のモデレーターを追加するには、次のように複数のメタタグを追加します。各メタタグに含まれるFacebook IDは1つとします。

<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のコメント数はGraph APIを使ってアクセスできます。たとえば、次のようにURLノードのshareフィールドのcomment_countプロパティを指定することで、example.comのコメント数を取得できます。

https://graph.facebook.com/v2.4/?fields=share{comment_count}&amp;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リファレンスのドキュメントをご覧ください。