ビジュアルは、ウェブサイトを面白くする重要な要素です。数年前からデジタルマーケティングの専門家として、私は一貫して、人々をオンラインに引き留めるために写真がいかに重要であるかを見てきました。
Facebookは多くの企業や個人が写真を共有する場所です。もしあなたがFacebookを使って商品やイベント、チームを紹介しているのであれば、これらの写真をウェブサイトでも紹介することをお勧めします。
Facebookの写真をウェブサイトに表示することで、より生き生きとした視覚的なアピールをすることができます。訪問者はFacebookにアクセスすることなく、あなたのサイトで直接写真を見ることができます。
この記事では、Facebookの写真をサイトに簡単に表示するための、明確でステップバイステップのプロセスをご紹介します。
ウェブサイト・コンテンツとソーシャルメディア統合に関する私の知識を使って、簡単な手順をご紹介します。
この記事で
ウェブサイトにFacebookの写真を表示する理由
人々は通常、Facebookに写真をアップロードして友人や家族と共有する。
しかし、ブランドとして忘れてはならないのは、誰もがFacebookのアカウントを持っているわけではないということです。つまり、Facebookページだけで写真を公開しても、あなたの理想のオーディエンスはあなたの写真を見てくれないということです。
Facebookの写真をウェブサイトにクロスパブリッシングすることで、誰でもアクセスできるようになり、Facebookを使ったプロモーションが可能になります。つまり、サイト訪問者はFacebookのアカウントを持っていてもいなくても、Facebookのコンテンツを見ることができるのです。
その結果、より多くの人々がFacebookのコンテンツに参加し、ウェブサイトを探索するようになります。結局のところ、ソーシャルメディアマーケティングの統計に関する私たちの詳細な調査では、次のことが示されています：
Facebookのエンゲージメント率は様々だが、写真は最も注目を集める傾向があり、平均エンゲージメント率は0.12％を誇る。
WordPressでFacebookの写真を表示することも、Facebookのフォロワーを増やす理想的な方法です。この記事の後半で紹介する方法を使えば、訪問者があなたのウェブサイトを離れることなく、Facebookページに「いいね！」を押したり、交流したりすることができます。
フェイスブックの写真をサイトに表示する利点がわかったところで、ワードプレスに写真を埋め込む方法を見てみましょう。
Facebookの写真をウェブサイトに表示する簡単な方法
フェイスブックの写真をウェブサイトに表示する最も簡単な方法は、ワードプレスのプラグインを使うことです。
最高のWordPressプラグインは、あなたのサイトの機能を強化し、コードの書き方を知らなくても追加機能を提供します。
Smash Balloon Facebook Feed Proプラグインを使えば、写真やFacebookのビデオなどのメディアを含め、FacebookのコンテンツをWordPressサイトにシームレスに統合することができます。
そして、Facebookページに更新を投稿するだけで、自動的にウェブサイトに表示される。
さらに、このプラグインは箱から出してすぐにサイト上で見栄え良く表示されるため、コンテンツを思い通りに表示させるのに手間がかかりません。
それを念頭に置いて、Facebook Feed Proプラグインを使ってFacebookの写真を表示する手順を見てみましょう。
ステップ1: Smash Balloon Facebook Feed Proをダウンロードする
まずは、こちらからFacebook Feed Proを入手してください。そして、あなたのウェブサイトにプラグインをインストールし、有効化します。
WordPressプラグインのインストール方法については、こちらのステップバイステップガイドをご覧ください。
ステップ2：Facebookの写真フィードを作成する
ウェブサイトにプラグインをインストールして有効にした後、WordPressダッシュボードからFacebookフィード " すべてのフィードメニューに移動します。
次に、新しいFacebookフィードを作成するには、「新規追加」をクリックする。
次に、フィードの種類を選びます。カスタムFacebookフィードProでは、写真フィード、イベントフィード、アルバムフィード、ビデオフィード、レビューフィードなど、9種類のフィードから選ぶことができます。
ここで「写真 」を選択し、「次へ」 ボタンをクリックします。
これで、新しいFacebookフォトフィードの作成が完了しました。
ステップ3：Facebookページに接続する
ここで、新しいフィードをFacebookページに接続することができます。そのためには、新規追加 ボタンをクリックしてください。
新しいポップアップが表示され、ページを接続することができます。ここで接続したいページを選択し、接続ボタンをクリックしてください。
プラグインはFacebookにリダイレクトし、あなたのアカウントへの読み取り専用アクセスを要求します。読み取り専用なので、プラグインは実際には何も変更できず、あなたのデータを読み取るだけなので、完全に安全です。
あなたのサイトに必要なページを選び、「Next」をクリックします。
最後に「完了」をクリックすると、Facebookの写真フィードは、あなたのFacebookページへの読み取り専用アクセスとなります。
その後、Addを 選択してソースの追加を完了することができます。
Facebookの写真フィードに新しく追加したソースを選択できます。次に、「次へ 」をクリックして進みます。
ステップ4では、Facebookの写真フィードの外観を選択します。
ステップ4：Facebookの写真フィードをカスタマイズする
その後、ライブフィードエディタを使ってFacebookの写真フィードをカスタマイズすることができます。
左側には、Facebookフィードのカスタマイズオプションがあります。また、右側のライブプレビューで、フィードがどのように見えるかを確認できます。
フィードタイプ、レイアウト、カラースキーム、ヘッダーデザイン、投稿デザインなど、様々な変更が可能です。
始めるには、フィードレイアウトオプションを選択します。
Facebookの写真には4つのオプションがあります：リスト、グリッド、メイソンリー、カルーセルです。
リストレイアウトでは 、Facebookの写真が次々と投稿される。
Facebookのギャラリーのように、たくさんの写真を行と列で整然と見せたい場合は、グリッドオプションを選ぶことができる。
フェイスブックの写真を元のプロポーションに保ちたいなら、石積みのレイアウトがある。
また、Facebookのカルーセルで写真をよりダイナミックに見せることもできる。
お好きなレイアウトを選択し、上部の保存 ボタンをクリックしてください。
次に、小さな カスタマイズ ボタンをクリックすると、前のオプションに戻ることができます。
次は、Facebookの写真フィードの色を設定します。
そのためには、左の配色 オプションをクリックすればいい。
このページでは、Facebookの写真フィードの色を選ぶことができます。以下の中から選べます：
- テーマから継承ウェブサイトの配色をコピーする
- 明るく：フェイスブックの写真フィードに明るい印象を選ぶ
- ダーク:明るい色のフォントで、フィードをダークな印象に。
- カスタム：手動でフィードのすべての色を選択
お好みの配色を選択し、「保存」をクリックします。
その後、お好みに合わせてフィードの編集を始めることができます。このシンプルなエディターで、ヘッダータイプ、投稿スタイル、フィードサイズ、余白などをライブプレビューで設定できます。
完了したら、右上の保存 ボタンをクリックして、フィードを埋め込む次のステップに進んでください。
ステップ5：WordPressにFacebookの写真を表示する
さて、いよいよフェイスブックの写真をウェブサイトに表示する番です。この部分はとても簡単で、2つの異なる方法で行うことができます。
Facebookの写真をページに表示する
ライブフィードエディタを使用して、簡単にあなたのウェブページにFacebookのフォトフィードを表示することができます。
まず、ライブフィードエディタの右上にある埋め込み ボタンをクリックします。
新しいポップアップが表示されます。ここから、Facebookの写真を表示する場所を選択できます。
ページへの追加」ボタンをクリックしてください。
これで、利用可能なすべてのページのリストが表示されます。Facebookの写真を表示したいページを選び、追加 ボタンをクリックしてください。
そうすると、プラグインがそのページにリダイレクトします。
ここで、小さなプラスアイコン（+）を クリックし、カスタムFacebookフィードウィジェットを 選ぶ。
最後にPublish ボタンをクリックして完了です。
これでFacebookの写真をウェブサイトに追加することができました。あなたのウェブサイトをチェックして、訪問者にどのように見えるか見てみましょう。
Facebookの写真フィードをサイドバーに表示したい場合も、このプラグインを使えば可能だ。
サイドバーにFacebookの写真を表示する
また、フェイスブックの写真をフェイスブックのウィジェットとしてサイドバーに表示することもできます。
そのためには、まずWordPressのダッシュボードからFacebookフィードメニューに行きます。そこで、利用可能なすべてのフィードのリストが表示されます。
フェイスブックの写真フィードをクリックしてください。
ライブフィードエディターが再び表示されます。ここで、右上の埋め込み ボタンをクリックすることができます。
Facebookの写真フィードの場所を選択するポップアップが表示されます。続行するには、「ウィジェットに追加 」ボタンをクリックします。
プラグインがウィジェットページにリダイレクトします。これで、Facebookのフォトフィードウィジェットに利用可能なすべての場所を選択できます。
オプションからサイドバーを クリックして続けることができます。
代わりにFacebookの写真をフッターに表示したい場合は、こちらの他のオプションをクリックしてください。
このチュートリアルでは、Facebookの写真をサイドバーに表示します。新しいウィジェットを追加するには、プラスアイコン(+)の ボタンをクリックしてください。
ここで、カスタムFacebookフィード ブロックを選択すれば完了です！
あなたのウェブサイトのサイドバーにFacebookの写真が掲載されました！開いてみて、どのように見えるかチェックしてみてください。
WordPressで表示できるのはシンプルな写真だけではありません。Smash BalloonのFacebookアルバム拡張機能を使えば、Facebookアルバムをウェブサイトに埋め込むこともできます。
Facebookの写真をウェブサイトに手動で表示する
ウェブサイトにFacebookの写真を表示するためにWordPressプラグインを使用する代わりに、手動で写真を埋め込むことができます。
WordPressのプラグインを使うことに興味がなく、JavaScriptやその他のコーディング言語の編集経験がある場合に便利な選択肢だ。
しかし、この方法に抵抗がある場合は、上記の簡単な方法を使うことをお勧めする。
WordPressにFacebookの写真を手動で追加することの欠点のひとつは、ユーザーフレンドリーではないということだ。
Facebook Feed Proは自動的にFacebookの写真を取り込み、ユーザーフレンドリーなグリッドで表示します。ユーザーが各画像をクリックすると、キャプションや詳細が表示されます。
しかし、WordPressのプラグインを使用しない場合、手動による方法では、表示したい写真のある個々のFacebook投稿を見つける必要がある。そうなると、美しいギャラリーの代わりに、単一のFacebook投稿を埋め込むことになる。
その仕組みを見てみよう。
まず、Facebook Developersのウェブサイトにアクセスし、Embedded Postsオプションを選択します。
次に、サイトに追加したい写真を含むFacebook投稿のURLを入力します。チェックボックスをクリックすると、投稿全体または投稿の画像を含めることができます。
コードを取得]ボタンをクリックして、あなたのウェブサイトの埋め込みコードを含むライトボックスポップアップを開きます。
To embed your post in WordPress, copy the first section of code, and paste it into your site’s header.php file after the opening <body> tag.
最新のWordPressテーマを使っている場合は、以下のようにWordPressのカスタマイズパネルを使ってこれを行うことができるかもしれません。その場合は、ヘッダーボックスにコードを貼り付け、変更を保存してください。
次に、コードの2番目のセクションをコピーし、WordPressで新しいページを作成する。
ブロックエディターを使用している場合は、プラス（+）アイコンをクリックして新しいブロックを追加します。次に、「フォーマット」セクションで「カスタムHTMLWordPressブロック」を選択します。
カスタムHTMLブロックにFacebookの写真埋め込みコードを直接貼り付け、ページを公開します。
ライブページにアクセスすると、以下の例のように表示されます。
WordPressでFacebookの写真を表示するベストな方法
このように、手動でフェイスブックの写真を埋め込んでも、ワードプレスのプラグインを使ったときのような洗練されたユーザーフレンドリーなデザインにはなりません。
また、表示できる写真の枚数も、最初の投稿に含まれる枚数に制限される。
一方、Smash BalloonのFacebookプラグインを使えば、ウェブサイト上の複数のFacebookフィードに好きなだけ写真を表示する ことができます。
これは、サイト訪問者とのエンゲージメントを高め、ダイナミックなFacebookコンテンツをウェブサイトに直接表示することで、より多くの「いいね！」を獲得するのに役立ちます。
何を待っているんだい？
Smash BalloonのFacebook Feeds Proを今すぐご利用になるには、こちらをクリックしてください！
さらに、このプラグインはFacebookの写真を埋め込むだけでなく、いろいろなことができる。
WordPressにFacebookの動画を埋め込んで、サイトをさらに魅力的にする方法については、こちらのガイドもご覧ください。
ソーシャルメディア・コンテンツをサイトに追加する方法を知りたいですか？WordPressにソーシャルメディアのフィードウィジェットを埋め込む方法をご紹介します。
最後に、この記事を楽しんでいただけたなら、ツイッターや フェイスブックでもっと役立つチュートリアルを紹介しているので、気軽にフォローしてほしい。
