SimplicityでFacebookコメントを「関連記事下」に「記事別コメント」になるように実装する方法

https://farm6.static.flickr.com/5762/20919637280_707214c8c3.jpg

こんにちは。WordPress初心者のSimplicity野郎・部長ナビ(@nabi_1080)です。日々カスタマイズ頑張っております!

当ブログではテーマ「Simplicity」を使っておりますが、Facebookコメントを導入しましたので、その方法を紹介します!

スポンサーリンク

通常コメント+スパムコメント対策プラグイン(しかも有料)に限界を感じた

毎日大量のコメント、メッセージをいただく私ですが、中には「えー」ってモノも当然あります。「そういうつもりで書いたんじゃないですけど・・・」ってのもあります。人によってとらえ方が違うので仕方ないところもありますが、困るのが、「匿名」「架空アドレス」の心ないコメントです。公開しなければ良いんですが、ブログの著者は必ず見るので、結構精神的にやられます。特にチキン野郎の私は「ああ・・・」ってなります。凹みます

そんなこんなで、常連さんに色々お話ししてみたところ「You!Facebookコメントにしちゃいなよ!」と言うありがたいご助言をいただきまして、紆余曲折の上、見事にSimplicityの「関連記事下」に実装できましたので、やり方を報告させていただきたいと思います。

先に言っておきます。Facebookコメント、マジで良いです。ある程度PV、コメントがある方はぜひ取り入れると良いと思いますよ!オススメです! 

Facebookコメントを「Simplicityの関連記事下」に「記事別コメント」となるように実装する手順

1 アプリIDを取得する
【WordPress】FacebookでOGP・adminID・アプリID(appID)の設定方法
【WordPress】FacebookでOGP・adminID・アプリID(appID)の設定方法
こんにちは。WordPress初心者のSimplicity野郎・部長ナビ(@nabi_1080)です。日々カスタマイズ頑張っておりま...

この記事の真ん中くらいに「アプリを作成してappIDを取得」とありますので、そこを見て、FacebookのadminIDを取得した上で(コレも書いてあります)、appIDを取得してください。たぶん、コレが一番面倒。

なお、「appID」はEvernote等のメモアプリ「ブログ備忘録」に書いておくことを忘れずに!ブログ移行や、テーマのバージョンアップ等で再入力が必要な場合がありますが、探すのが面倒すぎるので書いておきましょう!

2 Facebook開発者ツールから、コメントボックスを作成
Facebookコメントを投稿ページごとに設置する方法
WordPressサイト内でそれぞれの投稿記事内に、Facebookからのコメントを受け付けたい場合Faceb&

このサイトを参考に、ソースコードを取得します。

ただ、この「開発者ツール」から取得したコードをそのまま使うと、「全ての記事で同じコメントになる」んですよ。例えば、SOLCOさんが、「Twitterのフォロワー150人突破おめでとう!」ってコメントしてくれると、そのコメントが全記事に表示される感じです。

このままだと使えないので、リンク先にある通り、プラグインコードの「data-href」のところを、”<?php the_permalink(); ?>”と書き換えます(最初は自分のアドレスが入っていると思う。ちなみに、赤文字のコードは、誤作動を防ぐために、<>が「全角」ですので、コレ、このままコピーしても使えません。半角にしてください)。コレ、ポイント。これをやることで、記事に対してコメントした内容が、その記事だけに反映されるようになります。まあ、「普通になる」ってことです

3 WordPress管理画面の「外観」「ウィジェット」で「関連記事下」に「テキスト」ウィジェットを配置し、その中にコードを全部コピペする

色々場所を試しましたが、「関連記事下」が一番Simplicityではしっくりくると思います。人によって、場所の違いはあると思うので、お好みでウィジェットの場所を変えると良いと思います。挿入するウィジェットは「テキスト」です。これで、PCでも、モバイルでも表示されるようになります。

開発者ツールからゲットできるコードは2種類ありますが、両方コピペします。2の「記事ごとのコメントにする」という赤文字の書き換えを忘れないでくださいね。

4 自分でコメントしてみる(通知の確認)

これでイケるはずです。コメントすると、自分だとダメな気がしますが、「ページアカウント」だと、「Facebook」に通知が来るはずです。で、クリックすると、「どのページにコメントが来たか」が開発者ツールで表示されると思うので、確認してみてください。本アカウントのみしか無い場合は、お友達にお願いしてコメントしてもらうと良いと思います。

5 公開設定をして、完成

Facebookコメントは基本的に本名が出るので、色々出したくない情報もあると思いますから、基本情報の設定画面(Facebook)で、自分の個人情報をどこまで「公開」にするか設定してください。「友達のみに公開」だと、何も問題ありません。

「Facebookコメント」で投稿するときの注意点と「公開の種類」のコツ
「Facebookコメント」で投稿するときの注意点と「公開の種類」のコツ
こんにちは。部長ナビ(@nabi_1080)です 当ブログでは、コメントシステムに「Facebookコメント」を取り入れておりまして、匿名の...

↑詳しくはこちらをどうぞ!

最後に・なぜ、「プラグイン」を使わないのか?

Facebookコメントには、「一発で設置できるプラグイン」もありますし、私も数種類試しましたが、結局やめました

理由は、「関連記事下にコメント持ってこないと、なんか見た目というか、順番がが変」と感じたからです。

プラグインは無料で、簡単にできますが、SNSのボタンのあたりとか、微妙な位置でコメントがドカーンと出てきます。うーん、これ、いいのか?って思って色々調べて、結局「コード取得して、ウィジェットとで関連記事下に貼れば良いじゃん」って結論に達し、「赤文字修正しないと、全ページにコメントが出る」問題に直面し、コレも何とか解決しました。ふぅ・・・。

っつーわけで、Simplicityで、Facebookコメントを「関連記事下」に「記事別コメント」になるようにする方法でした!Simplicity野郎の皆さん、ぜひ導入してみてくださいね!アディオス!

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

この記事の関連カテゴリ

サイト内検索