Web Design

Facebook コメント欄「コメントプラグイン」を設置する方法

Facebookのコメント欄「コメントプラグイン」を設置する方法を紹介します。

Facebook「コメントプラグイン」

WEBサイトやブログに、Facebookのコメント欄「コメントプラグイン」を設置する方法を紹介します。通常のコメント欄よりも、Facebookのコメント欄にしておく方がメリットがたくさんあります。

Facebookのコメント欄「コメントプラグイン」にすると、設置したコメント欄からユーザーがコメントをすると、その内容がユーザーのFaccebookの投稿としてタイムラインに表示されます。なので、通常のコメント欄よりもSNSで自分のWEBサイトやブログを拡散する事ができます。他にもデフォルトのコメント欄であれば匿名でコメントができるので、迷惑なコメントや嫌がらせのようなコメントがされる事もあります。Facebookのコメント欄にしておく事で、そのようなコメントをされる可能性も低くなります。

ちなみにFacebookのコメント欄は下の画像のような感じになります。ユーザーがFacebookにログインするとコメントが出来る仕様になっています。

Facebook「コメントプラグイン」の設置方法

Facebook「コメントプラグイン」を設置する方法は、まずFacebookのdevelopersページで事前に「アプリID」を取得しておく必要があります。

アプリIDを取得した後に、Facebookにログインした状態でFacebook「コメントプラグイン」のページにアクセスします。コメントプラグインの「コードジェネレータ」の各項目を入力していきます。「コメントするURL」には、コメント欄を設置したいページの「URL」を、幅は設置する場所に合わせるのですがレスポンシブのサイトなら「100%」と入力するのがオススメ、投稿数はデフォルトで表示させるコメントの投稿数になります。入力が全て終ったら、「コードを取得」ボタンを押します。

Facebook「コメントプラグイン」
https://developers.facebook.com/docs/plugins/comments/

「コードを取得」ボタンを押すと、以下の画面が表示されるので「赤枠」部分のコードを「body」タグの<body>の直後にコピペします。ワードプレスなら「外観」→「テーマエディター」→「テーマヘッダー(header.php)」から「body」タグが見つかると思います。

「青枠」部分のコードはコメント欄を設置したい場所にコピペします。ワードプレスでブログ記事下に設置する場合は、「外観」→「テーマエディター」→「個別投稿(single.php)」からデフォルトのコメント欄を削除して、このコードをコピペすると設置完了です。

Facebook「コメントプラグイン」タイムラインに各投稿ページを表示させる方法

Facebook「コメントプラグイン」を設置する時に重要なポイントがあります、普通にコードをコピペするだけの場合は、ユーザーがコメントをしてユーザーのFacebookのタイムラインにコメントが表示されるのですが、その表示される画像やリンクが投稿ページにならず、サイトのトップページになります。コメントをした投稿ページの画像やリンクがタイムラインに表示されるようにするには、「青枠」で表示されたコードの「date-href」のアドレスを変更しないといけません。

デフォルトでは、サイトのトップページのアドレスになっていますので各投稿ページで表示できるように「パーマリンク」に変更します。「date-href」の後ろを下のコードに変えるだけです。

<?php the_permalink(); ?>
<div class="fb-comments" data-href="<?php the_permalink(); ?>" data-width="100%" data-numposts="5"></div>

この変更をしておくと、ユーザーがFacebookのコメント欄からコメントすると、タイムラインにしっかりと各投稿ページが表示されるようになります。

Facebook「コメントプラグイン」は、見た目もシンプルでカッコイイしユーザーのコメントで拡散もできますのでデフォルトのコメント欄を変更したいなと考えている方はぜひ設置してみて下さい!

この記事が気に入ったら
いいね ! しよう

Twitter で
#