Facebookギャラリーをウェブサイトに埋め込む5つのステップ
ホーム ブログ Facebookギャラリーをウェブサイトに埋め込む5つのステップ

Facebookギャラリーをウェブサイトに埋め込む5つのステップ

Facebookギャラリーをウェブサイトに埋め込む方法

FacebookのフォトギャラリーをWordPressのウェブサイトで紹介したいですか?

Facebookからギャラリーを表示するお手伝いを始めたばかりの頃、Facebookの組み込み埋め込みツールや未加工のコードスニペットがいかに分かりにくいものであるかにすぐに気づきました。特に初心者にとっては。

コーディングに慣れていない場合、手作業は時間を浪費し、行き詰まりを感じさせる。

そのため、長年ビジネスオーナーと仕事をし、自分でもあらゆる方法を試した結果、今ではFacebookのギャラリーを素早く表示するための簡単で初心者に優しいWordPressプラグインを使っている:Smash BalloonのFacebook Feed Proです。

これを使えば、フェイスブックページからフォトアルバムを表示し、即座にプレビューして見栄えをデザインし、更新し続けることができる。すべて1行のコードも触らずに。

このクイックガイドでは、WordPressにFacebookギャラリーを埋め込む方法をステップバイステップでご紹介します。WordPressやウェブサイトが初めての方でも、数分でできるようになります。

この記事で

Facebookギャラリーのフィードをウェブサイトに手動で埋め込むべきか、それともプラグインを使って自動的に埋め込むのがよいでしょうか?

比較のために私が作成した表をご覧ください:

特徴スマッシュ・バルーンのFacebookフィード・プロを使う手動(プラグインなし)
セットアッププロセス数分で完了する簡単なプロセスです。 Facebook上でコードを生成し、それを手動でサイトに配置する必要がある。
テクニカル・スキル初心者から上級者まで、すべてのユーザーのために設計されています。100%コードフリーカスタマイズにはコーディングの知識が必要です。
リスクプラグインはすべてのコードを処理し、あなたのサイトをエラーから守ります。ソーシャルメディアフィードをウェブサイトに追加するための世界最大のブランドによって信頼されています! コードを直接貼り付けると、エラーが発生し、ウェブサイトが壊れてしまう可能性があります。
カスタマイズライブ・ビジュアル・フィード・エディターを使って、レイアウト、色、スペーシングなどを簡単にカスタマイズできます。 Facebookのデフォルトスタイルに制限され、あなたのブランドと一致しない場合があります。
特徴フォトアルバム、Facebookタイムライン、ビデオ、ライブストリーム、イベントカレンダー、レビューの埋め込みが可能。 👎 Facebookのアルバムや投稿の基本的な埋め込みのみをサポートします。
サポート✅ ワードプレスのエキスパートによるフレンドリーなチームをご利用いただけます。❌ 問題が起きたら、自分で解決しなければならない。
最終的な収穫Facebookギャラリーのフィードを簡単に埋め込みたいですか?Smash BalloonのFacebook Feed Proを今すぐチェック!サイトエラーの危険性があり、デザインを最小限にコントロールできる厳しいセットアップ

あなたのサイトにFacebookのギャラリーフィードを表示する最も簡単な方法について説明します。

[免責事項:私はSmash Balloonと仕事をしているので、当然、ソリューションとして私たちのプラグインを強調するつもりです。しかし、ソーシャルメディアマーケティングに関する私の専門的な経験に基づいて、私は純粋に、ほとんどのWordPressユーザーにとって最も簡単で効果的な方法だと信じています]。

Facebookギャラリーをウェブサイトに追加する最も簡単な方法は、Smash Balloon Facebook Feed Proを使用することです。

Facebook Feed Proを使えば、Facebookギャラリーの埋め込み、カスタマイズ、表示を手間なく行うことができます。WordPressを始めたばかりの方でも簡単に使えます。

スマッシュバルーンfacebookフィードプロプラグインを使用してウェブサイトにfacebookギャラリーを埋め込む

WordPressのための最高のFacebookフィードプラグインとして、Facebook Feed Proは、簡単にあなたのウェブサイトにFacebookのギャラリーを追加するのに役立つように設計されています。

これにより、あなたの写真を簡単に見せることができ、訪問者にとって興味深いサイトを維持することができます。コーディングの知識も必要ありません!私が気に入っているのはここです:

  • お好きなアルバムを表示Facebookのすべてのアルバムを一度に表示することも、1つのアルバムだけを表示することもできます。
  • コーディングスキルは必要ありません。コードに触れることなく、フォトギャラリーの作成、カスタマイズ、サイトへの追加が可能です。
  • すぐに見栄えが良くなります。Facebookギャラリーは、あなたのウェブサイトの色とフォントを自動的にコピーするので、あなたのブランドと完璧にマッチします。
  • ライブプレビューでカスタマイズ。簡単なビジュアルフィードエディタを使って、レイアウトや色などを変更できます。

もしあなたがそれほど技術に精通していなくても、心配する必要は全くない。このFacebookフィードのためのトップクラスのプラグインで私が特に評価しているのは、ビジュアルフィードカスタマイザーである。

数回クリックするだけで、ギャラリーの見栄えや表示する写真を正確にコントロールできます。

ライブフィードカスタマイザーを使えば、Facebookギャラリーのカスタマイズは簡単です。数回クリックするだけで、サイズ、間隔、色、Facebookフィードのテーマ、レイアウトなどを変更できるのが気に入っています。

Facebook Feed Proでもうひとつ便利だと思うのは、ライトボックス機能だ。

訪問者がアルバムをクリックすると、Facebookに転送されるのではなく、ウェブサイト上で写真が開くのが気に入っています。プロフェッショナルなフォトギャラリーを持つようなもので、サイトへの訪問者を飽きさせません。

さらに、Facebook Feed Proは、以下のFacebookフィードをサイトに埋め込むことができます:

最後に、Facebookギャラリーを埋め込む際に問題が発生した場合、あなたは幸運です。

Facebook Feed Proのカスタマーサポートチームは、WordPressのエキスパートで構成されています。メッセージでご連絡ください。

Smash Balloonプラグインは、ソーシャルメディアフィードをサイト上に表示するために、世界の大手ブランドから信頼されています。

結局のところ、100万人以上のユーザーと何千もの5つ星評価を得ているのだから、何か良いことをしているに違いないだろう?

わずか数クリックでFacebookのギャラリーをサイトに表示する準備はできましたか?今すぐFacebook Feed Proを始めましょう

それでは、Facebookギャラリーのフィードをウェブサイトに表示する手順を説明しましょう。この方法では、Facebook Feed Proを使ってFacebookのフォトギャラリーのフィードをウェブサイトに埋め込みます。

Facebook Feed Proは、私のフィードが自動的に私のウェブサイトのデザインと一致するようにし、私のアルバムに新しい写真をアップロードするたびに、私のFacebookギャラリーのフィードを更新し続けます。

ここでは、ギャラリーにあるFacebookの写真をウェブサイトに掲載する方法について、簡単なステップバイステップガイドをご紹介します:

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

最初のステップは、Facebook Feed Proプラグインを入手することです。プラグインをダウンロードしたら、WordPressサイトにアップロードしてインストールしてください。

やり方が分からなくても心配しないでください。詳しくはWordPressプラグインのインストールガイドをご覧ください。

プラグインをインストールして有効化したら、次のステップに進んでください。

ステップ2: 新しいFacebookギャラリーフィードを作成する

Facebook Feed Proをインストールして有効にしたら、Facebookギャラリーの新しいフィードを作成できます。

まず、WordPressのダッシュボードからFacebookフィード " すべてのフィード メニューを開き、新規追加ボタンをクリックします。

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

その後、フィードの種類を選択することができます。写真フィード、ビデオフィード、イベントフィード、レビューフィードなど9種類のオプションがあります。

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

Facebookのギャラリーでは、2種類のフィードから選ぶことができます:

  • アルバムフィード:Facebookページ上のすべてのフォトアルバムを掲載
  • シングルアルバムフィード: 単一のFacebookアルバムからすべての画像を表示

Facebookギャラリーのフィードタイプが決まったら、ステップ3に進み、Facebookに接続します。

次のステップは、新しいFacebookギャラリーをソース(あなたのFacebookページ)に接続することです。

前のステップで選んだフィードの種類によって、2つの方法があります:

  • アルバム・フィードをFacebookに接続する
  • 単一のアルバムフィードをFacebookに接続

では、この2つを両立させる方法を見てみよう。

アルバム・フィードをFacebookに接続する

まず、オプションからアルバム フィードの種類を選択し、「次へ」をクリックします。

facebookのアルバムフィードを追加

新規追加ボタンをクリックして、Facebookギャラリーのソースを追加します。

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

次のページで、Facebookに接続するボタンをクリックしてみましょう。

これで、Facebook Feed ProがFacebookに送信され、そこでプラグインに読み取り専用アクセス権を与えることができる。

このアクセス権を使うと、Facebookの投稿を読むことはできるが、何かを変更することはできない。

続行するには、必要なFacebookページを選択し、「次へ」をクリックします。

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

次に、" Continue " ボタンをクリックして、読み取り専用アクセス権の付与を完了します。

そうすると、WordPressサイトに戻ります。そして、新しいギャラリーのソースとしてFacebookページを確認することができます。

続行するには、Add ボタンをクリックします。

新しいソース確認の追加

次へ」を クリックして、Facebookギャラリーをソースに接続します。

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

こうして、あなたのFacebookギャラリーは次のステップに進む準備が整いました。

シングルアルバムのフィードをFacebookに接続する

もう一つのオプションは、Facebookのギャラリーにシングルアルバムフィードを 使用することです。

そのためには、WordPressダッシュボードからFacebookフィード " すべてのフィード メニューに移動します。

次に、新しいページで新規追加ボタンをクリックします。

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

その後、オプションからシングルアルバムフィードタイプを 選択し、「次へ」をクリックします。

シングルアルバムのフィードタイプを選択

Add New(新規追加)ボタンをクリックして、新しいソースを追加できます。

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

次のページで、Facebookに接続するボタンをクリックしてみましょう。

その後、プラグインがFacebookに送信します。続行するには、ここであなたのFacebookページを選択し、「次へ」をクリックしてください。

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

Continue(続行)ボタンをクリックして、アカウント接続を確定します。

その後、あなたのサイトに戻ります。続行するには、新しいポップアップの追加ボタンをクリックしてください。

新しいソース確認の追加

次へ」を クリックして、Facebookギャラリーのソースの追加を完了します。

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

そうしたら、埋め込みたいFacebookのアルバムを開きます。そして、一番上のURLをコピーする

フェイスブックのアルバムのURLをコピーする

その後、自分のサイトに戻ることができます。ポップアップでアルバムのURLまたはID フィールドを探し、そこにURLを貼り付けます

最後に「Next」 ボタンをクリックする。

facebookアルバムのURLを追加

これで、新しいFacebookギャラリーをソースに接続できました。次のステップはカスタマイズの開始です。

ギャラリーをFacebookに接続すると、ライブプレビュー付きのビジュアルフィードカスタマイザーでギャラリーが開きます。

左側には、カスタマイズオプションがあります。これらを使って、フィードの種類、レイアウト、ライクボックス、ヘッダーデザイン、投稿スタイル、配色などを変更することができます。

右側にライブプレビューもあります。あなたのFacebookギャラリーがあなたのサイトでどのように見えるかを明確に把握することができます。

フェイスブック用ライブフィードエディタ

Facebookギャラリーのカスタマイズを始めるために、私が通常最初にすることは、左側のフィードレイアウトオプションを選択することです。

私はフィードのレイアウトを最初にデザインするのが好きだが、このステップを飛ばして他のカスタマイズオプションを微調整することもできる!

facebookフィードのフィードレイアウトオプションを選択

次に、リスト、グリッド、メイソンリーカルーセルの4種類のレイアウトオプションから選択できます。

レイアウトオプション Facebookフィード

まず、フェイスブックのコンテンツを1列に並べて表示するリストレイアウトが あります。そのため、各項目がより見やすくなります。

リストレイアウト・フェイスブック・アルバム

次に、グリッド・レイアウトを使ってみてはどうだろう。こうすることで、一度にたくさんのアイテムを異なる行や列に表示することができる。これは私が個人サイトで使っている方法で、サイト訪問者が私のFacebookのアルバムを一度に見ることができる。

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

Facebookの投稿を元のプロポーションのままにしたいですか?その場合は、石積みのレイアウトを使ってみてください。

メゾン・レイアウト・フェイスブック・アルバム

また、美しいFacebookカルーセルスライダーでコンテンツを表示できるカルーセルレイアウトも あります。

カルーセル・フェイスブック・アルバム・フィード・レイアウト

お好きなレイアウトを選んで、保存ボタンをクリックしてください。

次に、カスタマイズ ボタンをクリックして、メインのカスタマイズオプションに戻ります。

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

Facebookギャラリーの色を編集できるようになりました。これを行うには、配色 オプションを選択します。

フェイスブック・フィードの配色オプション

Facebook Feed Proでは、4種類のカラースキームから選ぶことができます:

  • テーマから継承する:ウェブサイトの色をコピーする
  • 明るい:ダークな文字色で明るい印象を与える。
  • ダーク:ダークなルックと明るいフォントカラーを選ぶ。
  • カスタム:すべての色を自分で選ぶ
facebookアルバムフィードの配色

Facebookのギャラリーフィードが私のサイトのブランディングと一致するように、私は通常、テーマから継承 オプションを使用します。お好みの配色を選択し、保存ボタンをクリックしてください。

ご覧のように、ビジュアルフィードカスタマイザーを使ってFacebookギャラリーをカスタマイズするのはとても簡単です。数回クリックするだけで、ヘッダースタイル、投稿レイアウト、フィードサイズ、余白などを変更できます。

最後に、フィードのカスタマイズが完了したら、保存を クリックします。その後、Facebookギャラリーの埋め込みを開始できます。

Facebookギャラリーのカスタマイズが完了したら、次はあなたのウェブサイトに埋め込む番です。

それには2つの方法がある:

  • Facebookギャラリーをページに埋め込む
  • サイドバーやフッターにFacebookギャラリーを埋め込む

以下、この2つの方法について見ていこう:

ライブフィードエディタから、あなたのFacebookギャラリーの埋め込みを開始することができます。

まず、上部にある埋め込み ボタンをクリックします。

facebookエディタの埋め込みボタンをクリック

その後、フィードを埋め込む場所を尋ねる新しいポップアップが表示されます。続行するには、「ページに追加」オプションを選択します。

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

次に、サイト上のすべてのWordPressページのリストが表示されます。Facebookギャラリーを埋め込みたいページを選択し、追加 ボタンをクリックしてください。

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

すると、プラグインがそのページにあなたを送ります。Facebookギャラリーをここに埋め込むには、まずプラス(+) アイコンをクリックして新しいブロックを追加してください。

その後、カスタムFacebookフィード ブロックを見つけてクリックする。

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

これをクリックすると、あなたのFacebookギャラリーが自動的にあなたのページに埋め込まれます。ページタイトルは自由に編集してください。

そして、「Publish(公開) 」をクリックして、ウェブサイト上で公開します。

これでサイトを開いてチェックできる!

facebookアルバムフィードの例

訪問者がアルバムをクリックすると、ライトボックスのポップアップが表示され、サイト上のすべての写真が表示されます。

facebookアルバムフィード用ライトボックス

ご覧の通り、Facebookギャラリーの埋め込みは素早く簡単に行えます。

この方法を使えば、サイドバーやフッターにFacebookウィジェットとしてギャラリーを埋め込むことができます。そして、あなたはライブフィードエディタからもそれを行うことができます。

ライブフィードエディタを開くには、ダッシュボードからFacebookフィード " すべてのフィード メニューに移動します。

ここに、あなたのFacebookのフィードがすべて表示されます。続行するには、先ほど作成したフィードを選択します。

ライブエディタでフィードを開く

その後、ライブフィードエディターでFacebookのギャラリーが開きます。右上の埋め込み ボタンをクリックします。

facebookエディタの埋め込みボタンをクリック

Facebookギャラリーを埋め込む場所を選択するポップアップが表示されます。

ポップアップで、ウィジェットに追加 オプションを選択します。

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

そうすると、ウェブサイトのウィジェットページに 移動します。ここで、FacebookギャラリーをFacebookウィジェットとしてサイドバーまたはフッターに埋め込むことができます。

続けるには、このページのサイドバーパネルをクリックしてください。

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

Facebookギャラリーをフッターに埋め込みたい場合は、代わりにフッターパネルを クリックしてください。

facebookウィジェットのフッターを選択

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

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

これで、訪問者があなたのウェブサイトをチェックアウトすると、このようにサイドバーエリアに埋め込まれたFacebookギャラリーを見ることができます:

facebookギャラリーのサイドバーを埋め込む

それで終わりだ!

これで、あなたのウェブサイトにFacebookギャラリーを埋め込む方法がわかりました。

Facebook Feed Proプラグインを使用すると、わずか数回のクリックでFacebookギャラリーを投稿することができます。そして、あなたのウェブサイトの訪問者を魅了し、売上を向上させ、より多くのFacebookのフォロワーを獲得する簡単な方法を持つことになります。

Facebookのギャラリーを簡単に表示する準備はできましたか?今すぐFacebook Feed Proを始めましょう。

これらのステップが示すように、美しいFacebookギャラリーをウェブサイトに追加することは、ブランドのストーリーを共有するシンプルで効果的な方法です。

私の経験から、Smash Balloon Facebook Feed Proを使用するのが、コードと格闘することなくプロ並みのギャラリーを作成する最も確実な方法です。わずか数分で、あなたのサイトにフォトアルバムを公開することができます。

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

  • Facebook Feed Proを手に入れよう。(14日間の返金保証付きです。)
  • Facebookのギャラリーフィードを作成するには、今説明した簡単な手順に従ってください。
  • 新しいFacebookギャラリーをプレビューして、ウェブサイトのデザインと完全に一致することを確認します。

Facebook Feed Proを使ってサイトにFacebookギャラリーを追加する方法について質問がありますか?下のコメントで教えてください。

あなたのサイトに特定のFacebookアルバムを表示する方法を知りたいですか?Facebookアルバムをウェブサイトに埋め込む方法については、次の投稿をご覧ください。

ブランドへの信頼を築くためにFacebookのレビューを増やすことに興味がありますか?Facebookのレビューを増やす方法をご紹介します。

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

コメントを追加する

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