プラグインを利用せずにWordPressにFacebookコメント欄を設置する簡単な方法 - ソーシャルメディア対応 - 専門家プロファイル

小菅 太郎
アイナパル 代表取締役
東京都
ITコンサルタント

注目の専門家コラムランキングRSS

対象:ホームページ・Web制作

三井 博康
三井 博康
(Webプロデューサー)
原島 洋
原島 洋
(Webプロデューサー)
小菅 太郎
小菅 太郎
(ITコンサルタント)
原島 洋
(Webプロデューサー)

閲覧数順 2024年04月19日更新

専門家の皆様へ 専門家プロファイルでは、さまざまなジャンルの専門家を募集しています。
出展をご検討の方はお気軽にご請求ください。

プラグインを利用せずにWordPressにFacebookコメント欄を設置する簡単な方法

- good

  1. 法人・ビジネス
  2. ホームページ・Web制作
  3. ソーシャルメディア対応

WordPressは様々なプラグインが用意されてユーザーには非常に利用しやすいCMSである。
そして、WordPressにFacebookのコメント欄を設置しているページも多い。

なぜFacebookのコメント欄を利用するか?
答えは簡単である。

1.実名なのでスパムコメントやサイト自体が荒らされない
2.ユーザーと親近感が保たれ、交流しやすい
そして、何より、
3.コメントした人のウォールに流れれば、アクセスアップが見込める
4.WordPressの実装のコメント欄よりも書き込みやすい

これらのことから、Facebookのコメント欄に変更するサイトオーナーは多くなってきている。
そこで私も様々なWordPressのプラグインでFacebookのコメント欄を試してきた。
Facebook公式のwordpressプラグインが登場したので私も設置してみたが、設定が素人では大変。。。

 

そこで、プラグインを利用せず、WordPressのコメント欄をFacebookのコメントに切り替える方法を説明します。

1.まず、Facebook開発者ページの下記にアクセスhttp://developers.facebook.com/docs/reference/plugins/comments/

2.各項目の設定をします。

URL to comment on:サイトアドレスですが、そのままで変更しない
Color Scheme:空欄のまま
Number of Posts:コメントを何件表示するか?
Width:自分の投稿ページの横幅やレイアウトに合わせて変更

 

3.入力が完了したら、「Get Code」をクリック

 

4.ポップアップで下記のようなコードが発行されます。

上記1.2をそれぞれコピーしておきます。

 

5.続いて、WordPressへの実装です。

ダッシュボード>外観>テーマ編集>からヘッダーを選択

4(1)をheader.phpの中にある<body>の直下にペーストします。

 

6.次に4(2)を実装します。

<準備>
このまま貼り付けると、「http://example.com/comments」へのコメントになりますので、この箇所を変更します。

書き換え前
<div class="fb-comments" data-href="http://example.com/comments" data-colorscheme="The color scheme used in the plugin" data-numposts="10" data-width="500"></div>

書き換え後
<div class="fb-comments" data-href="<?php the_permalink(); ?>" data-colorscheme="The color scheme used in the plugin" data-numposts="10" data-width="500"></div>

http://example.com/comments を
<?php the_permalink(); ?>に変更することにより、WordPressの記事ごとのURLになります。

<実装>
ダッシュボード>外観>テーマ編集から単一記事の投稿(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. ?>

現在デフォルトのコメント欄を利用していないユーザーは、contentの後の自由な場所に設置してください。

 

公式プラグインや、その他のプラグインを利用するよりも簡単に設置できます。

ぜひ、お試しください。

 

 

このコラムに類似したコラム

ツイッターなどSNSでの動画活用 児島 康孝 - 動画マーケティングコンサルタント(2015/11/15 08:23)

Facebook 友達からのウザいアプリの招待を受け取らないようにする方法 小菅 太郎 - ITコンサルタント(2015/02/09 10:13)

乗っ取られてからでは遅い!Facebookの2段階認証カンタン設定方法 小菅 太郎 - ITコンサルタント(2014/11/11 10:13)

携帯メールアドレスが無くなる日 小菅 太郎 - ITコンサルタント(2014/09/11 11:28)