【Labs】Facebookコメントプラグイン

【Labs】Facebook Like BoxはPage Pluginに変更になりました【Labs】CSSだけでサイズ可変・スマホ対応のアコーディオン

【Labs】Facebookコメントプラグイン

Posted on 2015-07-08
Last updated on 2018-10-15

こんにちは（・∀・）

最近様々なサイトで記事の下の方にFacebookのコメント入力欄を目にする事が多くなりました。そこで今回はFacebookのコメントプラグインの設定方法について解説したいと思います。

Facebookコメントプラグイン

コメントプラグインとはこんな感じのです。

Code Generator

それではコメントプラグインの設定をしていきます。Facebook Developersのコメントプラグインのページを開いてください。

コメントするURL

コメントプラグインを掲載したいページのURLを入力します。

幅

横幅を指定します。

投稿数

表示させたい投稿数を入力します。

コードを取得をクリック

1. ポップアップ画面が表示されたら、
ステップ 1:のアプリIDをボタンを表示するサイトのIDに変更して言語を設定します。日本語ならそのままJapaneseでOK。

2. Step 2:のコードを開始<body>タグの直後に貼り付けます。
すでに他のFacebook Pluginなどで１のコードを使用している場合、ここでは必要ありません。

3. Step 3:のコードをコメント欄を表示させたい場所に貼り付けます。

以上でFacebookコメントプラグインの設定は終了です。

data-hrefのURLは固定のURLになります。

初期値は「コメントするURL」で入力したURL


data-href="http://www.example.com/"

URLを動的に取得したい場合はdata-hrefのURLの書き方をJavaScriptやPHPなどで動的にURLを取得する記述に変更します。

JavaScriptでURLを取得


<script>
$('.fb-comments-parent').html('<div class="fb-comments" data-href="' + location.href + '" data-numposts="5" data-width="100%"></div>');
</script>

「+ location.href +」はダブルクォーテーションの中にさらにシングルクォーテーションで囲みます。