Facebookのフィードをウェブサイトに無料で埋め込む方法
ホーム ブログ Facebookフィードをウェブサイトに無料で埋め込む方法

Facebookフィードをウェブサイトに無料で埋め込む方法

Facebookのフィードをウェブサイトに無料で埋め込む方法

お金をかけずに Facebook フィードをウェブサイトに表示する方法を知りたいですか?

Facebook フィードを埋め込むと、サイトがすぐに活気づいて、最新の更新情報が紹介され、訪問者が Facebook であなたとつながるように促すことができます。

さらに、ウェブサイトでフィードを紹介すると、ソーシャル投稿の視聴者が増えます。これは、Facebook のビジネス ページに対するオーガニック リーチが毎年減少し続けていることによるものです。

しかし、Facebook フィードを無料で追加する方法を理解するのは、特に WordPress の組み込みツールやコード スニペットが必ずしも初心者に優しいわけではないため、難しい場合があります。

自分のサイトに無料のFacebookフィードを設置しようとした時のことを覚えています。追加機能にお金をかけずに済む解決策を見つけるまで、何度も試行錯誤しました。

Smash Balloon では、何千もの WordPress サイト所有者が Facebook などのソーシャル フィードをシームレスに統合し、そのプロセスを誰でもスムーズにアクセスできるようにお手伝いしてきました。

この記事では、コーディング経験がまったくなくても、Facebook フィードを Web サイトに無料で埋め込む最も簡単な方法を説明します。

この記事で

ウェブサイトにFacebookフィードを埋め込む無料かつ簡単な方法

Smash Balloon Social Post Feedプラグインを使えば、簡単にFacebookのフィードをウェブサイトに埋め込むことができます。

市場で最高のFacebookフィードプラグインであるFacebook Feed Proの無料版なので、わずか数分でFacebookフィードを作成、カスタマイズ、埋め込むことができます。

3ステップのガイド・フローに従うだけで、コーディング不要の全プロセスが完了する。

スマッシュバルーン

さらに、Facebookフィードは自動的にあなたのウェブサイトのデザインをコピーし、ブランディングにフィットします。また、ライブカスタマイザーを使って簡単にフィードを編集することができます。

フィードタイプ、カラースキーム、ヘッダーデザイン、投稿スタイルなどをリアルタイムプレビューで簡単に変更できます。

ライブフィードエディタ

ソーシャル・ポスト・フィードには、Facebookのフィードのコピーを保存するスマート・キャッシュ機能も付いている。

そうすれば、あなたのウェブサイトは、毎回ゼロからFacebookのフィードを読み込む代わりに、単に保存されたコピーを表示することができます。

その結果、Facebookのフィードは超高速になり、ウェブサイトもSEOが向上する。

プレミアム・バージョンを購入する予算に余裕がない場合、ソーシャル・ポスト・フィードは、あなたのブランドのFacebookプレゼンスを高める素晴らしい方法です。

さらに多くの機能が必要ですか?

いつでも簡単にFacebook Feed Proにアップグレードすることができ、他にもたくさんの機能を利用することができます。以下、これらの機能を見てみましょう。

フェイスブック・フィード・プロ無料とプレミアム

市場で最高のFacebookフィードプラグインとして、Facebook Feed Proは、あなたのウェブサイトとFacebookを統合するのに役立つ、さらに素晴らしい機能が付属しています。

このプレミアムFacebookフィードプラグインを使用すると、次のことができます:

  • プロがデザインしたFacebookフィードテーマを使用する
  • 訪問者がFacebookのコンテンツをチェックし続けられるように、load moreボタンを表示する。
  • 投稿のレイアウトをサムネイル、半角、全角から選べる
  • Facebookのイベントカレンダーを作成し、ウェブサイトに埋め込む
  • モデレーション機能を使って、どのFacebookの投稿がウェブサイトに表示されるかをコントロールする。
  • Facebookの投稿の下に、いいね!、コメント、シェア、リアクションの数を表示する。
  • その他いろいろ

ご覧の通り、Facebook Feed Proプラグインでできることはたくさんあります。これらの素晴らしい機能により、合計25万人以上のアクティブユーザーから平均4.9/5つ星の評価を得ています。

魅力的なFacebookフィードを作成したいですか?今すぐFacebook Feed Proを手に入れましょう!

それではさっそく、このプラグインの無料版を使って、あなたのサイトにFacebookのフィードを作成する方法を見ていきましょう。

Facebookフィードをウェブサイトに無料で埋め込む方法

あなたのウェブサイトにFacebookのフィードを無料で埋め込む準備はできましたか?以下の手順に従ってください。

ステップ1:ソーシャル投稿フィード・プラグインをインストールする

まずは、WordPress.orgのリポジトリからSocial Post Feedプラグインをインストールしてください。

まず、WordPressのダッシュボードエリアからプラグイン " 新規追加 メニューに移動します。

新しいプラグインを追加する

そこから、WordPressウェブサイトのプラグインを追加、削除、更新することができます。

右上の検索バーで「smash balloon facebook feed」と検索してください。

その後、下の検索結果からプラグインを探し、「今すぐインストール」 ボタンをクリックする。

フェイスブックフィードプラグイン

そうすれば、WordPressは自動的にあなたのウェブサイトにプラグインをインストールします。

プラグインがインストールされるまで数秒待つと、ボタンが「有効化」ボタンに変わります。そのままクリックしてください。

スマッシュバルーンのソーシャルポストフィードプラグインを有効にする。

これで、WordPressウェブサイトにプラグインをインストールし、有効化しました。ステップ2では、プラグインのガイドに従って新しいフィードを作成します。

ステップ2:Facebookフィードを作成する

このプラグインの助けを借りて、あなたはわずか数回の簡単なクリックでFacebookのフィードを作成することができます。

まず、WordPressの管理画面からFacebookフィード " すべてのフィードメニューを開きます。

その後、上部にある大きな「新規追加」 ボタンをクリックする。

新しいfacebookフィードを作成する

そうすれば、このフィードをFacebookのタイムラインにつなげることができる。

しかし、WordPress用の最高のFacebookフィードプラグインであるFacebook Feed Proを使えば、タイムラインフィード、レビューフィード、ビデオフィード、写真フィード、アルバムフィードなど、9つのオプションから選ぶことができる。

続行するには、ここで「次へ」 ボタンをクリックします。

ガイドフローを使用して新しいFacebookフィードを作成しました。ステップ3では、このフィードをソースに接続します。

ステップ3:Facebookアカウントに接続する

次のステップは、FacebookアカウントをSocial Post Feedプラグインに接続することです。そうすることで、プラグインはあなたのサイトにFacebookのコンテンツを表示することができる。

アカウントに接続する準備はできましたか?まず、新規追加 ボタンをクリックしてください。

フェイスブック・フィード・プロにソースを追加

次に、Facebookフィードのソースを選択します。ウェブサイトに表示したいオプションを選択し、Facebookに接続をクリックするだけです。

フェイスブック・フィード・プロを使ってフェイスブックに接続

これをクリックすると、ブラウザでFacebookが開き、アカウントの接続が完了します。

それにはまず、接続したいFacebookページを選択し、「次へ」をクリックする。

フェイスブックのページを選択する

その後、Smash BalloonはあなたのFacebookアカウントへの読み取り専用 アクセスを要求します。

このアクセスは読み取り専用なので、プラグインはあなたのFacebookのコンテンツを見ることができるだけで、あなたのアカウントに変更を加えることはできません。

続行するには、ポップアップの「完了」 ボタンをクリックします。

facebookフィードプロへの読み取り専用アクセスを許可する

次に、プラグインはあなたのウェブサイトをもう一度開きますので、このFacebookページをソースとして確認することができます。

そのためには、一番下にある追加 ボタンをクリックします。

facebookフィードソースの確認

今後は、Facebookのフィードを作成する際に、ウェブサイトからこのソースを自動的に接続することができます。

ポップアップに表示される「Next」 ボタンをクリックして次に進みます。

フェイスブック・フィード・プロ

これで、Facebookのフィードが作成され、ページに接続されました。ステップ4に進んで、フィードの見栄えを変更することができます。

ステップ4:Facebookフィードをカスタマイズする

Facebookのフィードを簡単にカスタマイズできるように、このプラグインにはシンプルなライブフィードエディタが付属しています。

左側のカスタマイズパネルを使って、フィードのサイズ、配色、ヘッダーデザインなどを変更することができます。

そして右側には、Facebookフィードのリアルタイムプレビューが表示される。

ライブフィードエディタ

この例では、Facebookのフィードの色をカスタマイズする方法を見てみましょう。

左の配色 オプションをクリックするだけで始められます。

facebookフィードの配色オプション

簡単に色をカスタマイズできるように、4つの配色から選ぶことができる:

  • テーマからの継承: WordPressテーマの色を自動的にコピーする。
  • 明るい:暗いフォントとともに明るい背景を表示
  • Dark:明るい色のフォントとともに暗い背景を表示する。
  • カスタム: すべてのフィードの色を自分で選ぶ
facebookフィードの配色オプション

Facebookフィードに使用したい配色を選択し、「保存」をクリックして変更を確定します。

ご覧のように、このライブフィードエディタは、あなたのFacebookフィードを簡単にカスタマイズすることができます。フィードのサイズ、投稿数、ヘッダー、ボタンなどをカスタマイズすることができます。

最後に、フィードのデザインに満足したら、上部の保存ボタンをクリックします。

さらにカスタマイズのオプションをご希望ですか?

Facebook Feed Proでは、フィードレイアウト、投稿レイアウト、ライトボックスオプション、フィードテンプレートなど、より多くのカスタマイズオプションを利用できます。

ステップ5:Facebookフィードをウェブサイトに埋め込む

このプラグインを使えば、Facebookのフィードを無料でウェブサイトに埋め込むことができる。それには2つの方法があります。

  • ウェブサイトのページにFacebookのフィードを埋め込む
  • Facebookのフィードをウェブサイトのサイドバーやフッターに埋め込む。

以下、この2つの方法を見てみよう。

Facebookフィードをウェブサイトのページに埋め込む

あなたは先に行くと、このプラグインを使用して、ライブフィードエディタから直接フィードを埋め込むことができます。

まず、上部の埋め込み ボタンをクリックしてください。

フェイスブックのフィードを無料で埋め込む

Facebookのフィードの場所を選択するポップアップが開きます。

フェイスブックのコンテンツをウェブページに表示するには、「ページに追加 」ボタンをクリックします。

facebookフィードにページを追加する 無料

その後、プラグインはあなたのサイトのすべてのWordPressページのリストを表示します。

続けて、Facebookフィードを埋め込むページを選択し、「追加」をクリックします。

facebookフィード

WordPressのコンテンツブロックを使ってFacebookのフィードを埋め込むことができます。

まずは、プラス(+)アイコンをクリックして、新しいブロックを追加してください。

ワードプレスに新しいコンテンツブロックを追加する

次に、上部の検索フィールドで「facebook」を検索し、下の検索結果からカスタムFacebookフィードブロックをクリックします。

これで、あなたのウェブサイトにFacebookのフィードを手間なく埋め込むことができます。更新をクリックするだけで、フィードがオンラインになります。

これで、あなたのウェブサイトが訪問者にどのように見えるかを確認することができます。

フェイスブック・フィードの例

それでは、ウィジェット対応エリアにFacebookのフィードを埋め込む方法を見ていきましょう。

先ほどと同じように、ライブフィードエディタを使ってFacebookのフィードをウィジェットとして埋め込むことができる。

ライブフィードエディタをもう一度開きたい場合は、まずWordPressダッシュボードからFacebookフィード " すべてのフィードメニューに移動します。

次に、埋め込みたいFacebookのフィードをクリックします。

facebookのライブカスタマイザーでフィードを開く

ライブフィードエディターから、上部の埋め込み ボタンをクリックして続けます。

フェイスブックのフィードを無料で埋め込む

Facebookのフィードを埋め込む場所を尋ねるポップアップが表示されます。

とりあえず、「ウィジェットに追加」ボタンをクリックする。

ウィジェットに追加する facebookフィード 無料

プラグインは、あなたのウェブサイトのウィジェットページを開きますので、そこにFacebookフィードウィジェットを追加することができます。

サイドバーパネルを クリックしてください。

インスタグラムのライブフィードを埋め込むサイドバーパネルを開く

また、Facebookのフィードを埋め込みたい場合は、代わりにフッターパネルを クリックすることもできる。

ここではサイドバーを例に説明する。

フッターパネルを開き、インスタグラムのライブフィードを埋め込む

その後、新しいウィジェットを追加するには、下部にあるプラス(+)アイコ ンをクリックします。

最後に、カスタムFacebookフィードウィジェットをクリックして、Facebookフィードを埋め込むことができます。

フェイスブック・ソーシャルメディア・フィード・ウィジェット

更新をクリックすると、フェイスブックのフィードがオンラインになります。

ウェブサイトを開くと、サイドバーやフッターにこのように表示される:

サイドバーウィジェット

そうだ!

Facebookのフィードをウェブサイトに無料で埋め込む方法がわかりました。Smash Balloonのプラグインを使えば、数回クリックするだけで、コーディングは不要です。

また、多くのフィードタイプ、より多くのカスタマイズオプション、専任のカスタマーサポート、より多くの機能をお望みなら、Facebook Feed Proをご利用ください。

始める準備はできましたか?今すぐFacebook Feed Proを入手しましょう

フェイスブックでエンゲージメントを高める方法については、次の記事もご覧ください。

この記事を楽しんでいただけたなら、ツイッターや フェイスブックでソーシャルメディア・マーケティングのチュートリアルをもっとご覧ください。

著者アバター
サジャン・シャルマ シニアライター
WordPress、ソーシャルメディアマーケティング、オンラインビジネスについて10年以上執筆。専門分野はインフルエンサーマーケティング、コンテンツキュレーション、デジタルマーケティング戦略など多岐にわたる。

コメントを追加する

コメントをお寄せいただきありがとうございます。すべてのコメントはプライバシーポリシーに従って管理され、すべてのリンクはnofollowであることにご留意ください。名前欄にはキーワードを使用しないでください。個人的で有意義な会話をしましょう。