ブログ等でよく見る

こちらのようなFacebookのコメント欄

Facebookコメント欄を導入するメリットとしては

1. 基本的に実名登録なfacebookアカウントを
   使用することで荒れにくい
2. ユーザーがメールアドレスの入力など
   必要とせずコメントしやすい
3. コメントはフィードにもURL付で表示されるので
   口コミ効果も期待できます

というものです！

それでは

もちろんレスポンシブデザインにも対応しています！！

基本的なやり方は上記やり方で進めていただけるのですが
ワードプレスのテーマが「twentyfourteen」の場合
リンク先の方法では表示がされませんでしたので

いろいろと試してみた結果きれいに表示される方法が
見つかりましたのでお知らせいたします。

方法としては

リンク先に①、②の手順があるのですが、この
②のsingle.phpへの記述の仕方だけが違いまして
「twentyfourteen」のテーマへ適用させるには
以下のように入力いただけるとレスポンシブにも
対応して無事にFacebookコメント欄を実装すること
ができます。

めんどうの内容にこのブログのコメントページのように
表示されるものでよければ
コピペするだけでいいように以下コードを用意して
置きましたのでまるっとコピペしてみてください♪

single.php

<?php
/**
 * The Template for displaying all single posts
 *
 * @package WordPress
 * @subpackage Twenty_Fourteen
 * @since Twenty Fourteen 1.0
 */

get_header(); ?>

	<div id="primary" class="content-area">
		<div id="content" class="site-content" role="main">
			<?php
				// Start the Loop.
				while ( have_posts() ) : the_post();

					/*
					 * Include the post format-specific template for the content. If you want to
					 * use this in a child theme, then include a file called called content-___.php
					 * (where ___ is the post format) and that will be used instead.
					 */
					get_template_part( 'content', get_post_format() );

					// Previous/next post navigation.
					twentyfourteen_post_nav();

					// If comments are open or we have at least one comment, load up the comment template.
					
				endwhile;
			?>
			<div class=entry-content><div class="fb-comments"  data-href="<?php the_permalink(); ?>" data-width="100%" data-numposts="5"></div></div>
		</div><!-- #content -->
	</div><!-- #primary -->

<?php
get_sidebar( 'content' );
get_sidebar();
get_footer();

以上でFacebookコメント欄の実装が可能です！
ご質問等あればぜひぜひコメント欄からどうぞｗ

そして、お役にたちましたら「いいね」
押してもらえるとうれしいです☆