WordPressにFacebookアルバムを埋め込む方法（簡単な方法）

WordPressにFacebookのアルバムを埋め込みたいですか？

ソーシャルメディアにFacebookを利用しているのであれば、Facebookで撮影した写真をサイトにアップするのもよいでしょう。そうすることで、新規訪問者はあなたが築き上げた素晴らしいコミュニティを見ることができ、彼らを招待することができます。

この投稿では、WordPressにFacebookのアルバムを簡単に埋め込む方法を紹介します。

なぜWordPressにFacebookアルバムを埋め込むのか？

WordPressサイトにFacebookフォトアルバムを埋め込みたい理由はたくさんあります。

人気のあるFacebookページを持っていて、そこに定数写真を投稿し、サイト訪問者にも見てもらいたいと思っているかもしれません。WordPressにFacebookアルバムを埋め込めば、同じ写真を2つの異なるプラットフォームにアップロードする必要がなくなります。

さらに、Facebookアルバムを埋め込むことで、サイト全体のビジュアルアピールとユーザーエクスペリエンスを向上させることができます。訪問者は、WordPressのページを離れることなく、簡単に埋め込みFacebookアルバムを閲覧することができます。

WordPressには以前、Facebookアルバムの埋め込みサポートがビルトインされていた。YouTubeの動画を埋め込むのと同じように、FacebookのアルバムのURLをコピー＆ペーストするだけで、WordPressは自動的にそのアルバムを表示することができた。

しかし、FacebookとInstagramはAPIに変更を加えました。これらの変更により、WordPressがFacebookとInstagramのoEmbedサポートを継続することは不可能になりました。

アルバムへのリンクを埋め込もうとすると、エラーメッセージが表示されます。

ありがたいことに、WordPressでプラグインを使ってFacebookやInstagramの埋め込みを修正する方法がある。

WordPressにFacebookのアルバムを簡単に埋め込む方法を見てみましょう。以下のクイックリンクから手順をナビゲーションできます：

ステップ1：Facebookアルバムプラグインのインストールとセットアップ

WordPressにFacebookのアルバムを埋め込む最良の方法は、Smash Balloon Custom Facebook Feedプラグインを使用することです。

このプラグインを使えば、Facebookの状態更新、コメント、レビュー、コミュニティ投稿などをサイトに埋め込むことができます。

また、ライトボックスのポップアップを開くことで、訪問者がFacebookにアクセスすることなく、あなたの写真や画像を詳しく見ることができます。

まず最初にSmash Balloon Custom Facebook Feedプラグインをインストールして有効化します。詳しくはWordPressプラグインのインストール方法をご覧ください。

有効化したら、Facebook Feed ” Settingsに行き、ライセンスキーを’License Key’フィールドに入力する必要があります。

この情報は、Smash Balloonサイトのアカウントに記載されています。

キーを入力したら、「有効化」ボタンをクリックします。

ステップ2： FacebookページまたはグループをWordPressに接続する

このプラグインを使うと、Facebookのグループやページのフィードを埋め込むことができます。各写真の下に最新のコメントを表示したり、いいね！やシェアの合計を表示することもできます。

FacebookページまたはグループをWordPressに接続するには、Facebook Feed ” All Feedsに移動し、「新規追加」をクリックします。

Smash Balloonでは、フォトアルバム、タイムライン、イベントなどの投稿を表示できます。

Facebookのアルバムを埋め込むには、「アルバム」をクリックし、「次へ」をクリックする必要があります。

次に、写真を取得するFacebookページまたはグループを選択する必要があります。

まずは「新規追加」をクリック。

次の画面で、アルバムをページまたはグループのどちらから表示するかを選択します。

その後、『Facebookに接続する』をクリックするだけだ。

Facebookアカウントにログインし、アルバムを取得したいページやグループを選択するポップアップが開きます。

この決定をしたら、『次へ』をクリックする。

そうすると、FacebookはSmash Balloonがアクセスできるすべての情報と、Smash Balloonが実行できるアクションを表示します。

Smash BalloonのFacebookアカウントへのアクセスを制限するには、いずれかのスイッチをクリックして「はい」から「いいえ」にします。ただし、WordPressブログやサイトに埋め込むアルバムや写真に影響が出る場合がありますのでご注意ください。

とはいえ、すべてのスイッチを有効化したままにしておくことをお勧めする。

準備ができたら、『完了』をクリックする。

しばらくすると、WordPressサイトをFacebookに接続したことを確認するメッセージが表示されます。これで、「OK」をクリックする番だ。

Smash Balloonは自動的にWordPressの管理エリアに戻ります。

ステップ3：WordPressにFacebookアルバムを埋め込む

サイトにリンクしたグループやページがポップアップで表示されます。リンク元のラジオボタンを選択し、「追加」ボタンをクリックしてください。

誤ってポップアップを閉じてしまっても、慌てる必要はありません。タブを更新するだけで、ポップアップを再び開くことができます。

その後、WordPressは自動的にFacebookフィード ” すべてのフィードのページに戻ります。先ほどと同じように、「新規追加」ボタンをクリックして、「アルバム」を選択し、「次へ」ボタンをクリックします。

ここで、あなたのFacebookページまたはグループを選択し、「次へ」をクリックする。

この段階で、Facebookのアルバムを表示するテーマを選択することができます。

本当に〜してもよいですか？選んだら、「次へ」をクリックするだけです。

次の画面では、フィードの出発点として使用するテンプレートを選択できます。これらのテンプレートはすべてカスタマイズ可能なので、サイト上でFacebookのアルバムをどのように表示したいかによってデザインを微調整することができます。

ここでは「初期設定」のテンプレートを使用していますが、お好きなテンプレートをお選びください。

そうしたら、「次へ」ボタンをクリックする。

Smash Balloonは、選択したソース、テーマ、テンプレートに基づいてアルバムフィードを作成します。これは良いスタートですが、WordPressサイト上でアルバムがどのように見えるかを微調整することもできます。

ステップ4：埋め込みFacebookアルバムをカスタマイズする

Smash Balloon Custom Facebook Feedプラグインでは、アルバムの表示方法をカスタマイズする方法がたくさんあります。それを念頭に置いて、どのような変更ができるか見てみる価値があります。

Facebook Feed ” すべてのフィード画面で、アルバムフィードを探し、小さな鉛筆のような「編集」ボタンをクリックします。

Smash Ballonフィードエディターが開き、右側にFacebookのアルバムのプレビューが表示されます。

左側には、これらのアルバムがあなたのサイトにどのように表示されるかをカスタマイズするために使用できるすべての異なる設定が表示されます。これらの設定のほとんどは説明不要ですが、いくつかの重要なエリアについて簡単に説明します。

手始めに、「フィードレイアウト」をクリックして、アルバムの表示方法を変更できます。

この画面では、さまざまなレイアウトを切り替えたり、フィードの高さを変更したりできます。カルーセル」レイアウトを選択すれば、レスポンシブ・スライダーを作成することもできます。

変更を加えると、プレビューが自動的に更新されるので、さまざまな設定を試して、最適な設定を確認することができます。

初期設定では、フィードはデスクトップコンピューターとスマートフォンなどのモバイル端末で同じ数の投稿を表示します。

デスクトップ・コンピューター、タブレット、スマートフォンでは、右上のボタンでアルバムのプレビューができます。

モバイルで表示されるサイトは当然小さく見えるので、タブレットやスマートフォンではアルバムの表示数を少なくするとよいでしょう。

これを行うには、「投稿数」の下の「モバイル」フィールドに別の数字を入力するだけでよい。

さまざまなレイアウトを試すことで、訪問者がどの端末を使っていても、見栄えの良いソーシャルメディアフィードを作成することができます。

初期設定では、スマートフォンやタブレットでは、デスクトップコンピューターに比べてFacebookのフィードのカラム数が少なく表示されます。これにより、すべてのアルバムや写真が小さな画面で快適に表示されます。

WordPressサイトのモバイル版をテストした後、スマートフォンやタブレットでのカラムの表示に不満があるかもしれません。そのような場合は、「カラム」セクションの数字を変更することで、カラムを少なく表示することができます。

変更内容に満足したら、「カスタマイザー」リンクをクリックしてください。

これでSmash Balloonエディターのメイン画面に戻り、次の設定画面である「配色」を探せるようになります。

初期設定では、Smash BalloonはWordPressテーマから引き継いだ配色を使用しますが、この画面で「ライト」または「ダーク」に切り替えることができます。

カスタム」を選択し、コントロールを使って背景色を変更したり、WordPressの文字色を変更したりすることで、独自の配色を作成することもできます。

初期設定では、Smash Balloonはフィードにヘッダーを追加します。ヘッダーには、あなたのFacebookのプロフィール写真とページやグループの名前が表示されます。これにより、WordPressにFacebookの動画や写真を埋め込むよりも、さらにコンテクストを追加することができます。

このセクションの見栄えを変えるには、左側のメニューから「ヘッダー」をクリックする。

この画面では、ヘッダーのサイズや色を変更したり、Facebookのプロフィール写真を非表示にしたり、表示したりすることができます。

ヘッダーを完全に削除したい場合は、「有効化」トグルをクリックしてオフにします。

初期設定では、Smash Balloonは各アルバムのタイトルを表示します。タイトルを非表示にしたい場合は、Smash Balloonエディターのメインメニューから「投稿」を選択してください。

次に、「投稿スタイル」をクリックします。

ここで、「アルバムタイトルを表示」スライダーをクリックして、アルバムタイトルを削除することができます。

これは、アルバムタイトルが写真から注意をそらす場合や、サイトに埋め込んだときに意味をなさない場合に便利です。

この画面では、各アルバムに何枚の写真があるかを表示するかどうかも選択できます。

この数を追加するには、単に ‘アルバム内の投稿数’トグルをクリックします。

Smash Balloonの初期設定では、フィードにFacebookの「いいね！」ボタンは表示されません。Facebookのフォロワーを増やすには、エディターの左メニューから「いいね！ボックス」を選択して、このボタンを追加するとよいでしょう。

その後、『有効化』ボタンを青くなるようにクリックするだけです。

初期設定では、Smash Balloonはこのボタンを埋め込みフォトアルバムの下に追加しますが、「位置」のドロップダウンを開いて「上部」を選択することで変更できます。

この画面では、カスタマイザーの行動喚起を追加したり、Facebookであなたをフォローしている人の数を表示したりなど、「いいね！」セクションの表示方法を変更することもできる。

いいね！」ボタンの見た目に満足したら、「Load More Button」画面に移ります。

もっと見る(Load More)ボタンは、Facebookフィードのスクロールを促すため、Smash Balloonでは初期設定として埋め込みフォトアルバムに追加しています。

重要なボタンなので、背景色、文字色、ラベルを変更することで、Load Moreを目立たせることができます。

有効化」トグルをクリックしてボタンを完全に削除する設定もある。

Smash Balloonの初期設定では、訪問者はサイトにいながらFacebookのアルバムに目を通すことができます。

以下の画像のように、アルバムをクリックするだけでライトボックスが開きます。

訪問者は矢印を使ってアルバムをスクロールできる。

写真に「いいね！」をつけたり、コメントを残したり、Facebookの友達と画像を共有したい場合は、「Facebookで表示」リンクをクリックする。

初期設定のライトボックスをカスタマイズする方法はいくつかあります。

オプションを見るには、左側のメニューにある’Lightbox’をクリックしてください。

ここでは、ライトボックスのテキスト、リンク、背景の色を変更できます。

ライトボックス機能は、人々があなたの写真に興味を持ちやすくするだけでなく、あなたのFacebookページにアクセスしなくてもアルバムをスクロールできるようにします。

Facebookページへの訪問者を増やしたい場合は、「有効化」トグルをクリックしてライトボックス機能を無効化することができます。

これで、訪問者がアルバムをクリックすると、新しいタブであなたのFacebookページにリダイレクトされます。

フォトアルバムの見栄えに満足したら、「保存」をクリックして変更を保存するのをお忘れなく。

これで、これらのアルバムをWordPressサイトに追加する準備が整いました。

ステップ5：WordPressのページや投稿にFacebookアルバムを追加する

Facebookアルバムをページや投稿に埋め込みたい場合は、通常Facebookフィードブロックを使用します。

アルバムを埋め込みたいページや投稿を開くだけです。次に、「+」アイコンをクリックして新規ブロックを追加し、「Facebookフィード」と入力し始める。

適切なブロックが表示されたら、クリックしてページや投稿に追加します。

ブロック内で、先に作成したFacebookアルバムフィードを選択する。

これで、作成したブロックがページや投稿に表示されるはずです。

左側のブロック設定パネルでフィードを切り替えることもできます。フィードの見た目に満足したら、投稿やページが新しい場合は「更新」または「公開する」をクリックするだけです。

もう一つのオプションは、サイドバーなどのウィジェット対応エリアにフィードを追加することです。これにより、訪問者はサイトのどのページからでもFacebookの写真を見ることができます。

WordPressダッシュボードの外観 ” ウィジェットに移動し、青い「+」ボタンをクリックするだけです。

そうしたら、Facebook Feedウィジェットを見つけてください。2つのオプションが表示された場合は、どちらも同じように動作します。

次に、フィードを表示したいエリアにドラッグし、作成したFacebookアルバムフィードを選択するだけです。

ウィジェットには、Smash Balloonを使って作成したフィードのいずれかが表示されます。

こんな感じだ：

更新’ボタンをクリックして、ウィジェットをライブにすることができます。詳細については、WordPressでウィジェットを追加して使用する方法のステップバイステップガイドを参照してください。

最後に、ショートコードを使用して、任意のページ、投稿、またはウィジェット対応にアルバムを埋め込むことができます。

Facebook Feed “ All Feedsに行き、’Shortcode’カラムにあるコードをコピーするだけです。これで、サイトのウィジェット対応エリアにショートコードを追加できます。

詳しくは、WordPressでショートコードを追加する方法の詳細ガイドをご覧ください。

WordPressで特定のFacebookアルバムを追加する方法

Smash Balloonでは、WordPressサイト上の任意の場所に特定のFacebookアルバムを埋め込むこともできます。これにより、訪問者に最新のアルバムを表示したり、ページの他のコンテンツに関連するアルバムを表示したりすることができます。

例えば、WordPressにFacebookのイベントカレンダーを追加した場合、過去のイベントのアルバムも表示したいと思うかもしれません。

特定のFacebookアルバムを埋め込むには、Facebook Feed ” Extensionsにアクセスして、アルバム拡張機能を購入してインストールする必要があります。

ここで、’アルバム’拡張機能を見つけて、その’追加’ボタンをクリックします。

Smash Ballonのサイトが新しいタブで開き、アルバム拡張機能の購入方法が表示されます。

拡張機能を入手したら、プラグインをインストールするのとまったく同じ方法でインストールできます。ヘルプが必要な場合は、WordPressプラグインのインストール方法のガイドをご覧ください。

プラグインを有効化した後、Facebook Feed ” All Feedsに行き、’Add New’をクリックする。

Advanced Feed Types」で「Single Album」を選択し、「Next」をクリックする。

次に、ソースとして使用したいページまたはグループを選択し、上記と同じプロセスでテンプレートを選択します。

次のページでは、埋め込みたいアルバムのIDを入力する必要があります。

新しいタブで、表示したいFacebookのアルバムを開きます。

これで、=記号の後、ピリオドと&記号の間に数字をコピーできる。例えば、以下の画像では、447443907512397をコピーする必要があります。

この数字をWordPressダッシュボードに貼り付けます。

その後、「次へ」をクリックすると、Smash Balloonがアルバムを取得します。

その後、アルバムのスタイルを設定し、上記と同じ手順に従ってサイトに追加することができます。

ボーナス：WordPressにソーシャルメディアのフィードを追加する方法

WordPressでカスタムFacebookフィードを作成したい場合は、Smash Balloon Facebook Feedプラグインが最適です。

しかし、多くのサイトは、YouTubeチャンネル、Twitterプロフィール、Instagramアカウントなど、複数のソーシャルメディアアカウントを持っている。各プラットフォーム用に独自のコンテンツを作成するのであれば、そのコンテンツをサイトに表示することは理にかなっている。

Instagramで画像を共有する場合は、カスタムのInstagramフォトフィードを作成し、それを任意のページ、投稿、またはウィジェット対応エリアに追加します。WordPressでInstagramのShoppable画像を追加することもできる。

動画は訪問者の注意を引き、サイトに留まらせる素晴らしい方法です。

そう考えると、YouTubeチャンネルの最新動画を見せるのもいいかもしれない。

この投稿が、WordPressにFacebookのアルバムを埋め込む方法を学ぶのにお役に立てば幸いです。また、WordPressに最適なTwitterプラグインや、サイト訪問者とつながるためのメールマガジンの作成方法についてもご覧ください。

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.