WordPressでFacebookの「いいね！」ボックス/ファンボックスを追加する方法

WordPressサイトにFacebookの「いいね！」ボックスを追加したいですか？

サイトにFacebookの「いいね！」ボックスを追加することで、オーディエンスが簡単にあなたのFacebookページに「いいね！」を押したり、フォローしたりできるようになります。いいね！」が増えれば増えるほど、あなたのブランドは新しいユーザーにとってより評判が良く、信頼できるものになります。

この投稿では、WordPressにFacebookの「いいね！」ボックスを追加する方法を紹介します。

なぜWordPressサイトにFacebookの「いいね！」ボックスを追加するのか？

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

まず、Facebookのファンページやビジネスページに簡単に「いいね！」を押してもらうことができます。これは、あなたの投稿が彼らのFacebookのフィードに表示されることを意味し、あなたはあなたのウェブサイトを越えて人々に到達し続けることができます。

また、Facebookページの「いいね！」ボックスには、何人があなたのFacebookページに「いいね！」を押したかが表示されます。これは社会的証明として機能し、より多くの訪問者に「いいね！」をクリックしてもらうことができます。

このチュートリアルでは、Facebookの「いいね！」ボックスを追加する2つの方法を紹介します：ひとつはソーシャルプラグインを使う方法、もうひとつはコードを使う方法です。以下のクイックリンクを使って、投稿をナビゲートすることができます：

方法1：プラグインを使ってFacebookの「いいね！」ボックスを追加する（簡単）

この最初の方法は、初心者が自分のサイトにFacebookの「いいね！」ボックスを追加する最も簡単でお勧めの方法です。また、Facebookのフィードをサイトに表示することもできます。

Smash BalloonはユーザーフレンドリーなWordPressプラグインで、WordPressに様々なソーシャルメディアのフィードを埋め込むことができる。

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

Smash Balloon Facebook Feedプラグインの設定

まず、管理エリアにWordPressプラグインをインストールする必要がある。その後、Facebook Feed ” All Feedsに 行き、’Add New’をクリックする。

ここで、「タイムライン」のフィードタイプを選択する。

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

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

新規追加』ボタンをクリックします。

Smash Balloonで新しい画面が表示されます。

ここでは、ソースの種類に「ページ」を選択し、「Facebookに接続」をクリックするだけだ。

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

その後、WordPressブログやサイトに「いいね！」ボックスを表示させたいページを選択します。そして、「次へ」をクリックします。

Smash Balloonの権限設定が表示されます。すべてを有効化して、うまく動作するようにすることをお勧めします。

では、『完了』をクリックしてください。

最後のポップアップでは、Smash BalloonとFacebookの連携が完了したことを確認します。

OK」をクリックして続行します。

Smash Balloonの管理エリアに移動し、タイムラインフィードで使用するFacebookページを選択します。

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

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

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

Facebookの「いいね！」ボックスのカスタマイズ

この段階で、Smash BalloonはあなたをFacebookのフィードエディターに連れて行きます。

最初のステップは、配色オプションの上にある「フィードレイアウト」をクリックすることです。

投稿数」セクションまでスクロールするだけです。

これで、最近の投稿がすべて表示されなくなり、「いいね！」ボックスだけがフィードに表示されるようになります。

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

さあ、上に戻るんだ。

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

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

必要なのは、「セクション」の部分まで移動し、「ヘッダー」を選択することだ。

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

しかし、この場合は非表示にする必要があるので、『有効化』トグルをオフにするだけでよい。

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

このページでは、いいね！ボックスのサイズ、位置、カバー写真の表示、カスタム幅、カスタムCall-to-Actionテキストなどを調整することもできます。

それが終わったら、右上の「保存」ボタンを押すだけだ。

WordPressのページや投稿にFacebookの「いいね！」ボックスを埋め込む

この段階で、Facebookいいね！ボックスをページやサイドバーなどのウィジェット対応エリアに表示することができます。

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

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

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

あとは、機能を追加するページを選択し、「追加」をクリックするだけです。

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

Smash Balloonの指示に従い、「＋ブロックを追加」ボタンをクリックする。

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

あとは、ページ上の最適な場所にドラッグ＆ドロップするだけ。

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

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

しかし、複数のFacebookページを持っていて、Smash Balloonを使ってそれぞれのページに「いいね！」ボックスを設定している場合はどうでしょうか？

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

あとは、「更新」ボタンをクリックするだけで、変更が正式に反映されます。

デモサイトでの「いいね！」ボックスはこんな感じです：

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

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

WordPressにFacebookの「いいね！」ボックスウィジェットを埋め込む

クラシックなWordPressテーマを使っている場合、サイドバーやヘッダー、フッターなどのウィジェット対応エリアにFacebookの「いいね！」ボックスを表示したいかもしれません。ページのメインコンテンツからユーザーを引き離すことなく、いいね！ボックスを表示することができます。

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

先ほどの方法と同じように、「＋ブロックを追加」ボタンをクリックし、Facebookフィードブロックを見つけて、希望のエリアにドラッグするだけです。

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

ブロックの中で、先ほど作成した「いいね！」ボックスのあるFacebook Feedを選択します。

その後、「更新」をクリックして変更を有効にします。

それで終わりだ！

テストサイトのサイドバーに「いいね！ボックス」ウィジェットを設置すると、こんな感じになります：

Facebookの「いいね！」ボックスウィジェットをショートコードで埋め込む

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

先ほどの「フィードを埋め込む」ポップアップからショートコードをコピーし、あなたのサイトの任意の場所に追加するだけです。

ショートコードの使い方については、WordPressでショートコードを追加する方法をご覧ください。

方法2：コードを使ってFacebookの「いいね！」ボックスを追加する

他のFacebookフィードを追加せずに、いいね！ボックスだけを表示したい場合、Facebookページのプラグインを使うのはやりすぎと思われるかもしれません。この場合、コードを使って「いいね！」ボックスを追加することができます。

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

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

まず、WordPressにプラグインをインストールしよう。有効化したら、Code Snippets ” + Add Snippetにアクセスする。そして、「Add Your Custom Code (New Snippet)」を選択し、「Use snippet」をクリックします。

コードエディターに到着します。カスタム・コード・スニペットを後で簡単に識別できるように、まず名前をつけましょう。ここでは、’Facebook JavaScript SDK’という名前にします。

このタブを開いたまま、ブラウザーに新しいタブを作成し、Facebook開発者ページにアクセスします。

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

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

Facebook Developersのダッシュボードが表示されます。アプリを作成」ボタンをクリックしましょう。

次のページでは、ユースケースに「その他」を選択します。

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

Facebookページ用に作成できるさまざまなアプリがすべて表示されます。

ライクボックスを作成するには、「ビジネス」を選択し、「次へ」をクリックすればよい。

アプリの名前をつけましょう。これは単なる参考なので、何でもかまいません。メールアドレスを入力し、オプションでビジネスアカウントを設定することもできます。

最後に「アプリを作成」をクリックする。

それでは、ソーシャルプラグインのFacebook開発者ページにアクセスしてみよう。

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

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

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

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

JavaScript SDKは通常、ウェブページに直接埋め込まれ、メインドキュメントの一部として読み込むことができるため、より高速です。

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

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

コードタイプは「HTMLスニペット」のままでよい。

次に、「インサーター」セクションまでスクロールダウンする。

挿入方法」は「自動挿入」のままでよいが、「場所」は「サイト全体の本文」に変更する。

最後に、コードを有効化して「スニペットを保存」をクリックするだけだ。

次に、2つ目のコード・スニペットを作成します。先ほどと同じ手順で、’Facebook Like Box’のような名前にします。

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

再びWPCodeタブにナビゲーションし、コード・プレビュー・ボックスにステップ3のコードを貼り付けます。コードタイプは「HTMLスニペット」でもよい。

インサーター」セクションまでスクロールダウンしてみよう。

オートインサート」を使えば、「場所」のカテゴリーに合った複数の場所に、自動的に「いいね！」ボックスを表示させることができます。

この例では、「サイト全体のフッター」を選択し、「いいね！」ボックスがフッターに表示されるようにしています。

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

一方、「ショートコード」メソッドでは、カスタムのショートコードを作成することができる。

その後、ショートコードブロックを使ってサイトの特定の部分に追加することができます。

インサーター設定を有効化したら、コードをアクティブにして「スニペットを保存」をクリックするだけです。

これだけです！あなたのサイトにアクセスして、Like Boxがどのように見えるか見てみましょう：

WordPressサイトにソーシャルフィードを表示するガイドについては、WordPressにソーシャルメディアフィードを追加する投稿をご覧ください。

この投稿が、WordPressにFacebookの「いいね！」ボックスやファンボックスを追加する方法を学ぶのにお役に立てば幸いです。また、究極のソーシャルメディア・チートシートや WordPressに最適なソーシャルメディア・プラグインのリストもご覧ください。

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.