FacebookウィジェットをWordPressに追加する方法（コーディングなし）

公開: 2020-07-28

FacebookページとそのコンテンツをWordPressWebサイトと統合するための最良の方法を探しているなら、あなたは正しい場所に来ました。 このガイドでは、FacebookウィジェットをWordPressに追加する方法を段階的に学習します。

このチュートリアルでは、FacebookのいいねボックスをWordPressのサイドバーに表示する方法、またはページや投稿に直接表示する方法を説明します。 この完全にユーザーフレンドリーな方法により、カスタマイズした埋め込みウィンドウを面倒なことなくFacebookページに簡単に追加できます。

Facebookウィジェットをサイトに追加するのはなぜですか？

ソーシャルメディアコンテンツとWebサイトの両方を成功させるには、それらを統合することをお勧めします。 たとえば、ソーシャルフィードプラグインを使用して、ソーシャルコンテンツをサイト上で整理された方法で直接共有することを検討できます。 さらに、特に製品やサービスをオンラインで販売している場合は、Webサイトとソーシャルメディアページの間でトラフィックを流すことをお勧めします。 Facebookフィード、タイムライン、または画像を表示するサイトのサイドバー上の小さなウィジェットは、さまざまな方法でメリットを生み出すことができます。 たとえば、Facebookページから今後のイベントや更新を表示して、ユーザーがWebサイトで直接表示できるようにすることができます。 さらに、オンラインストアをお持ちの場合は、WooCommerceをFacebook Shopと統合して、売り上げを伸ばすことができます。

Facebook Likeボックスは、有効にするのに最小限の労力で済む非常に柔軟なツールです。 ウィジェットは非常に軽量であるため、通常、読み込み時間は問題になりません。 ページや投稿など、WordPressサイトのどこにでも配置できる専用のショートコードを使用することもできます。

要約すると、Facebookのようなボックス/ウィジェットを使用して、次のことができます。

  • Facebookページのフィードを特定のオプションとともに表示して、イベント、メッセージ、またはタイムライン全体を表示します
  • 同様のボックスの寸法をカスタマイズするだけでなく、ウィジェットコンテナに自動調整します
  • タイムラインからの投稿の表示/非表示、ページカバーの非表示、さらには小さなヘッダーの表示
  • 追加のカスタマイズにはカスタムCSSを使用する

したがって、Facebookページを使用してWebサイトのソーシャルメディア統合を改善しようとしている場合は、Facebookウィジェットを使用することが利用可能な最良かつ最も簡単なオプションの1つです。

それでは、WordPressでFacebookウィジェットを使用するプロセスを確認してみましょう。

FacebookウィジェットをWordPressに追加する方法

このガイドでは、ソーシャルページフィードのウィジェットとも呼ばれるウィジェットのようなFacebookページを使用します。 これは、Facebookウィジェットをサイトに接続するための最良のプラグインの1つです。 他にも選択肢はありますが、シンプルで使いやすいのでお勧めします。

ただし、別のツールを選択する場合は、ショートコードにいくつかの変更を加えるだけで、このチュートリアルで説明する方法も役立つはずです。 その場合は、開始する前に、プラグインのドキュメント/ガイドを参照して詳細なガイダンスを確認できます。

それでは、FacebookウィジェットをWordPressに追加する方法を段階的に見ていきましょう。

Facebookウィジェットをインストールしてアクティブ化する

Facebookウィジェットのインストールプロセスから始めましょう。 まず、このデモで使用するWidget for Social PageFeedsプラグインをインストールします。 このツールは無料で、WordPressリポジトリに100,000以上のアクティブなインストールがあります。 プラグインをインストールするには：

  1. WordPressダッシュボードサイドバーを開き、[プラグイン]> [新規追加]をクリックします。
  2. 次に、右側の検索バーを使用して、ソーシャルページフィードのウィジェットを検索します。
  3. 右側のプラグインカードの横にある[インストール]ボタンをクリックします。
  4. プラグインがインストールされたら、[アクティブ化]ボタンを押すと、プラグインの準備が整います。

FacebookウィジェットをWordPressに追加-プラグインをインストール

Facebookウィジェットの使い方は？

フェイスブックウィジェットをワードプレスに追加-プラグイン画像

プラグインをインストールしたら、その使用方法を見てみましょう。 2つの方法があります：

  1. テーマによって提供されるウィジェットの場所でFacebookウィジェットを使用します
  2. あなたのページ/投稿にショートコードとしてそれを置いてください。

どちらのオプションも非常に簡単に実装できますが、Facebookウィジェットをサイドバーまたは他のそのようなウィジェットの場所に追加することを強くお勧めします。 ウィジェットはセットアップ、カスタマイズが簡単で、非常に軽量であるため、Facebookページを表示するための一定のボックスを用意することをお勧めします。

ただし、開始する前に、 FacebookページのURLを保存してボックスに表示する必要があります。 Facebookページを開き、ブラウザのアドレスバーからURLをコピーするだけです。 ページのURLを保存したので、次に進むことができます。

1）FBウィジェットをWordPressウィジェットの場所に追加します

FacebookウィジェットをWordPressテーマのウィジェットの場所に追加するには、[管理ダッシュボード] > [外観]> [ウィジェット]に移動します。

次に、左側の利用可能なウィジェットリストから[ウィジェットのようなFacebookページ]を選択します。 次に、ウィジェットを表示する場所を選択し、[ウィジェットの追加]をクリックします。

FacebookウィジェットをWordPressに追加-ウィジェットを追加

その後、ウィジェットが右側のサイドバーに表示されます。 そこで、ウィジェットのようなFacebookページをクリックすると、いくつかの追加の詳細をカスタマイズする必要があるため、Webサイトに適切に設定されます。

  • まず、サイトに合わせてタイトルを変更できます。
  • 次に、以前にコピーしたFacebookページのURLを対応するフィールドに追加します。
  • その後、[いいね]ボックスに表示するタブを選択します。 イベント、メッセージから選択するか、ページのタイムライン全体を表示することができます。
  • また、ページのタイムラインからの投稿の表示、カバー写真の非表示、[幅の設定]フィールドと[高さの設定]フィールドを使用したボックスのサイズのカスタマイズなど、追加のオプションをオン/オフにすることもできます。

Facebookウィジェットのカスタマイズが完了したら、[保存]ボタンをクリックすると、選択した場所にウィジェットが表示されます。

Facebookウィジェットをワードプレスに追加-ボックスプレビューのように

2）Facebookウィジェットを投稿/ページに挿入します

Facebookのようなボックスを投稿/ページに追加するには、プラグインの[fb_widget]ショートコードを使用する必要があります。 これを行うには、次のようにページ/投稿にショートコードを追加するだけです。

 [fb_widget fb_url = "https://www.facebook.com/quadlayers/"]

https://www.facebook.com/quadlayers/でFacebookページのURLを追加する必要があることに注意してください。

したがって、このショートコードをWebサイトに挿入する場合は、GutenbergエディターのShortcodeブロックを使用する必要があります。 [ブロックの追加]ボタンをクリックして、ショートコードウィジェットを検索するだけです。 次に、ショートコードウィジェットをクリックして、ページ/投稿に追加します。 その後、ショートコードを投稿の配置する部分にドラッグします。

Facebookウィジェットをワードプレスに追加-ブロックを追加

次に、FacebookのURLを使用してショートコードを追加します。

 [fb_widget fb_url =” https://www.facebook.com/quadlayers/”]

FacebookウィジェットをWordPressに追加-ウィジェットショートコードブロック

次に、投稿を保存/公開すると、FacebookウィジェットがWordPressに次のように表示されます。

プラグインの動作とショートコードパラメータをよりよく理解するには、プラグインのドキュメントとサポートを確認することをお勧めします。

結論

これで、専用プラグインを使用してFacebookウィジェットをWordPressに追加する方法に関するガイドは終わりです。 Facebookのようなボックスウィジェットを設定する準備ができていることを確認するために、次の手順を覚えておいてください。

  • プラグインをインストールしてアクティブ化する
  • FacebookページのURLを取得します
  • Facebookウィジェットをウィジェットの場所に追加してから、FacebookページのURLをウィジェットのURLフィールドに配置します
  • FacebookページのURLでショートコードを使用する

手順に従って問題が発生した場合は、コメントでお知らせください。喜んでサポートさせていただきます。 さらに、他にカバーしてほしい追加のガイドがあるかどうかを教えてください。 あなたの意見は私たちにとって世界を意味します。

最後に、Webサイトにソーシャルメディア要素を追加したい場合は、WordPress用のベストInstagramフィードプラグインに関するガイドを確認することをお勧めします。