コメントプラグインがあれば、Facebookアカウントを使用して、サイトのコンテンツにコメントすることができます。利用者は、Facebook上でも同様に友達(および友達の友達)とコメントアクティビティをシェアできます。コメントプラグインには、モデレーションツールやソーシャル関連度ランキングも組み込まれています。
コメントプラグイン構成ツールモデレーション設定言語の変更よくある質問コメントプラグインで使用するウェブサイトを選択します。
URLをコピーして、下のコード構成ツールに貼り付けます。コメントプラグインのwidth
や、デフォルトで表示する投稿数(num_posts
)などを設定できます。コメントプラグインのコードを生成するには、[コードを取得]ボタンをクリックします。
コードスニペットをコピーし、コメントを実装するウェブサイトやウェブページのHTMLに貼り付けます。
上述のコード構成ツールでは、コメントプラグインで使用できるすべての設定の一部のみを使用しています。次のような設定も変更できます。
設定 | HTML5属性 | 説明 | デフォルト値 |
---|---|---|---|
|
| コメントプラグインで使用するカラースキームです。「light」か「dark」のいずれかを選択できます。 | 「light」 |
|
| プラグインで投稿されたコメントが固定で関連付けられる絶対URLです。コメントプラグインを使用して投稿されたコメントに関してシェアされているFacebookのすべての記事はこのURLにリンクされます。 | 現在のURL。 |
|
|
|
|
|
| モバイルに最適化したバージョンを表示するかどうかを指定するboolean値です。 | 自動検出 |
|
| デフォルトで表示するコメント数です。最小値は1です。 | 10 |
|
| コメントを表示する際に使用する並べ替え順です。「social」、「reverse_time」、「time」のいずれかを選択できます。これらの並べ替え順のタイプについては、「よくある質問」をご覧ください。 | 「social」 |
|
| ウェブページ上のコメントプラグインの幅。ピクセル幅で指定、または可動幅に設定する場合はパーセンテージ(100%など)で指定します。モバイルバージョンのコメントプラグインではwidthパラメーターが無視され、100%の可変幅が使用されます。コメントプラグインでサポートされる最小幅は320ピクセルです。 | 550 |
コメントプラグインの右上にあるメニューを使用すると、日時やソーシャルランキングを基準にしてコメントをソートすることができます。
data-order-by
属性と次の3つの値のいずれかを使用することで、デフォルトの並べ替え順を定義できます。
social
(デフォルト):これは「Top」とも呼ばれます。コメントプラグインでは、ソーシャルシグナルを使用することで、最も質の高いコメントが最上部に表示されます。コメントは、友達や友達の友達からの関連度の最も高いコメント、「いいね!」の数が最も多いスレッド、発言数の多いスレッドが最初に表示されるように並べ替えられます。スパムとして報告されたコメントはビューに表示されません。
注: コメントプラグインの最初のリリース前に作成されたOpen Graphオブジェクトに関連付けられているスレッドを含む、古いコメントスレッドは、ソーシャルを基準にして並べ替えることはできません。
time
コメントは投稿順に表示されます。投稿日時が最も古いものが最上部に表示され、最新のコメントは一番下に表示されます。
reverse_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.フラグ済みキュー
4.表示順
アプリごとにカスタム設定を定義できます。設定ダイアログを開くには、[設定]ボタン(ツールの右上にある)を使用します。
他の利用者を、コメントのモデレーターとして設定できます。入力ボックスに友達の名前を入力すると、先行入力によってモデレーター候補の友達を簡単に選択できます。
コメントの並べ替えの基準を変更することもできます。詳細については「コメントの並べ替え」をご覧ください。
新しいコメントのデフォルトの表示方法をコントロールできます。たとえば、新しいコメントすべてに承認を求めることができます。コメントが承認されないと、モデレーターによる承認があるまでは、そのコメントはコメントを入力した利用者だけに表示されます。
モデレーションには次の3つのモードがあります。
すべてのコメントが公開されます。コメントは[確認]タブにも表示されます。
すべてのコメントが非公開となります。
モデレーターは[ブロックしたユーザー]タブでブロックした利用者を検索できます。ブロックされた人が新しいコメントを公開すると、そのコメントの表示が自動的に制限され、[確認]タブに表示されます。
コメントプラグインを使用しているURLでは、コメントスレッドを閉じることができます。スレッドを閉じることによって、利用者は該当するウェブページの発言に対して新しいコメントを追加できなくなります。スレッドは[URL設定]メニューで閉じることができます。
自動終了が有効になっていると、閉じられたスレッドを変更して、コメント用に再開することができます。変更するには、[URL設定]に移動し、[自動終了を変更]をオンにします。その後、管理するURLの終了状態を希望する状態に設定します。
モデレーションツールを使用するには、FacebookアカウントかFacebookアプリのいずれかをコメントプラグインの実装と連携させる必要があります。
サイト内に多数のコメントボックスがある場合は、管理エンティティにFacebookアプリIDを指定することをおすすめします(アプリのすべての管理者がコメントを管理できます)。これにより、Facebookのモデレーターインターフェイスにおいて、アプリIDで管理するすべてのプラグインのコメントを一括して簡単に管理できます。
<meta property="fb:app_id" content="{YOUR_APP_ID}" />
モデレーターの設定を使用して追加した利用者に加えて、アプリのすべての管理者がコメントを管理できるようになりますが、新規コメントの通知はモデレーターのみに届きます(通知を有効にしている場合)。
サイト内に複数のコメントボックスを実装し、アプリIDを指定してそれらをリンクすると、選択したモデレーション設定がすべてのコメントボックスに適用されます。
たとえば、表示を制限するようにモデレーション設定を変更すると、同じアプリIDを使用するすべてのコメントボックスの設定が変更されます。サイトの領域ごとに異なるモデレーション設定を適用する場合は、複数のアプリIDを使用する必要があります。これで、コメントボックスのグループごとに異なるモデレーション設定を適用できます。
fb:app_id
かfb:admins
のいずれかを指定できますが、両方を指定することはできません。
コメントプラグインの実装の管理者に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}&id=<YOUR_URL>
コメントが投稿されたときにサーバーが通知されるよう、Webhooksにスクリプトを設定できます。手順:
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リファレンスのドキュメントをご覧ください。