WEBマスターのお仕事TOP > ソーシャルプラグイン設置 > Facebookのコメント投稿フォーム(コメントボックス)を設置しよう

Facebookのコメント投稿フォーム(コメントボックス)を設置しよう

(2011/04/05)
※(2011/12/3)Facebookが提供するコードに変更があったので記事を更新しました。最新の記事をご参照ください。

これまたFacebookのソーシャルプラグイン機能で、コメント投稿フォーム(Comments Box/コメントボックス)があります。先ほど当サイトでも設置しましたが、ものの5分で設置できました。(ページ下部参照)

Facebookコメント投稿フォーム設置方法

Step.1)Facebook Developersの以下のページへアクセス
http://developers.facebook.com/docs/reference/plugins/comments/

Step.2) コメントフォームを自分のサイトに合ったサイズに設定し、「Get Code」ボタン押下
URL to comment on:コメントフォームを設置したいサイトのURL
Number of posts :デフォルトで表示されるコメントの数(コメントへの返信は別みたいです)
Width:コメントフォームの横幅
Facebookコメント投稿プラグインの設定

Step.3)Getしたコードを任意の場所へ貼り付けて完了

※投稿時に投稿フォームの上に"Public Comments"か"Moderator View"を選択できるようになっており、それぞれ、Public Comments:誰でも見れる、Moderator View:投稿者と投稿者のFacebook友達だけ見れる、ということのようです。その他にもNGワード/ブラックリストの設定等もできるようです。詳細はhttp://developers.facebook.com/docs/reference/plugins/comments/のModeration tools部分をご参照ください。

記事ページ毎にコメントボックスを設置するには


wordpressとFC2ブログの場合、href=""の部分にそれぞれ下記を入れるとページ毎のコメントボックスが設置できました。

wordpressの場合は「<?php the_permalink(); ?>」

<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:comments href="<?php the_permalink(); ?>" num_posts="2" width="540"></fb:comments>


FC2の場合は「<%topentry_link>」

<div id="fb-root" class="mt15"></div><script src="http://connect.facebook.net/ja_JP/all.js#appId=APP_ID&xfbml=1"></script><fb:comments href="<%topentry_link>" num_posts="2" width="465"></fb:comments>
</div>


ここで投稿されたコメントもlike(いいね)ボタンやシェアボタンと同様に、投稿者のFacebookページに表示されるので、投稿者の友達のFacebookページにも表示され・・・とインプレッションが増えていきます。まさにソーシャルプラグイン(※)ですね。
コメント投稿フォーム(英語バージョンでは"Comments Box"と呼んでいるみたいです)のインプレッション、CTR等もFacebook Insights/インサイトでモニタリングできます。

※ソーシャルプラグイン
Facebookのlike(いいね)ボタンmixiチェックボタンツイートするボタンなどSNS側が提供しているプラグインで、ブログなどに簡単に設置でき、そのプラグインを介してSNSと繋がることができる(ソーシャルネットワークが可能になる)パーツ、と私は理解しています。
関連記事

コメント

facebookのコメントフォームの件

コードの生成まではわかります。問題はGetしたコードを任意の場所へ貼り付けて完了とあるのですが、任意の場所とはどこでしょうか?どのサイトを見てもその部分は書かれていません。コメント毎に設置したいのですが、重ねて宜しくお願い致します。(fc2ブログです)ご教示願いますm(_ _)m 

Re: facebookのコメントフォームの件

sugimoto様

コメントありがとうございます。

facebookコメントフォームの設置場所ですが、私の場合は各記事ページの終わり部分に表示したかったため、<!-- mainentry -->の中の<!--permanent_area-->の一番最後に設置しました。コードはこんな感じです。


<!-- Facebook Comment -->
<!--permanent_area-->
<div class="mt10">
<div id="fb-root" class="mt15"></div><script src="http://connect.facebook.net/ja_JP/all.js#appId=APP_ID&xfbml=1"></script><fb:comments href="<%topentry_link>" num_posts="2" width="425"></fb:comments>
</div>
<!-- /Facebook Comment -->
<!--/permanent_area-->
</div><!-- mainentry -->
</div><!-- mainbox -->
</div><!-- section -->

参考になれば幸いです。

> コードの生成まではわかります。問題はGetしたコードを任意の場所へ貼り付けて完了とあるのですが、任意の場所とはどこでしょうか?どのサイトを見てもその部分は書かれていません。コメント毎に設置したいのですが、重ねて宜しくお願い致します。(fc2ブログです)ご教示願いますm(_ _)m 

度々申し訳ありません。当方こういったコーディンク関係があまり得意ではありませんので正直よくわかりませんでした。

まず、
①URL to comment on:コメントフォームを設置したいサイトのURLとありますが、これは、自分のブログトップのURLのことでしょうか?

②設置場所というのは確かに、各記事ページの終わり部分に表示したいのですが、このコードをどこのプラグインに、書き込めば良いかわからないという意味です。(記事に直接書き込めばその記事にはコメント欄が出来るのですが)

③また、Commentsのプラグインコードで上に三つのタブがあり、HTML5では、2段に分かれていますがどのタブで、どのコードを使って良いかわかりません。

④あと、コードをGETしたときにAPP_IDが出てくると、他のサイトに書いてありましたが、僕のやり方が悪いのか、全く出てきません。

⑤もともと出てくるコードが、FC2の場合は「<%topentry_link>」と書いてあるところのコードが僕が入力して出てきたコードとかなり違うのです。

また、ご返信頂いたコードもどのように利用していいかすらわかりません。

稚拙な質問ばかりで大変恐縮ですが、その辺のことを教えて頂ければ幸いです。

Re: タイトルなし

sugimoto様

下記分かる範囲でインラインでコメントしますね。

> 度々申し訳ありません。当方こういったコーディンク関係があまり得意ではありませんので正直よくわかりませんでした。
>
> まず、
> ①URL to comment on:コメントフォームを設置したいサイトのURLとありますが、これは、自分のブログトップのURLのことでしょうか?
→サイトトップのURLでOKだと思います。

>
> ②設置場所というのは確かに、各記事ページの終わり部分に表示したいのですが、このコードをどこのプラグインに、書き込めば良いかわからないという意味です。(記事に直接書き込めばその記事にはコメント欄が出来るのですが)

→私の場合は記事やプラグインではなく、テンプレートに直接書いています。FC2であれば、管理画面の環境設定>テンプレートの設定です。テンプレート内での設置場所は上記私のコメントには一部誤りがありました。正しくは、以下の通りです。
<!--permanent_area-->
<!-- Facebook Comment -->
<div class="mt10">
<div class="fb-comments" data-href="<%topentry_link>" data-num-posts="2" data-width="400"></div>
</div>
<!-- /Facebook Comment -->
<!--/permanent_area-->
</div><!-- mainentry -->
</div><!-- mainbox -->
</div><!-- section -->

<!-- mainentry -->の終わる直前に入れます。その際<!--permanent_area-->~<!--/permanent_area-->で囲むことで記事ページに表示させることができます。

>
> ③また、Commentsのプラグインコードで上に三つのタブがあり、HTML5では、2段に分かれていますがどのタブで、どのコードを使って良いかわかりません。
→HTML5で実験したらFC2でも動きました。 コードが2つにわかれていますが、コード取得ページに説明が書いてある通り、1つめのコードは<body>の直後に、もう一方のコードを上記②のテンプレの中に設置してみてください。

>
> ④あと、コードをGETしたときにAPP_IDが出てくると、他のサイトに書いてありましたが、僕のやり方が悪いのか、全く出てきません。
生成されるコードの中に appId=XXXXXXXXXXXXXXX というの(Xは数値)が含まれていませんか?

>
> ⑤もともと出てくるコードが、FC2の場合は「<%topentry_link>」と書いてあるところのコードが僕が入力して出てきたコードとかなり違うのです。

前のコメントで引用したコードは当記事作成時のもので、最新のコードとは違うようです。後ほど当記事にも追記しておきます。

>
> また、ご返信頂いたコードもどのように利用していいかすらわかりません。
>
> 稚拙な質問ばかりで大変恐縮ですが、その辺のことを教えて頂ければ幸いです。

分かる範囲で回答させて頂きました、私もいつもトライ&エラーですので、少しずつ実験しつつやるといいと思います。がんばってくださいね。

コメントの投稿

サイト管理者にのみ通知する

トラックバックURL

http://goodjob4604.blog103.fc2.com/tb.php/100-96201236
月別アーカイブ
Google+
Twitter
ページトップへ
ブログパーツ