WordPressにFacebookの投稿を埋め込む5分間ガイド(ステップバイステップ)
ホーム ブログ WordPressにFacebookの投稿を埋め込む5分間ガイド(ステップバイステップ)

WordPressにFacebookの投稿を埋め込む5分間ガイド(ステップバイステップ)

WordPressのウェブサイトにFacebookの投稿を簡単に追加する方法をお探しですか?

あなたは、フェイスブックのエンゲージメントを高めるために懸命に働いてきました。これらの「いいね!」、コメント、シェアは、あなたのオーディエンスとの真のつながりを表しています。

では、その社会的証明をウェブサイトでも活用してはどうだろうか。

WordPressサイトを長年扱ってきた中で、ソーシャルコンテンツのクロスプロモーションは、オンライン全体の存在感を高める最も効果的な方法のひとつであることを学びました。

WordPressにFacebookの投稿を追加することで、より多くのフォロワーを獲得し、会話を弾ませ、さらには売上を伸ばすことができる。

Facebookの投稿を埋め込むのは、複雑で、技術的で、もしかしたら少し気が引けるかもしれない。

WordPressにFacebookの投稿を追加するのは、実は驚くほど簡単なのだ。

今日は、私が学んだ、最も手っ取り早く、最も効果的な方法-スマッシュバルーンでもユーザーに推奨している方法-をご紹介します。

このガイドでは、WordPressサイトにタイムラインフィードを追加してFacebookの投稿を埋め込む方法を具体的に紹介します。

このステップ・バイ・ステップのチュートリアルに従えば、技術に詳しくなくても、たった5つの簡単なステップでFacebookフィードを立ち上げることができる。

この記事で

WordPressにFacebookの投稿を埋め込む2つの方法

解決策に入る前に、2つの主なアプローチを説明しよう:

私は、多くのウェブサイトのオーナーがこの方法を試しているのを見てきました。その内容は以下の通りだ:

  • Facebookの投稿ごとに埋め込みコードを手動でコピーする
  • FacebookとWordPressを行ったり来たり
  • カスタマイズのための複雑なコードスニペットを扱う
  • 誤ったコードでサイトを壊すリスク
  • 万一の場合の専用サポートなし

正直に言おう。この方法は無料だが、信じられないほど時間がかかり、リスクが高い。小さなコーディングミスがひとつでもあれば、ページ全体が壊れてしまうかもしれない。

さらに、フェイスブックが埋め込みコードを更新すると(定期的に行われる)、すべてを手動で更新する必要がある。何度も何度も。

一方、Facebookの投稿をWordPressに自動的に追加するのはとても簡単だ。

WordPressのソーシャルメディア・プラグインをインストールし、Facebookアカウントに接続するだけで、ソーシャルメディア・プラグインがあなたのために一生懸命仕事をしてくれる。

WordPress用の最高のFacebookフィードプラグイン「Smash Balloon Facebook Feed Pro」を使えば、すべてが簡単になります。

Facebook Feed Proを使えば、コーディング不要でFacebookの投稿フィードを作成、カスタマイズし、ウェブサイトに表示できます。

さらに、Facebook Feed ProはどんなWordPressウェブサイトとも相性抜群です。シンプルでわかりやすいオプションを使って、ほんの数分で好きなページにFacebookの投稿を追加することができます。

Facebook Feed Proには、Facebookの投稿をウェブサイトに効果的に表示するための機能もたくさんあります。ハイライトをいくつかご紹介します:

  • 超高速セットアップ:Facebook Feed Proのセットアップは驚くほどスピーディーです。つまり、5分以内にFacebookの投稿を埋め込むことができ、コーディングのスキルも必要ありません。
  • Facebookの投稿を埋め込む:Facebook Feed Proは投稿を埋め込むだけではありません。Facebookフィード全体、ビデオ、Facebookイベント、アルバム、Facebookライブストリームまで、すべて同じプラグインで表示できます!
  • ウェブサイトにマッチ:埋め込んだFacebookの投稿は、自動的にあなたのウェブサイトのデザインにぴったり合うように表示されます。
  • どこでも使えるFacebook投稿:このFacebook WordPressプラグインは、埋め込み投稿がすべてのデバイスで美しく見えるようにします。携帯電話、タブレット、パソコンで見栄えが良く、完璧に動作するので、誰でも見ることができます。

このFacebookフィード用トップクラスのプラグインで特に気に入っているのは、視覚的なフィードカスタマイザーです。技術に詳しくない私にとっては特に助かります。

数回クリックするだけで、埋め込み投稿の見栄えや表示されるコンテンツを正確にコントロールすることができます。

さらに良いことに、万が一ヘルプが必要な場合は、Facebook Feed Proの専任サポートチームがいつでもプロセスのあらゆる段階で喜んでお手伝いいたします。

多くの人がFacebook Feed Proを使っており、星4.9/5という素晴らしい評価を受けています。WordPressにソーシャルメディアのフィードを追加するために175万以上のウェブサイトで使用され、愛されているSmash Balloonのプラグインです。

WordPressのウェブサイトにFacebookの投稿を埋め込む準備はできましたか?

今すぐFacebook Feed Proを始めましょう

WordPressにFacebookの投稿を追加する(簡単)

これらを念頭に置いて、あなたのWordPressウェブサイトにFacebookの投稿を簡単に追加する方法について、ステップバイステップのチュートリアルを以下に説明しましょう。

ステップ1:Facebook Feed Proプラグインをインストールする

まずは、Facebook Feed Proプラグインを入手しましょう。

プラグインをコンピューターにダウンロードするだけです。次に、WordPressウェブサイトにインストールして有効化します。

プラグインに詳しくない方もご安心ください。WordPressプラグインのインストール方法については、こちらのステップバイステップのチュートリアルを参考にしてください。

ステップ2:新しいFacebook投稿フィードを作成する

Facebookの投稿をWordPressに追加するには、まずFacebookのフィードを作成する必要があります。

これを行うには、WordPressのダッシュボードを使用し、Facebookフィード " すべてのフィード メニューに移動します。

それをクリックすると新しいページが開きます。そこで上部にある「 新規 追加」ボタンをクリックします。

カスタムfacebookフィードプロで新しいフィードを追加

その後、作成したいFacebookフィードのタイプを選択するポップアップが表示されます。

タイムラインフィード、レビューフィード、ビデオフィード、イベントフィード、写真フィードアルバムフィードなど、表示したいFacebookの投稿の種類に応じて9つのオプションがある。

オプションからフィードの種類を選び、「次へ」 ボタンをクリックしてください。

すべてのフェイスブック・フィード・タイプ

これはWordPressにFacebookの投稿を追加するためのチュートリアルなので、次のように選択しました。 タイムラインフィードを選択しました。

facebookフィードタイプを選択

これで、Facebookのタイムラインからの投稿を表示する新しいFacebookフィードができました。

次のステップに進み、Facebookアカウントに接続することができます。

ステップ3:投稿フィードをFacebookページに接続する

WordPressサイトにFacebookの投稿を表示するには、新しいフィードをFacebookページに接続する必要があります。

新規追加 ボタンをクリックして、フィードの接続を開始します。

facebookフィードに新しいソースを追加

次のページでは、アカウントを手動で接続するか、通常の方法で接続するかを選択できます。私は物事をシンプルにしたいので、Facebookに接続する ボタンをクリックしてみましょう。

次に、フェイスブックにリダイレクトされ、プラグインがあなたのフェイスブックのコンテンツや情報を閲覧する許可を求めます。

ご心配なく。プラグインは実際には何も変更できないので、安全です。Smash Balloonプラグインは安全です

では、ここで「続ける」ボタンをクリックしてください。

Continueボタンをクリックすると、WordPressウェブサイトに戻ります。

ソースとして使用したいFacebookページを選択し、 Addをクリックします。

新しいソース確認の追加

その後、「次へ」をクリックすれば、新しいフィードのFacebookへの接続は完了です。

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

素晴らしい仕事だ!あなたが接続したFacebookページは、あなたのウェブサイトに表示されるFacebook投稿のソースとなります。

次のステップでは、WordPressサイト上でのFacebookの投稿の見え方をカスタマイズすることができます。

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

これで、新しいFacebookフィードがビジュアルフィードカスタマイザーに表示され、そこでカスタマイズできるようになります。

カスタム・フェイスブック・フィード・プロ・ライブ・エディター

左側のパネルで、Facebook投稿の見た目を変更するすべてのオプションを確認できる。

そこでは、投稿レイアウト、フィードレイアウト、カラースキーム、ヘッダースタイル、いいね!ボックススタイル、Facebookフィードテーマなどを設定できる。

変更を加えるたびに、右側のライブプレビューでフィードの表示を確認できます。

カスタマイズを始めるには、まずフィードのレイアウトを調整したい。これを行うには、左側のフィードレイアウトオプションを クリックします。

facebookフィードのレイアウトを選択する

その後、フィード上のFacebookの投稿のレイアウトを選択することができます。ここで選べるオプションは4種類:リスト、グリッド、メイソンリーカルーセルです。

フェイスブックページのフィードのレイアウトを選択する

リストレイアウトを 使えば、Facebookの投稿を縦に並べて表示することができます。カラムが1つしかないので、各Facebook投稿を表示するスペースが広くなります。

facebookグループフィードのリストレイアウト

次に、Facebookの投稿が行と列で表示されるグリッド・レイアウトが ある。

通常これを選ぶのは、WordPressサイトにFacebookの写真をたくさん表示したり、複数のFacebook動画を同時に埋め込んだりするのに最適な方法だからです。

facebookフィードのグリッドレイアウト

Facebookの投稿を異なるカラムで表示したいですか?メーソンリーレイアウトならそれが可能です。

さらに、Facebookの投稿を元の比率で表示することもできる。

フェイスブック用メゾン・フィード・レイアウト

また、Facebookのカルーセルレイアウトオプションを使って、訪問者にサイトとインタラクションしてもらうこともできる。

ユーザーが自分のペースでFacebook投稿を確認できるよう、カルーセルスライダーを利用できます。ウェブサイトにFacebookリールを埋め込む際には、通常このレイアウトを採用しています。

facebookグループフィードのカルーセルフィードレイアウト

お好きなレイアウトを選択し、上部の「保存」 ボタンをクリックするだけです。

そうしたら、小さなカスタマイズ・ ボタンをクリックして、メインのカスタマイズ・メニューに戻ってください。

フェイスブックのカスタマイズオプションに戻る

次のステップは、左側の配色 オプションを選択することです。これを使うと、Facebookフィードのすべての色を変更することができます。

facebookフィードの配色を選択

カスタムFacebookフィードProでは、4種類のカラースキームがあります:

  • テーマから継承:Facebookの投稿にウェブサイトの色を使う
  • 明るく:投稿の背景を明るくし、テキストを暗くする。
  • Dark:暗い背景を明るい文字色で表示します。
  • カスタム:すべての色を自分で選ぶ
カスタムfacebookフィードプロの配色

配色を選択したら、忘れずに「保存」をクリックしてください。

このように、残りのカスタマイズオプションを使ってFacebookフィードのデザインを変更することができる。

ヘッダーのスタイル、ボックスのような投稿要素、フィードのマージン、背景、フィードのテーマなどを設定できます。

その後、一番上の「保存」 ボタンをクリックし、変更を保存します。そうしたら、いよいよステップ5に進み、Facebookの投稿フィードをWordPressに追加することができます。

ステップ5:Facebookの投稿フィードをWordPressに追加する

これで、新しいFacebookフィードをサイトに埋め込むことができます。Facebook Feed Proプラグインでは、2つの方法があります:

  • FacebookのフィードをWordPressのページに追加する
  • FacebookのフィードをWordPressのサイドバーに追加する

チェックしてみよう。

FacebookフィードをWordPressページに追加する

ライブフィードエディタを使って、あなたのページにFacebookのフィードを埋め込むのは簡単です。まず、右上の埋め込み ボタンをクリックします。

埋め込みボタンをクリック カスタムfacebookフィードプロ

Facebookの投稿フィードの場所を選択するポップアップが開きます。とりあえず、「ページに追加 」オプションをクリックして次に進みます。

フェイスブックのフィードをページに追加する

すると、ウェブサイトにあるすべてのWordPressページのリストが表示されます。必要なページを選択したら、「追加」をクリックします。

facebookフィードのページを選択

そうするとすぐに、プラグインがそのWordPressページを開いてくれる。

次に、WordPressページの上部にある小さなプラスアイコン(+)をクリックし、新しいブロックを追加します。

その後、オプションからカスタムFacebookフィード ブロックを選択する。

facebookカスタムフィードブロックを追加

公開をクリックして、Facebookの投稿フィードをWordPressに追加します。どのように見えるかは、ウェブサイトを開いて確認してください。

フェイスブックの投稿をワードプレスに追加

WordPressのサイドバーにFacebookのフィードを追加する

また、Facebookの投稿をFacebookウィジェットとしてWordPressのサイドバーに追加するのもとても簡単です。

ライブ・フィード・エディターからそれを行うことができます。まず、ダッシュボードからFacebookフィード " すべてのフィードメニューに移動します。

そこに、あなたのすべてのFacebookフィードを含むリストが表示されます。そのリストから、作成したばかりのFacebookフィードをクリックしてください。

フェイスブックのフィードを選択する

そうすると、もう一度ライブフィードエディターが開きます。続けるには、上部の埋め込み ボタンをクリックしてください。

埋め込みボタンをクリック カスタムfacebookフィードプロ

Facebookの投稿フィードの場所を選択するポップアップが開きます。ここでウィジェットに追加を 選択すれば、続行できます。

facebookフィードをウィジェットとして追加

今、プラグインは、あなたのウェブサイトのウィジェットページを 開きます.このページでは、WordPressのすべてのウィジェットを管理することができます。

Facebookの投稿をWordPressのサイドバーに追加するには、まずサイドバーパネルをクリックします。

ウィジェットのサイドバーを選択する

プラスアイコン(+)を クリックし、カスタムFacebookフィードウィジェットを 選択します。

カスタムfacebookフィードプロウィジェットを選択する

これで、Facebookの投稿フィードがサイドバーに追加されました。その結果、訪問者はあなたのサイト上でFacebookのコンテンツを見ることができます。

実際、あなたのサイトを今すぐ開いて、どのように見えるかチェックすることができる。

ワードプレスのサイドバーの例へのフェイスブックの投稿

それで、こうなった!

たった5つの簡単なステップで、WordPressのウェブサイトにFacebookの投稿を追加する方法がわかりました。クールなところは?技術に詳しくなくても、簡単にできるのです。

WordPressにFacebookの投稿を数クリックで追加する準備はできましたか?

今すぐFacebook Feed Proを始めましょう。

今すぐWordPressにFacebookの投稿フィードを追加しよう

WordPressサイトにFacebookの投稿を追加するのは複雑なことではありません。Facebook Feed Proを使えば、数時間ではなく数分でプロフェッショナルなソーシャルメディアフィードを立ち上げることができます。

次にお勧めするのはこれだ:

  1. Facebook Feed Proを手に入れよう!(14日間の返金保証付き)
  2. 上記のセットアップ手順に従ってください。
  3. 異なるデバイスでFacebookの投稿フィードをテストする

Facebookフィードの設定についてご質問がありますか?以下のコメント欄にご記入ください!

おまけのヒント ?

Facebookの投稿をWordPressサイトに埋め込むことに成功した今、Instagramを取り入れてソーシャルメディアコンテンツを拡大することに興味があるかもしれません。

インスタグラムをサイトに追加することで、エンゲージメントを高め、ビジュアルコンテンツをより多く紹介することができる。

なぜInstagramの投稿を埋め込むのか?

  • ビジュアルコンテンツは魅力的だ。私が自分のサイトにインスタグラムを追加したとき、インタラクションが急増した!
  • 新鮮で魅力的なコンテンツでウェブサイトを更新し続けることは、サイトのSEOに大きな効果をもたらし、検索エンジンのランキングを上げることができます。
  • Instagramの最新投稿を表示することで、好奇心旺盛な訪問者を忠実なフォロワーに変えることができます。

個人的には、Instagram Feed Proを使えば、数回クリックするだけで、自分のサイトにInstagramのコンテンツを表示できるのが気に入っている。

初めてインストールしたとき、インスタグラムのコンテンツが簡単に表示され、コーディングに頭を悩ませることなく魅力的で活気のあるサイトを維持できることに驚いた。

このシームレスなプロセスをより深く知りたい方は、Instagramの投稿をWordPressウェブサイトに埋め込む2つの方法をお読みください。

著者アバター
リアン・ラロヤ コンテンツマーケティングマネージャー
リアンヌはスマッシュバルーンでコンテンツマーケティングマネージャーを務め、WordPressコンテンツ、ソーシャルメディアマーケティング、ユーザー生成コンテンツ(UGC)、検索エンジン最適化(SEO)において12年以上の経験を持つ。

コメント13

  1. アライン・バルガス 5年前

    いいヒントだ!シェアしてくれてありがとう!

    返信
  2. マルシン 5年前

    あなたのプラグインのええスーパー興奮

    返信
  3. シルバー・ティード 5年前

    非常に役に立つ

    返信
  4. ティナ 5年前

    情報ありがとう

    返信
  5. エドワード 5年前

    うわぁ、面白いものがある

    返信
  6. デシオ・ミゲル・ドス・サントス・エンリケス 5年前

    素晴らしい情報、チャンスをありがとう🙂。

    返信
  7. リズ・キルチャー 5年前

    ありがとう!

    返信
  8. ロリ・W 5年前

    ありがとう。

    返信
  9. セリネス・フローレス 5年前

    このガイドはとても丁寧で分かりやすい。ありがとう!

    返信
  10. トーマス・P 5年前

    オートマチックとマニュアルのオプションがあるのもいい。

    返信
  11. ロン・ワインバーグ 5年前

    なぜだ!

    返信
  12. ウェブマスター ジョン 4年前

    フェイスブックの非公開グループでも使えますか?FBページからの抜粋をウェブサイトに送りたいのですが。理由コメント管理をFBのみにコントロールします。

    返信
    1. マヌエル・エスコバル 4年前

      やあ、ジョン、

      ご連絡ありがとうございます!お返事が遅くなり申し訳ございません。Facebookプラグインは非公開/クローズドグループで動作します。その他ご不明な点がございましたら、こちらのサポートフォームhttps://smashballoon.com/support/までお気軽にお問い合わせください。

      ありがとう! ᙂ。

      返信

コメントを追加する

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