Facebookのいいねボックス、またはFacebookファンボックスとして知られるものは、多くのウェブサイトにとって必須の要素となっています。最近、Facebookはこのウィジェットを新しいFacebookページプラグインに置き換えました。この記事では、WordPressにFacebookページプラグインを追加する方法を紹介します。
注意: WordPressサイトに古いLike BoxまたはFan Boxを既に実装しているユーザーは、新しいPageプラグインに自動的に移行されます。
Facebookページプラグインとは？
Facebookページプラグインは、以前はFacebook Like Boxとして知られていたものの後継です。ウェブサイトでFacebookページを宣伝することができました。新しいFacebookページプラグインも全く同じことをします。
Facebookのカバー写真も表示される、新しく改良されたデザインになりました。2つのボタンが付属しています。ユーザーはあなたのページに「いいね！」をしたり、共有したりできます。友達のどちらがすでにあなたのページに「いいね！」をしているかを表示するオプションがあります。Facebookページからの最新の投稿を表示することもできます。
動画チュートリアル
動画が気に入らなかった場合や、さらに詳しい説明が必要な場合は、読み進めてください。
WordPressに新しいFacebookページプラグインを追加する方法
まず、Facebookのページプラグインのウェブサイトにアクセスする必要があります。そこで、Facebookページの埋め込みの外観を設定するオプションが見つかります。
FacebookページのURLを入力するだけです。次に、ボックスの幅と高さを入力する必要があります。または、空白のままにしておくと、Facebookが自動的に調整しようとします。
カバー写真、投稿、友達の顔をページプラグインに表示できます。表示に満足したら、コードを取得ボタンをクリックして続行してください。
Facebookは、2つのコードスニペットを表示します。最初のコードスニペットをコピーし、テーマまたは子テーマのheader.phpファイルの<body>タグの直後に貼り付けます。
次に、2番目のコードスニペットをコピーし、ページのようなボックスを表示したい場所に貼り付けます。外観 » ウィジェットに移動して、このコードスニペットをテキストウィジェットに貼り付けることもできます。
この記事が、FacebookページプラグインをWordPressサイトに追加するのに役立ったことを願っています。また、WordPressを使用してFacebookの「いいね！」を増やすための5つの簡単な方法に関する記事もご覧ください。
この記事が気に入ったら、WordPressのビデオチュートリアルのために、YouTubeチャンネルを購読してください。また、TwitterやFacebookでもフォローできます。
パディ
Mozillaブラウザには対応しておりません。Chromeのみ対応です。
すべてのブラウザで利用できるように設定を手伝っていただけますか？
WPBeginnerサポート
ページプラグインはFireFoxでも動作するはずです。ブラウザのアドオンを無効にして、競合がないか確認することをお勧めします。
管理者
Roja
シェアボタンの代わりに「電話する」または「メッセージを送信」のオプションはありますか？
Mario
こんにちは。ウィジェットでテキストまたはHTMLウィジェットを追加しようとすると、data-attribute要素がすべて削除されてしまうため、うまくいきません。助けていただけますか？
Xavier Clapin-Pépin
wpbeginnerさん、ありがとうございます。Facebookプラグインページを追加するためにWPプラグインをダウンロードする必要がないので素晴らしいです。これは、競合を回避し、潜在的な問題を減らすためにプラグインの数を最小限に抑えることが推奨されています…
ウェブサイトのFacebookプラグインページは右側のサイドバーで見られるように、素晴らしい見た目です：
素晴らしい仕事を続けてください！
Xavier
ジョン
まだ問題があります…
何らかの理由で、入力中に
ページのプレビューが表示されません…
なので、私が何か権限設定を間違えたのだと思います。
コードを取得してページに貼り付けても、表示されません。助けてください！
ジョン
Xavier Clapin-Pépin
私も同じ問題がありました。Facebookページが設定で公開されていることを確認してください。
テレサ
分かりました、それは解決しましたが、投稿を表示したくありません – 大きくなりすぎます。あなたの例では、それをチェック解除できる場所を示していますが、ページにはそのオプションがありません。それを削除して、私のFBページのヘッダーだけを表示するにはどうすればよいですか？ありがとうございます
テレサ
あなたがおっしゃった通りにしました。コードをコピーしたページと同じように、マーク・ザッカーバーグのライブビデオが表示されるFBボックスが表示されました。なぜそうなるのでしょうか？明らかに私が望むものではありません。なので役に立ちませんでした。
Diana Lesko
素晴らしいビデオ？編集部分は？幅はどこで編集しますか？
Diana Lesko
I found my answer.
I cant delete my comment, sorry.
ジョン
分かりました、お手上げです。友人の旅行代理店のWordpressサイトでここの指示に従ったところ、完璧に機能しました。4日間は。その後、機能しなくなりました。テストするために、URLを別の友人のFacebookページに変更したところ、機能しました。しかし、旅行代理店のページに戻すと、何も起こりませんでした。何が起こっているのか、またはさらに良いことに、アプリを再び機能させる方法についてのアイデアがあるかどうか、お尋ねしたいと思っていました。
Anne Marie
こんにちは。
このプロセスを完了するのに本当に苦労しています。Facebook開発者ページが私のFacebookページURLとプロフィールページURLを拒否します…ブログに表示させるために何をすればいいのか全くわかりません。
また、Beaver Builderツールを使ってFacebookのプラグインから「ショートコード」を追加しようとしても、うまくいきません！何も表示されません。助けていただけますか？よろしくお願いします！！！
クリス
これに対する答えは見つかりましたか？FBの設定ですか？私も同じ問題を抱えています。グループにこれをやろうとしています。コードが正しく機能するためにページ管理者である必要があるのか、それとも何なのか分かりません。
アンヌ＝マリー
Hi Chris, yes! I wrote to the plugin company and they helped me understand the major difference between “everyone’s” Facebook page (aka, your personal page)–AND–the Facebook page you create with a different account..so until you do the steps via Facebook to create yourself a second, “professional” page (free, quite easy to do), no plugin will work. Once you do this, go back in the plugin section asking for your professional page Facebook URL (which is different), and it should show easily on your blog or site…hope it works for you too!
rohit
こんにちは。私のウェブサイトでリンクは取得できるのですが、ページの画像やビジュアルを取得できません。これを修正するにはどうすればよいですか？助けてください。
Monique
WPからFacebookページに写真、記事（またはリンク）を表示するにはどうすればよいですか？
niloy
このFacebookプラグインの言語を変更するにはどうすればよいですか？
AL
It works, thanks
Bogdan
ウィジェットでのみ機能します。ページで機能させるにはどうすればよいですか？
ジャッキー・パリー
情報ありがとうございます。私のような初心者にとって、最初の写真にあるようにFBページのURLを入力するページはどこにありますか？FBプラグインのウェブサイトへのリンクを開きましたが、URLを追加するために正しいページをどのように表示すればよいかわかりません。アドバイスをお願いします。ありがとうございます。
4月
役立つ投稿です！ありがとうございます。
Tomas
この投稿はまさに探していたものでした。ありがとうございます！
ただし、シェアボタンを使用すると、全員が次のエラーを受け取ります。
アプリのセットアップがされていません：このアプリはまだ開発モードであり、アクセス権がありません。登録済みのテストユーザーに切り替えるか、アプリ管理者に権限を要求してください。
何かアドバイスはありますか？ありがとうございます！
Carole
コードを挿入しましたが、何らかの理由で画像のトップ1/4インチしか表示されません。コードを作成するためのFBページのプレビューでは問題なく見えますが、私のウェブサイトでは表示されません。修正方法について何かアイデアはありますか？
Paul Butterworth
これ、ありがとうございます、動作はするのですが、「プラグインコンテナの幅に合わせる」が機能しません。狭いのですが、手動で設定すると500ピクセルの最大幅がかなり狭いです。もっと広くする方法はありますか？
エリック
質問: このFacebookページプラグインは、Cameron Jonesが作成したFacebookページプラグインと同じものですか？
それが重要かどうかわかりませんが、どちらを使うべきか判断しようとしています。何か役立つ提案や情報があれば、感謝します！
よろしくお願いします。
エリック
WPBeginnerサポート
いいえ、同じではありません。
管理者
キャメロン・ジョーンズ
Erik様
私のプラグインとここのチュートリアルは同じですが、異なってもいます。このチュートリアルに従うと、Facebookプラグインのコードを追加するためにテーマのテンプレートを編集する必要がありますが、私のWPプラグインを使用すると、すべてのコードが自動的に記述され、ショートコードまたはウィジェットでオプションを制御できます。
お役に立てれば幸いです
キャメロン
Junaid
この方法でFacebookフィードを追加しましたが、最新の投稿は5件しか表示されず、5件の投稿後に「Facebookで友達になる」ボタンが表示されます。無制限に投稿を表示するように設定したり、少なくとも表示する投稿数を増やしたりする方法はありますか？
WPBeginnerサポート
FacebookのソーシャルプラグインページでAPIパラメータを確認してください。
管理者
Junaid
そこはすでに確認しましたが、表示する投稿数を設定するパラメータが見つかりませんでした。
Long Nguyen
ヘッダー.phpに最初のスニペットをコピーしなくても、2番目のスニペットのコードがバッジを表示するのに役立つことがわかりました。
しかし、バッジがすべて表示されないという問題に直面しています。左半分しか表示されず、コードで幅を調整しても右側の共有ボタンがなくなってしまいます。
フルバッジにするにはどうすればよいですか？よろしくお願いします。私のウェブサイトはdiadiemdulich.comです。
samkelo magoqo
投稿ありがとうございます！動画チュートリアルも見たかったです
WPBeginnerサポート
ビデオチュートリアルは近日公開予定です。
管理者
ジャレッド
一部のテーマでは、FacebookのJavaScript SDKの初期化をファイルに追加する必要があることに気づきました。プラグイン用のFacebookが提供するコードと同様に。
JavaScriptを最小化して実験しましたが、それでも機能します。しかし、新しいプラグインのパフォーマンスが不足しています。以前使用していたものと比較して、最後に読み込まれることに気づきました。
リンジー・ガルシア
OK、素晴らしい、これはすごい！でも、子テーマの.phpファイルにコードを貼り付けるにはどうすればいいですか?????まったく意味がわかりません（初心者ブロガーです）。WordPressダッシュボードから行うのですか？ホスト経由で行う必要があり、そちらにアクセスする必要がありますか？この件に関するYouTubeチュートリアルも見つけましたが、彼らもその方法を説明せずに同じことをしていました…??助けていただけると嬉しいです！ありがとうございます！
Sajid Akhtar Rehman
本当にありがとうございます…素晴らしい投稿で、正常に動作しました
NemiraB
こんにちは、情報ありがとうございます。少し複雑ですが、試す価値はあると思います。これらのソーシャルコネクションは非常に重要です。なぜなら、それなしではメッセージをどのように広めることができるでしょうか？すべてうまくいくことを願っています。Nemira
Abhishek
アップデートありがとうございます。ついにFacebookページプラグインでサイトを更新しました。上記の最初のコードは使用せず、2番目のコードを使用して、表示したいときにウィジェットを作成しました。
oladayo awe
この投稿ありがとうございます
Govertz
この新しいFBプラグインのパフォーマンスへの影響をテストした人はいますか？
ダミアン・カーベリー
関数プラグイン（wp_head用のadd_action付き）は、JavaScriptコードを配置するのに適した場所です。これにより、header.phpファイルを変更する必要がなくなります。これは、サイト所有者が親テーマを変更した場合や、子テーマのコードに触れたくない場合に便利です。