WordPressのコメント欄をデフォルトからFacebookに変更してみた【STINGER3】

      2014/08/06

fb-comments
当ブログですが、まだそれほどアクセスは無いはずなのにしばしばスパムコメントが入ってきます。不思議ですねぇ。まぁ、「Akismet」プラグインのおかげで公開前に未然にブロックすることができているのですが、やっぱり気持ち悪いことには変わりありません。

そこで今回は、Wordpressデフォルトのコメント欄を廃止してFacebookのコメント欄に変更してみたのでその方法をご説明します。その方がFacebookのタイムラインやニュースフィードにもコメントが載るみたいなので、アクセスアップが見込めて一石二鳥ですよ(きっと)。

なお、当ブログは「STINGER3」というテンプレートをベースにしていますので、実装方法も「STINGER3」がベースになることをご容赦ください。

スポンサーリンク

Facebookコメント欄の実装方法

1.コードを取得

下のURLにアクセスして、コードを取得しましょう。
http://developers.facebook.com/docs/reference/plugins/comments/

facebook-comments-1
URL to comment on:とりあえず変更なしでOK
Width:フォームの幅です。実装するブログに合わせてピクセル単位で指定してください。
Number of Posts:表示するコメント数です。適時設定してください。
Color Scheme:フォームの表示色です。選択すると下部のプレビューが変わるので、お好きなものを選択してください。

以上の設定を行い、「Get code」を押すと2種類のコードが生成されます。

2.コードの実装

facebook-comments-2
まず1つ目のコードを、header.phpの<body>タグ直下にコピペしましょう。
(「STINGER3」だと、<body <?php body_class(); ?>>というタグです)

変更前(header.php)

変更後(header.php)

 
次に2つ目のコードを一旦、テキストエディタなどにコピペしましょう。
その後、http://example.com/commentsとなっている部分を、WordPressでの記事URL指定タグ<?php the_permalink(); ?>に変更しましょう。

変更前(テキストエディタ)

変更後(テキストエディタ)

 
次にsingle.phpのコメント欄表示タグを、上記コードに差し替えます。
(「STINGER3」だと、<?php comments_template(); ?>というタグです)

変更前(single.php)

変更後(single.php)

 
ここで一つ注意点があります!実装対象のコンテンツが1種類の場合は上記方法で問題ありませんが、「STINGER3」のようにPC向けコンテンツとスマートフォン向けコンテンツが用意されているテンプレートの場合、それぞれのコンテンツに合った表示幅の設定が必要になります。WordPressではこのようなスマートフォン判定を、以下のタグで実装することが可能です。

(このタグはWordPressをカスタマイズする上で他でもいろいろ利用できそうなので、覚えていて損は無いでしょう。)

条件分岐タグの中に、それぞれのコンテンツに合った表示幅のタグ(「width=」の後に書かれた数字を調整すればOK)を入れますので、最終的には下記のコードになります。

(スマートフォン向けコンテンツの幅が280px、PC向けコンテンツの幅が590pxの場合)

このコードで、single.phpのコメント欄表示タグを差し替えます。

変更前(single.php)

変更後(single.php)

 
以上の作業で、デフォルトのコメント欄からFacebookのコメント欄に変更されます。さあ、あなたのブログも気持ち悪いスパムコメントからおさらばして、Facebookからアクセスアップしちゃいましょう!

こちらの記事もいかがですか?

そのほか、STINGER3のカスタマイズについてまとめてみました。

わたしがSTINGERでカスタマイズしたことをまとめてみた

 - ブログカスタマイズ

スポンサーリンク

  関連記事

CSSとWEBフォントだけで作ったSNSシェアボタンをSTINGER3に入れてみた

CSSとWEBフォントだけで作ったSNSシェアボタンを、STINGER3に導入する方法をご紹介します …

WEBフォントで簡単に!STINGER3の細かいところにアイコンを入れてみた

WEBフォントを使って、簡単にアイコン装飾を行う方法をご紹介します。細かいところまでに気をつかえば、 …

気持ちいいエフェクトのスライドメニュー「Off-Canvas Menu Effects」を入れてみた

スライドメニューを表示するときのエフェクトが気持ちいい「Off-Canvas Menu Effect …

わたしがSTINGERでカスタマイズしたことをまとめてみた
わたしがSTINGER3でカスタマイズしたことをまとめてみた

STINGER3をテーマにした当ブログで、わたしがこれまでに実装したカスタマイズの内容を、まとめてご …

STINGER3のtitleタグ先頭に入る改行とスペースを消してみた

photo credit: Huasonic via photopin cc 実はさっき気がついてし …

STINGER3の「関連記事」表示を横並びにカスタマイズしてみた

STINGER3の「関連記事」表示を横並びにカスタマイズする方法をご紹介します。必要以上に縦長になっ …

STINGER3のフッターを3カラムにカスタマイズしてみた

個人のブロガーは、記事の執筆はもちろんのことながらブログのデザインにも多少は気を配って、自分でカスタ …

WordPressのテーマをSTINGER3に変更してみた

ブログを始めて少なくとも数ヶ月はほとんどアクセスなんてありませんよっ!なーんてことは重々承知のつもり …

WordPressでメディアを挿入のリンク先を最初からなしに設定する方法

WordPressで投稿の本文に画像メディアを挿入する時、リンク先をメディアファイルではなく、最初か …

CSSを使ってプロフィールやサムネイルの画像を丸く切り抜く方法

最近よく見かける、プロフィールの画像やサムネイルの画像なんかを丸く切り抜いたデザイン。これは丸く切り …