WordPress に Facebook Like Box / Fan Box を追加する方法

あなたは Facebook のフォロワーを増やすために一生懸命努力してきましたが、あなたのウェブサイトの訪問者はあなたのページに接続していません。イライラしますよね？

WordPressとFacebookを統合するためのさまざまな方法をテストした結果、シンプルないいねボックスがソーシャルフォロワーを増やす上で大きな違いを生むことがわかりました。

よく配置されたFacebook Like Boxは、ウェブサイトとソーシャルメディアの間のギャップを埋め、訪問者がサイトを離れることなくFacebookページと交流できるようにします。ソーシャルプルーフに大きな影響を与える可能性のある小さな追加機能の1つです。

このガイドでは、WordPressサイトにFacebookいいねボックスを追加するための2つの簡単な方法を紹介します。Facebookいいねボックスプラグインアプローチとコードソリューションです。

WordPress ウェブサイトに Facebook いいね！ボックスを追加する理由

WordPressウェブサイトにFacebookのいいね！ボックスを追加すると、いくつかの素晴らしい特典があります。

まず、Facebookファンページやビジネスページを簡単に「いいね！」できるようにすることで、人々を引きつけます。これにより、あなたの投稿がFacebookフィードに表示されるため、ウェブサイトを超えて人々にリーチし続けることができます。

また、Facebook ページいいねボックスは、何人があなたの Facebook ページを気に入ったかを示します。これはソーシャルプルーフとして機能し、より多くの訪問者に「いいね！」をクリックするように促すことができます。

このチュートリアルでは、Facebook いいねボックスを追加する 2 つの方法を紹介します。1 つはソーシャルプラグインを使用する方法、もう 1 つはコードを使用する方法です。以下のクイックリンクを使用して、記事をナビゲートできます。

• 方法1：WordPress Facebookいいね！ボックスプラグインを使用する（初心者向け）
• Method 2: Adding a Facebook Like Box With Code

方法1：WordPress Facebookいいね！ボックスプラグインを使用する（初心者向け）

この最初の方法は、初心者がサイトにFacebook Like Boxを追加するための最も簡単で推奨される方法です。また、必要に応じてFacebookフィードをウェブサイトに表示することもできます。

この方法では、WordPressのさまざまなソーシャルメディアフィードといいねボックスを埋め込むことができる使いやすいWordPressプラグインであるSmash Balloonを使用します。

このチュートリアルでは、Smash Balloon Social Postフィードプラグインの無料版を使用できます。ただし、いいねボックス以上の機能（動画、写真、イベントの表示など）が必要な場合は、Pro版へのアップグレードをお勧めします。

Smash Balloon Facebookフィードプラグインの設定

まず、管理画面でWordPressプラグインをインストールする必要があります。その後、Facebook Feed » All Feeds に移動し、「新規追加」をクリックします。

次に、「タイムライン」フィードタイプを選択します。

次に、「次へ」ボタンをクリックするだけです。

この段階で、Facebook ページを WordPress ウェブサイトに接続する必要があります。

「新規追加」ボタンをクリックする必要があります。

Smash Balloon は新しい画面に移動します。

ここで、ソースタイプとして「ページ」を選択し、「Facebookに接続」をクリックしてください。

次に、Facebookアカウントにログインする必要があります。

その後、WordPressブログまたはウェブサイトのどのページにいいねボックスを表示したいかを選択します。次に、「次へ」をクリックします。

これで Smash Balloon の権限設定が表示されます。すべて有効にすることで、すべてが正常に機能することを確認することをお勧めします。

次に、「完了」をクリックします。

最後のポップアップで、Smash BalloonとFacebookが正常にリンクされたことが確認されます。

続行するには「OK」をクリックしてください。

Smash Balloonは管理エリアにリダイレクトされます。ここで、タイムラインフィードに使用するFacebookページを選択する必要があります。

ページを選択して「追加」をクリックするだけです。

これで、Smash Balloonプラグインのページにソースとして接続したFacebookページが表示されます。

それを選んで「次へ」をクリックするだけです。

Facebookいいねボックスをカスタマイズする

この段階で、Smash BalloonはFacebookフィードエディタに移動します。

最初の手順は、カラー スキーム オプションの上にある「フィード レイアウト」をクリックすることです。

「投稿数」セクションまで下にスクロールしてください。

その後、デスクトップとモバイルの両方の数値を0に設定します。これにより、最近の投稿の表示がすべて削除され、フィードには「いいね！ボックス」のみが表示されるようになります。

または、Facebookフィードをいいねボックスと同時に表示したい場合は、WordPressでカスタムFacebookフィードを作成する方法のチュートリアルに従ってください。

さて、上に戻ってください。

次に、「カスタマイズ」をクリックしてフィードエディターページに戻ります。

この段階で、Facebook フィードのヘッダーを削除できます。

「セクション」部分に移動し、「ヘッダー」を選択する必要があります。

このヘッダー設定は、Facebookフィードのヘッダーがどのように表示されるかを決定します。

しかし、この場合は非表示にする必要があるため、「有効にする」トグルをオフにするだけです。

メインフィードエディタページに戻り、「いいね！ボックス」設定を開きましょう。その後、「いいね！ボックス」機能をオンにするだけです。

このページでは、いいねボックスのサイズ、位置、カバー写真の表示、カスタム幅、カスタムコールトゥアクションテキストなどを調整することもできます。

完了したら、右上にある「保存」ボタンをクリックしてください。

WordPressのページまたは投稿にFacebook Like Boxを埋め込む

この段階で、Facebookいいねボックスをページまたはサイドバーのようなウィジェット対応エリアに表示できます。

これを行うには、右上隅の「埋め込み」をクリックします。次に、埋め込みフィードポップアップが表示され、いいね！ボックスを表示するための2つのオプションが提供されます。

1つはショートコードを使用する方法、もう1つは直接ページまたはウィジェット対応エリアに追加する方法です。2番目のオプションの方がはるかに簡単なので、まずその方法を示します。

特定のページにいいね！ボックスを追加したい場合は、「ページに追加」ボタンをクリックします。

次に、機能を追加したいページを選択して「追加」をクリックします。

これで、Gutenbergブロックエディターに到着します。

Smash Balloonの指示通り、「+ブロックを追加」ボタンをクリックしてください。

ブロックインサーターライブラリが開いたら、Facebookフィードブロックを見つける必要があります。

次に、ページ上のどこに配置するのが最適か、ドラッグアンドドロップするだけです。

ブロックで、先ほど作成した「いいね！ボックス」付きのFacebookフィードを選択します。

ブロックにいいねボックスが表示されます。

しかし、複数のFacebookページがあり、Smash Balloonを使用してそれぞれにいいねボックスを設定している場合はどうなりますか？

ブロック設定サイドバーの「フィードを選択」ドロップダウンメニューからフィードを選択して切り替えることもできます。

これで、変更を正式なものにするために「更新」ボタンをクリックするだけです。

デモサイトでのいいねボックスの外観は次のとおりです。

ブロックWordPressテーマを使用している場合は、フルサイトエディターを使用して、テーマのページテンプレートにFacebook Like Boxブロックを追加することもできます。

フルサイトエディターの詳細については、フルサイト編集の初心者向けガイドをお読みください。

WordPressにFacebook Like Boxウィジェットを埋め込む

クラシックなWordPress テーマを使用している場合、Facebook のいいねボックスをサイドバー、ヘッダー、またはフッターなどのウィジェット対応エリアに表示したい場合があります。これは、いいねボックスを、ページ上のメインコンテンツからユーザーの注意をそらすことなく表示するのに最適な方法です。

埋め込みフィードポップアップで、「ウィジェットに追加」を選択してブロックベースのウィジェットエディターに移動します。

次に、前の方法と同様に、「+ブロックを追加」ボタンをクリックし、Facebookフィードブロックを見つけて、目的の領域にドラッグします。

デモサイトでは、WordPress のサイドバーウィジェットとして「いいね！」ボックスを使用したいと考えています。

ブロックで、以前に作成したLike Boxを持つFacebookフィードを選択します。

次に、「更新」をクリックして変更をライブにします。

これで完了です！

いいねボックスウィジェットをテストサイトのサイドバーに追加すると、このようになります。

ショートコードでFacebook Like Boxウィジェットを埋め込む

上記の2つの方法がうまくいかない場合は、ショートコードを使用してFacebookいいねボックスまたはファンボックスを追加することをお勧めします。

前の「フィードの埋め込み」ポップアップからショートコードをコピーし、ウェブサイトのどこにでも追加するだけです。

ショートコードの使用方法の詳細については、WordPress でショートコードを追加する方法に関するガイドをお読みください。

方法2：コードでFacebookいいねボックスを追加する

Facebookフィード以外のものを表示せずにFacebookファンボックスまたはいいねボックスを表示することにのみ興味がある場合は、Facebookページプラグインを使用するのはやりすぎのように思えるかもしれません。この場合、代わりにコードを使用していいねボックスを追加できます。

この方法は初心者には難しく感じるかもしれませんが、WPCode を使用してコードを挿入する確実な方法をご紹介します。これは、サイトを壊すことなくカスタムコードスニペットを WordPress に簡単に追加できる WordPress プラグインです。

このガイドでは、無料版の WPCodeで十分ですが、テストモードやクラウドベースのコードスニペットライブラリのような高度な機能のためにPro版にアップグレードすることもできます。

まず、WordPressにプラグインをインストールしましょう。有効化したら、Code Snippets » + Add Snippetに移動します。次に、「Add Your Custom Code (New Snippet)」を選択し、「+ Add Custom Snippet」をクリックします。

これでコードエディタに移動します。まず、カスタムコードスニペットに名前を付けて、後で簡単に見つけられるようにしましょう。今回は、「Facebook JavaScript SDK」という名前を付けます。なぜなら、それこそを追加するからです。

このタブを開いたまま、ブラウザで新しいタブを作成し、Facebook Developers ページにアクセスしてください。

メニューで「ログイン」をクリックして、Facebook アカウントにサインインします。

このページに初めてアクセスする場合は、オンボーディングウィザードを完了して無料アカウントを作成してください。

次に、Facebook Developersダッシュボードに移動します。「アプリを作成」ボタンをクリックしましょう。

次のページで、ユースケースとして「その他」を選択するだけです。

その後、「次へ」ボタンをクリックします。

これで、Facebookページで作成できるさまざまなアプリが表示されます。

いいねボックスを作成するには、「ビジネス」を選択して「次へ」をクリックするだけです。

次に、アプリに名前を付けましょう。これは参照用なので、好きな名前で構いません。また、メールアドレスを入力し、オプションでビジネスアカウントを選択することもできます。

最後に、「アプリを作成」をクリックします。

それでは、ソーシャルプラグイン用のFacebook開発者ページに移動しましょう。

次に、下のスクリーンショットのようなセクションが見つかるまで下にスクロールします。

ここで、FacebookページのURLを入力し、「タブ」フィールドを空にし、必要に応じていいねボックスの幅と高さを指定してください。

ヘッダーを小さくしたり、カバー写真を無効にしたりすることもできます。また、いいねボックスをコンテナの幅に合わせて調整し、ウェブサイトの配置場所に応じてサイズがレスポンシブに調整されるようにしました。

完了したら、「コードを取得」ボタンをクリックします。すると、JavaScript SDKとiFrameの2種類のコードスニペットが表示されるポップアップが表示されます。どちらもLike Boxを表示しますが、一般的にJavaScript SDKの方がはるかに良いオプションです。

JavaScript SDKは、ウェブページに直接埋め込まれ、メインのドキュメントの一部として読み込まれるため、通常はより高速です。iFrameは、完全なHTMLドキュメントを読み込む必要があり、それがページの読み込み時間を遅くする可能性があります。

JavaScript SDKタブで、先ほど作成したアプリ名が選択されていることを確認してください。

次に、ステップ2からJavaScript SDK APIコードをコピーします。このタブを開いたまま、WPCodeタブに切り替えて、そこにコードを貼り付けます。

コードタイプは「HTMLスニペット」のままにしておけます。

次に、「挿入」セクションまで下にスクロールします。

挿入方法は「自動挿入」のままにし、場所を「サイト全体本文」に変更してください。

最後に、コードをアクティブにして「スニペットを保存」をクリックします。

次に、2 番目のコード スニペットを作成します。以前と同じ手順に従い、「Facebook いいねボックス」のような名前を付けることができます。

その後、先ほどのソーシャルプラグインのFacebook開発者ページに切り替え、ステップ3のコードをコピーします。

再度WPCodeタブに移動し、ステップ3のコードをコードプレビューボックスに貼り付けます。コードタイプは「HTMLスニペット」にできます。

「挿入」セクションまでスクロールしましょう。

「自動挿入」を使用すると、いいねボックスを、場所カテゴリに適合する複数の場所に自動的に表示させることができます。

この例では、「サイト全体フッター」の場所を選択することにしました。これは、いいねボックスがフッターに表示されることを意味します。

WordPress のブログ投稿のすべてにいいねボックスを表示するために、投稿の前に挿入するなどの他のオプションもあります。

一方、「ショートコード」メソッドを使用すると、カスタムショートコードを作成できます。

次に、ショートコードブロックを使用して、ウェブサイトの特定の場所にそれを追加できます。

挿入設定を構成したら、コードをアクティブにして「スニペットを保存」をクリックするだけです。

これで完了です！その後、ウェブサイトにアクセスして、いいねボックスがどのように見えるかを確認できます。

WordPressサイトにソーシャルフィードを表示するためのその他のガイドについては、WordPressにソーシャルメディアフィードを追加する方法（ステップバイステップ）に関する記事をご覧ください。

ボーナス：WordPressとFacebookを統合するその他の方法

Facebook連携をさらに強化したいですか？これらの追加ガイドをご覧ください。

• WordPressでFacebookのいいねボックスポップアップを作成する方法 – 戦略的にタイミングを合わせたいいねボックスポップアップでエンゲージメントを高めましょう。
• WordPressにFacebookのステータス投稿を埋め込む方法 – 特定のFacebookの更新情報をサイトに直接共有します。
• WordPress で Facebook グループフィードを埋め込む方法 – コミュニティのディスカッションをウェブサイトに表示します。
• WordPressでFacebookページのレビューを表示する方法 – Facebookからの顧客レビューでソーシャルプルーフを提示します。
• WordPressを使用してFacebookの「いいね！」を増やすための簡単な5つの方法 – これらの戦略を実装して、Facebookのフォロワーを増やしましょう。
• プロフィールページに著者のTwitterとFacebookを表示する方法 – 読者をソーシャルメディアで寄稿者とつなぎましょう。
• WordPressの投稿にFacebookのいいね！リアクションを追加する方法 – Facebookの人気リアクション機能をブログ投稿にもたらします。
• WordPressでFacebook広告ランディングページを作成する方法 – Facebook広告キャンペーン向けのコンバージョン率の高いランディングページをデザインします。
• WordPressからFacebookへ自動投稿する方法 – 自動投稿でソーシャルメディア戦略を効率化しましょう。

この記事が、WordPressにFacebookのいいね！ボックスまたはファンボックスを追加する方法を学ぶのに役立ったことを願っています。また、究極のソーシャルメディアチートシートと、WordPress向けの最高のソーシャルメディアプラグインのリストも確認したいかもしれません。

この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。