いろいろメリットあるよね。
今回はタイトルの通り、WordPressのコメントシステムをFacebookのコメントに切り替える方法を説明します。
なぜFacebookコメントを使うのか
- 実名なので荒らされにくい
- 読者との交流が図りやすい
- コメントした人のウォールに流れれば、アクセスアップが狙える
- デフォルトのコメント欄よりもコメントしやすい雰囲気になる
さぁ、
サクッと変えちゃいましょう。
ますはコードを取得
下のURLにアクセスして、コードを取得します。
設定を適当に済ませて…
下の「Get Code」を押せばコードが生成されます。
実装
まず①のコードを、header.phpの中にある※<body>の直下にコピペします。
※デフォルトのテンプレートだと<body <?php body_class(); ?>>です。
ダッシュボードの「外観」→「テーマ編集」→「ヘッダー（header.php）」から編集しましょう。
</head>
<body>
<div id="fb-root"></div>
<script>(function(d, s, id) {
～中略～
</script>
次は②のコードですが、そのままコピペすると「http://example.com」に対してのコメントになってしまうので、hrefには記事のURLを指定しましょう。
WordPressで記事のURLを指定するには
<?php the_permalink(); ?>を使います。
書き換え前
<div class="fb-comments" data-href="
http://example.com" data-width="470" data-num-posts="10"></div>
書き換え後
<div class="fb-comments" data-href="
<?php the_permalink(); ?>" data-width="470" data-num-posts="10"></div>
これで準備完了です。
次に、デフォルトのコメント欄を表示する
<?php comments_template( '', true ); ?>というコードを、先ほどのコードに置き換えます。
編集するのは「外観」→「テーマ編集」→「単一記事の投稿（single.php）」です。
書き換え前
</nav><!-- .nav-single -->
<?php comments_template( '', true ); ?>
<?php endwhile; // end of the loop. ?>
書き換え後
</nav><!-- .nav-single -->
<div class="fb-comments" data-href="<?php the_permalink(); ?>" data-width="470" data-num-posts="10"></div>
<?php endwhile; // end of the loop. ?>
これでデフォルトのコメント欄が消え、Facebookのコメント欄が表示されていると思います。
もし出来なかった場合は、この記事のコメント欄で気軽に聞いてください。答えられる範囲なら答えます。
おしまい。
関連するかもしれない記事
