【WordPress】ブログにレスポンシブ対応したFacebookコメントを設置する方法

【WordPress】ブログにレスポンシブ対応したFacebookコメントを設置する方法

いや、そりゃあ嬉しいさ。
「いいね!」されると。

ということで、今回はFacebookのコメント欄をWordPressのブログに設置してみようってお話です。

Facebook使ってないけどあったほうがいいと思って。
だってFacebook流行ってるって聞いたもんね(´・ω・`)

コメントをFacebookコメントにしたら、実名ってことから荒らしコメントが減るとか良い面が多いって噂です。
今回は通常のブログコメントも残すパターンなのであまり関係ないですけど。

まあ、スパムはAkismetが守ってくれてるし、荒らされるほどコメントもらったことないんだけどね。ははっ。

で、Facebookのコメント欄を、そのまま設置しても幅が固定されているのではみ出します。
せっかくレスポンシブテーマを使ってるので何とかしたいと思い、(人のを参考に)何とかした方法です。

こんな感じ。
120313

Facebookコメントの設置方法

まずはFacebookコメントの設置から説明します。
分かる人は飛ばして下さい。

アプリ登録

デベロッパーのページに行きます。 
⇒ Facebook開発者ページ

開発者登録がまだの人はこの機会に登録しときましょう。
なんか「開発者」って響きカッコイイし、憧れるよね。

新規アプリ作成

右上の「新規アプリの作成」ボタンをクリック。
120301

アプリ名に任意の文字を入れて「続行」。
今回は「コメント」としました。
120302

例のなかなか読めない認証を入力。
120303

は?(# ゚Д゚)

で、作成したらこの画面になります。
120304

この画面で、以下の2箇所にブログのURLとドメインをそれぞれ入力しておきましょう。
120316

ここを入力しておかないと、警告:~~~~に到達できません。と表示されます。
OGPのエラーが原因だそうです。
120306

【追記1】
記事によって警告文が表示されることがわかりました。
記事によるということは、タイトルの記述が関係してるのかな・・・?

【追記2】
こちらのブログの方法で解決しました。
⇒ facebookでブログ共有の際「警告:http://xxxに到達できません」の対処方法

<head>内に下記の記述を入れたら消えました。

<meta property="og:locale" content="ja_JP" />

これで少し様子を見ます。

そして保存します。

コメントの作成

次にコメントのコードを生成します。

コメント作成ページ

上のメニューバーの『Docs』⇒ 左メニュー『Social Plugins』⇒ 『Comments』。
120307

コード生成

必要項目に入力して『Get Code』
120308

今回はレスポンシブに対応する物を作るので、「Width」は空欄でもいいはず。

サイトに貼り付け

『Get Code』をクリックしたら下記の画面が出ます。
120315

これらのコードをWordPressのブログに貼り付けます。

➀ は「body」内に貼り付けます。
➁ はコメントを表示させたいところに貼り付けます。

以下は私のテーマ環境&好みです。(たぶん大きく変わらないと思います)

▶ Check!

今回は直で編集してますが、あんまりよろしくない。

まずは ➀ から。

<body>の頭でいいと思うので、<header.php>に貼り付けます。

120314

次に ➁ です。

ブログ記事は<single.php>なので、この中に➁をコピーしました。
本来は<comments.php>とかの方がいいかもしれませんが、ここは好みの場所で。

変なところに入れると動かなくなるので、本来はローカルで作業したほうが良いと思います。

私はここに入れました。
120311

で、WordPressにはタグがあるので、『data-href=”http://ブログURL”』の部分を
data-href=”<?php the_permalink(); ?>” 」に変更しときます。
※ ↑ の < > は全角で書いているのでコピペ注意。

で完了です。

レスポンシブに対応させる方法

んで、タイトルにも書いたとおり、レスポンシブのテーマにも対応させたいと思います。

最初コード内のWidthを100%にしてみたんですが無理でした。
そんなに世の中甘くない。

そうなるとstyle.cssでなんとかするしかない!

<style.css>に記述

/********facebookコメントを可変幅に********/
.fb-comments,
.fb_iframe_widget,
.fb_iframe_widget[style],
.fb-comments iframe[style],
.fb-social-plugin span,
.fb-comments span {
    width: 100% !important;
    display: block;
}

この記述はこちらを参考にさせて頂きました。ありがとうございます。
⇒ WordPressのコメントをfacebookに対応させる方法。

今回コードを生成する時に幅を設定していないので、ビヨ~ンと横幅いっぱいに広がります。

私はWidthを設定しなくてもいいかなーと思ってそのままにしてるんですが、
レイアウトや設置場所によっては最大幅を調整したほうがいいと思います。

その場合は max-width を追記しときましょう。
例えば450pxにしたいとき

/********facebookコメントを可変幅に********/
.fb-comments,
.fb_iframe_widget,
.fb_iframe_widget[style],
.fb-comments iframe[style],
.fb-social-plugin span,
.fb-comments span {
    width: 100% !important;
    display: block;
    max-width:450px;/*最大幅450px*/
}

以上でレスポンシブに対応したFacebookコメント欄の完成です。

120313

1210

まあFacebookでコメントもらったことないから、本当に上手く動作するか不安なんですけどね。

いつか貰える日が来ることを目指して、誰かの役にたてる記事を残せるよう精進します。

[ad#ad-post-bottom]

気分に任せて更新中 ε-(/・ω・)/ トォーッ!!
follow us in feedly

18 Comments
  1. omamu より:

    すごく役に立ちました。ありがとうございます。
    このページに「いいね!」したかったのですが
    「facebookでシェア」しかなかったので、
    コメントさせていただきました。
    ありがとうざいます。

    1. shouken より:

      コメントありがとうございます。

      お役に立てて良かったです!
      やっぱり「いいね!」ボタンもあったほうがいいですね。
      ありがとうございますm(_ _)m

  2. ピンバック: Facebookのブログパーツ「コメント入力欄」を設置する - 送電鉄塔探索録
  3. ピンバック: Facebookのブログパーツ「コメント入力欄」を設置する - Makky-NOTE
  4. shibuya より:

    先月、本エントリーを参考に設置した際は
    うまくレスポンシブになっていたのですが、
    つい最近、なぜか横幅が550pxになってしまいました。

    CSSが効いていないようで、いろいろ試してみましたがうまくいかずです。
    このブログのFacebookコメント欄も550pxで表示されているようですが、
    Facebook側の仕様変更に伴うものなのでしょうか。
    もしくは私のブラウズ環境によるものでしょうか。
    変化のある前後で特に環境は変えていないので、
    コードの問題だと思っているのですが。

    もし何か問題となっている可能性が分かりましたら、
    教えて頂けますと幸いです。よろしくお願い致します。

    1. shouken より:

      こんにちわ!
      つまり「レスポンシブにならなくなった」ということでしょうか?

      今パソコンがなくソースコードの確認ができませんが、iPadとiPhoneで確認した限りでは当ブログの変化はありませんでした。
      少なくともコメント入力ボックスは問題ないように思えます。
      Facebookの仕様は頻繁に変わるのでその可能性もありますが、ブラウザの問題かもしれません。

      もし私の理解不足、勘違いであればすいません。。。

      ☆ shibuyaさんのリンクにあるブログも確認させて頂きましたが、こちらでは画面幅に応じて正常に変化されているようです。

      1. shibuya より:

        レスありがとうございました!

        失礼しました、言い方が下手でした。
        「レスポンシブにならない」ではなく、「PCで見た時にMAXが550pxになってしまっている」です。
        shoukenさんのブログもこんな感じに見えています。
        http://nmbr.jp/wp/wp-content/uploads/2014/03/CapD20140308231554.jpeg

        これと同じ状況です。
        ブラウザはChromeとFirefoxとIEで見てみましたが、いずれも同じでした。

        shoukenさんのPCから見た際はいかがでしょうか?

        よろしくお願いします!

        1. shouken より:

          shibuyaさん。

          すいません。おっしゃってる意味がわかりました!
          言われるまで全く気が付きませんでしたが、いつの間にか550pxで制御されてますね(笑)
          画像も添付して頂きありがとうございます。
          わたしのパソコンからでもそれは確認できました。

          で、結論を申し上げると、私の知識では解決できませんでした。
          cssにmin-width:600pxを追記したり色々試しましたが制御出来ません。

          おそらく仕様だとは思いますが、
          例えば、この記事では開発者サイトで横幅を指定せずに作成しましたが、そこでしっかりと横幅を指定するといいかもしれません。

          私はもうこのまま放置しとこうと思いますが、サイト次第では解決が必要ですよね~。
          お力になれず申し訳ないですm(__)m

          私も分かり次第記事にしたいと思います。

          1. shibuya より:

            shoukenさん

            お返事ありがとうございました!
            自分だけではないということがわかり、少し安心しました(笑)
            仕様が変わったのですね、きっと。

            横幅指定も考えましたが、私のサイトはレスポンシブなので、
            スマホで見た時にはみ出てしまうと「コメントする」が押せなくなってしまい、
            機能しなくなってしまうため、上下のオブジェクトと横幅が揃わず
            少し気持ち悪いですが、解決策を見い出すまで私もこのままでいこうと
            思います。(その際はまたコメントさせて頂きますね)

            よろしくお願いします!

  5. Blue より:

    4匹目のニワトリさんの方で使用されているこちらのコンタクトフォームが素晴らしく、是非とも参考にさせて頂きたいのですが、設置方法を掲載して頂けませんか?

    1. shouken より:

      こんにちわ!

      コメントありがとうございます。
      4匹目のニワトリで笑ってしましました(笑)

      当サイトは「コンタクトフォーム」を使っていませんが、
      「コメント欄」という意味でよろしいでしょうか?

      コメント欄という前提で返信しますね。
      当サイトは「Pytheas」という無料のテーマを利用しています。
      そのため、私が作成したのではなく、こういうデザイン・仕様です。

      私が手を加えたのは日本語とアイコン画像程度で、私が設置したものではありません。
      お力になれず申し訳ないです。

  6. ハヤカワ より:

    素人の私でも設置できました★感謝です^^

    ただ、コメントを頂いた後、こちらで承認しなければならないのですが、、

    それを解除する or コメントが付いた事を知らせてくれる機能などはあるのでしょうか?

    お手数ですが、お聞きできると幸いです^^;

    1. shouken より:

      コメントありがとうございます!

      WordPressのコメントの承認ではなく、フェイスブックコメントの承認設定の解除ですか?
      これはちょっとわかりませんm(__)m
      でも承認制にしてたほうが、荒らし対策になるので、個人的には承認制がいいと思います。

      また通知についてですが、
      Facebookのデベロッパーツールで、「コメントモデレーション」というのがあります。
      これはブログにコメントをもらったら、通知してくれるように設定できるものです。
      通知はフェイスブックのアカウントに通知されると思います。
      これを試してみてはいかがでしょうか?

  7. ピンバック: WordPressにFacebookソーシャルプラグインを入れてみた!
  8. ピンバック: Facebookのブログパーツ「コメント入力欄」を設置する
  9. ピンバック: Facebookのブログパーツ「コメント入力欄」を設置する – StarBrother
  10. ピンバック: Facebookのブログパーツ「コメント入力欄」を設置する
  11. ピンバック: Facebookのブログパーツ「コメント入力欄」を設置する | Makkyの防戦一方

Facebookのブログパーツ「コメント入力欄」を設置する - 送電鉄塔探索録 へ返信する コメントをキャンセル

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください