WordPressでFacebookタイムラインを表示する方法

ブログのソーシャルメディアフォロワーを増やしたいですか？素晴らしいトリックを見つけました。FacebookタイムラインをWordPressサイトに直接表示します。これにより、サイトが新鮮に保たれ、訪問者はFacebookでもあなたをフォローするようになります。

多くの人が WordPress サイトに Facebook タイムラインを追加するのが難しいと感じています。結果として、見た目が悪く、サイトに合わないフィードになってしまうことがよくあります。しかし、心配しないでください。見た目も良い簡単な解決策があります。

このガイドでは、簡単なツールを使用してFacebookタイムラインをWordPressに追加する方法を説明します。

WordPressでFacebookタイムラインを表示する理由

当社のマーケティングリサーチ統計によると、Facebookは月間アクティブユーザー数29億人を擁する世界で最も人気のあるソーシャルメディアプラットフォームです。これにより、Facebookは新しいオーディエンスにリーチし、あなたのウェブサイトをすでに知っている人々と関わるのに最適な場所となります。

ただし、サイトにアクセスしただけでは、Facebookの投稿は表示されません。

これを踏まえ、WordPress に Facebook タイムラインを埋め込むことをお勧めします。そうすれば、より多くの人があなたのコンテンツを楽しむことができます。もし彼らがあなたの投稿を気に入れば、Facebook であなたをフォローし始めるかもしれません。

適切なプラグインを使用すると、Facebookに新しいコンテンツを投稿するたびにソーシャルメディアフィードが自動的に更新されます。これにより、通常の訪問者にとっても、ウェブサイトを新鮮で魅力的な状態に保つ簡単な方法となります。

それでは、WordPressにFacebookのタイムラインを表示する方法を見てみましょう。以下のクイックリンクを使用して、手順をナビゲートできます。

ステップ 1: カスタム Facebook フィードプラグインのインストールとセットアップ

WordPressにFacebookのタイムラインを埋め込む最も簡単な方法は、Smash Balloon Custom Facebook Feedプラグインを使用することです。

このプラグインを使用すると、Facebookアルバム、コメント、レビュー、コミュニティ投稿などをサイトに埋め込むことができます。

このガイドでは、Custom Facebook Feed Proを使用します。これにより、Facebookタイムラインの写真や動画を表示できます。

一方、無料バージョンでは、Facebookのステータス投稿にテキストとリンクのみを含めることができます。

有効化したら、Facebook Feed » 設定 に移動し、「ライセンスキー」フィールドにライセンスキーを入力する必要があります。

この情報は、Smash Balloonウェブサイトのお客様のアカウントの下にあります。

キーを入力したら、「有効化」ボタンをクリックしてください。

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

次に、WordPressサイトをFacebookページまたはグループタイムラインに接続する必要があります。Facebookページを使用しますが、Facebookグループの場合も手順はほぼ同じです。

グループの詳細については、WordPressにFacebookグループフィードを埋め込む方法に関する完全ガイドをご覧ください。

FacebookページまたはグループをWordPressに接続するには、Facebookフィード » すべてのフィードに移動し、「新規追加」をクリックします。

Smash Balloonを使用すると、WordPressにFacebookイベントカレンダーを追加する、写真を表示する、タイムラインを埋め込むなど、さまざまなフィードを作成できます。

WordPress に Facebook タイムラインを表示したいので、「タイムライン」をクリックしてから「次へ」をクリックする必要があります。

その後、サイトに追加したいFacebookページまたはグループを選択できます。

開始するには、「新規追加」をクリックするだけです。

次の画面で、ページまたはグループのタイムラインを埋め込むかを選択します。

この決定を下した後、「Facebookに接続」をクリックしてください。

これによりポップアップが表示され、Facebookアカウントにログインして使用したいページまたはグループを選択できます。

その後、「次へ」をクリックします。

これが完了すると、FacebookはSmash Balloonがアクセスできるすべての情報と、Facebookページまたはグループで実行できるアクションを表示します。

Smash BalloonのFacebookアカウントへのアクセスを制限するには、スイッチのいずれかをクリックして「はい」から「いいえ」に切り替えるだけです。ただし、これによりWordPressブログまたはウェブサイトに表示されるFacebookコンテンツが制限される可能性があることに注意してください。

それを念頭に置いて、可能な限りすべてのスイッチを有効にしたままにする必要があります。

次に、「完了」ボタンをクリックします。

しばらくすると、WordPressウェブサイトとFacebookがリンクされたことを確認するメッセージが表示されるはずです。それが完了したら、「OK」をクリックします。

Smash Balloonは自動的にWordPressダッシュボードに戻ります。

この時点で、WordPressに接続したばかりのグループまたはページが表示されるポップアップが表示されます。

このソースの横にあるラジオボタンを選択し、「追加」ボタンをクリックするだけです。

ポップアップを誤って閉じてしまっても、心配いりません。タブを更新するだけでポップアップが再度表示されます。

次に、Facebookページまたはグループを選択し、「次へ」をクリックします。

この段階で、Facebookフィードのタイムラインのテーマを選択できます。これらのテーマはすべて完全にカスタマイズ可能なので、WordPressウェブサイトにタイムラインを表示したい方法に応じてデザインを微調整できます。

どちらを使用すればよいかわからない場合は、「デフォルト」を選択して、次のステップで後から変更できます。

埋め込みタイムラインの開始点として使用するテンプレートを選択できるようになりました。

「デフォルト」テンプレートを使用していますが、好きなテンプレートを選択できます。また、後で満足できない場合はテンプレートを変更することもできます。

準備ができたら、「次へ」ボタンをクリックしてください。

ステップ 3: 埋め込み Facebook フィードをカスタマイズする

Smash Balloon Custom Facebook Feedプラグインを使用すると、サイトでのタイムラインの表示方法をカスタマイズする多くの方法があります。それを念頭に置いて、Facebookタイムラインに加えることができるさまざまな変更を見てみましょう。

Facebookフィード » すべてのフィードページで、タイムラインフィードを見つけ、その「編集」ボタン（小さな鉛筆のアイコン）をクリックします。

これによりSmash Balloonフィードエディタが開かれ、右側にFacebookグループまたはページタイムラインのプレビューが表示されます。

左側には、タイムラインの外観を変更するために使用できるすべての設定が表示されます。これらの設定のほとんどは自己説明的ですが、各領域を簡単に説明します。

フィードの外観に満足できない場合は、「テンプレート」メニューオプションをクリックして別のテンプレートを試すことができます。

次に、「変更」ボタンを選択します。

その後、「フィードレイアウト」をクリックして投稿の表示方法を変更できます。

この画面では、リストレイアウトとメーソンリーレイアウトを切り替えることができます。変更を加えるとプレビューが自動的に更新されるため、さまざまなレイアウトを試して、Facebook タイムラインに最適なものを見つけることができます。

デスクトップコンピューター、スマートフォン、タブレットにSmash Balloonが表示するフィードの高さや投稿数を変更することもできます。

投稿数を変更した場合、右上にあるボタンの行を使用して、デスクトップコンピュータやモバイルデバイスでフィードがどのように表示されるかをプレビューできます。

WordPressウェブサイトのモバイルバージョンをテストする際に、Smash Balloonがデスクトップ、タブレット、スマートフォンに表示する列の数を変更することも検討してください。

例えば、次の画像では、デスクトップではコンテンツを 4 列、タブレットでは 3 列、モバイルデバイスでは 2 列に分割しています。

これにより、訪問者が使用しているデバイスの種類に関係なく、タイムラインを画面に快適に収めることができます。

レイアウトに満足したら、「カスタマイズ」リンクをクリックします。

これでSmash Balloonのメインエディタに戻るので、次のメニューオプションである「配色」に進むことができます。

デフォルトでは、タイムラインはWordPressテーマと同じ色を使用しますが、この画面では「ライト」と「ダーク」のレイアウトを切り替えることもできます。

「カスタム」を選択し、設定を使用してリンクの色、背景色、WordPressのテキストの色などを変更することで、独自の配色を作成することもできます。

デフォルトでは、Smash Balloonはフィードにヘッダーを追加します。これは、カバー写真、プロフィール写真、およびFacebookページの名前です。

このセクションの外観を変更するには、左側のメニューで「ヘッダー」をクリックします。

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

デフォルトの「ビジュアル」ヘッダーと「テキスト」ヘッダーを切り替えることもできます。

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

その後、左側のメニューから「投稿スタイル」を選択することで、タイムライン内の個々の投稿の外観を変更できます。

テンプレートによっては、さまざまなレイアウトを選択できる場合があります。

サムネイル、半幅、全幅のいずれかのレイアウトを選択できます。

サムネイルレイアウトでは、Facebookの投稿が小さな画像で表示されます。

次の画像でその例を見ることができます。

代わりに、より大きな画像を表示したいですか？

次に、投稿レイアウトとして半幅を選択できます。

最後に、可能な限り大きな画像で Facebook フィードを表示したい場合は、フル幅レイアウトを選択できます。

WordPressウェブサイトでどのように表示されるかの例を次に示します。

全体的なレイアウトに満足したら、各投稿内の特定のコンテンツを微調整する時期です。

開始するには、「投稿スタイル」をクリックします。

この画面では、通常のレイアウトとボックスレイアウトを選択できます。

「ボックス」を選択すると、各投稿に色付きの背景を作成できます。これにより、Facebook の投稿がウェブサイトの他の部分から際立ち、テキストが読みやすくなる可能性があります。

ボーダー半径を大きくして角を丸くしたり、ボックスシャドウを追加してコンテンツを際立たせることもできます。

「通常」を選択した場合、異なるソーシャルメディア投稿を区切る線の太さと色を変更できます。

メイン設定画面に戻ることで、各投稿内の個々の部分をカスタマイズすることもできます。

再度「投稿スタイル」を選択しますが、今回は「個々の要素を編集」を選択します。

この画面では、Smash Balloonが各タイムライン投稿に含める投稿者、イベントタイトル、共有リンクボックスなど、さまざまなコンテンツが表示されます。

投稿からコンテンツを削除するには、ボックスのチェックを外すだけです。

これらの個々の要素のサイズと色を変更することもできます。「投稿作成者」や「投稿テキスト」などの要素名をクリックするだけです。

次に、設定を使用してこのコンテンツをカスタマイズできます。たとえば、フォントサイズを変更したり、新しい色を追加したりすることもできます。

デフォルトでは、Smash BalloonはフィードにFacebookの「いいね！」ボタンを追加しません。Facebookのフォロワーを増やすには、エディタの左側メニューから「いいね！ボックス」を選択してこのボタンを追加することを検討してください。

その後、「有効化」ボタンをクリックするだけで、青色になります。

デフォルトでは、Smash Balloonはこのボタンをタイムラインの下に追加しますが、「位置」ドロップダウンを開いて代わりに「上」を選択することで変更できます。

この画面では、「いいね！」セクションの外観を変更することもできます。カスタムコールトゥアクションの追加や、ページのカバー写真の追加などが含まれます。

フォロワー数が多いことは、より多くの人があなたのFacebookグループに参加することを奨励する素晴らしい社会的証明になります。それを念頭に置いて、「ファンを表示」スイッチをオンにすることをお勧めします。

「いいね！」ボタンの外観に満足したら、「もっと読み込むボタン」の設定に進むことができます。

「もっと読み込む」ボタンは、訪問者がFacebookのタイムラインを簡単にスクロールしてさらに表示できるため、Smash Balloonはデフォルトでフィードに追加しています。

これは良い出発点ですが、非常に重要なボタンなので、背景色、ホバー状態、ラベルを変更して目立たせることをお勧めします。

「テキスト」フィールドに、ボタンに表示されるテキストを入力して変更することもできます。

「有効」トグルをクリックすると、読み込みボタンを削除できます。

デフォルトでは、Smash Balloon は訪問者がウェブサイトから離れることなく、タイムラインの写真や動画を閲覧できるようにします。

訪問者は、次の画像でわかるように、写真または動画をクリックするだけでライトボックスポップアップを開くことができます。

訪問者は矢印を使用して、Facebookタイムラインのすべての写真や動画をスクロールできます。

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

これにより新しいタブが開き、訪問者はFacebookページの投稿に直接移動します。

Smash Balloonのライトボックス機能をカスタマイズするには、いくつかの方法があります。オプションを確認するには、左側のメニューで「ライトボックス」をクリックしてください。

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

デフォルトでは、ライトボックスは人々が写真や動画に残したコメントを表示します。これらのコメントを非表示にしたい場合は、「コメントを表示」スイッチをクリックして、青（有効）から灰色（無効）に切り替えることができます。

ライトボックス機能により、WordPressウェブサイト上で直接写真や動画をスクロールできます。

ただし、代わりにFacebookページへの訪問を促したい場合があります。この場合、「有効にする」トグルをクリックしてライトボックス機能を無効にすることができます。

これで、訪問者は写真や動画を詳しく見るために「Facebook で表示」リンクをクリックする必要があります。

Facebookタイムラインの外観に満足したら、変更を保存するために「保存」をクリックすることを忘れないでください。

ステップ 4: WordPress に Facebook タイムラインを埋め込む

ウェブサイトにタイムラインを追加するには、ブロック、ウィジェット、またはショートコードを使用します。これを行うには、Facebookフィードエディタページの右上にある「埋め込み」ボタンをクリックするだけです。

次に、Facebookのタイムラインを追加するための3つのオプションが表示されます。ショートコードを使用する、ページに追加する、またはウィジェットとして追加する、のいずれかを選択できます。

ページにFacebookタイムラインを表示したい場合は、「ページに追加」ボタンをクリックします。

その後、Facebookタイムラインを表示したいページを選択します。次に、「追加」をクリックします。

これで、そのページのブロックエディターにリダイレクトされます。

ページ上の任意の場所にある「+ブロックを追加」ボタンをクリックし、「Facebookフィード」ブロックを選択します。

そこから、ドロップダウンメニューで、先ほど作成したFacebookタイムラインを選択します。

完了したら、「更新」ボタンをクリックするだけで変更が反映されます。

Facebookのタイムラインをサイドバーのようなウィジェットエリアに表示したい場合は、前の「フィードの埋め込み」ポップアップから「ウィジェットに追加」オプションをクリックしてください。

次にWordPressウィジェットエディタに移動します。ここで、選択したウィジェットエリアの「+ウィジェットを追加」ボタンをクリックし、「Facebookフィード」ウィジェットを選択します。

完了したら、ドロップダウンメニューで先に作成したFacebookタイムラインを選択するだけです。

これで、「更新」ボタンをクリックしてウィジェットを公開できます。詳細については、WordPressでウィジェットを追加および使用する方法に関するステップバイステップガイドをご覧ください。

上記2つの方法でうまくいかない場合は、ショートコードを使用してFacebookのタイムラインを埋め込むことができます。詳細な手順については、WordPressにショートコードを追加する方法に関するガイドを参照してください。

さらに、ブロックテーマを使用している場合は、フルサイトエディターを使用して、「カスタムFacebookフィード」をテーマのどこにでも追加できます。

詳細については、WordPressのフルサイト編集に関する初心者向け完全ガイドをお読みください。

この記事がWordPressでFacebookのタイムラインを表示する方法を学ぶのに役立ったことを願っています。また、WordPressにFacebook動画を埋め込む方法に関するガイドや、最高のオンラインコミュニティプラットフォームの専門家による厳選リストもチェックしてみてください。

この記事が気に入った場合は、WordPressのビデオチュートリアルのために、YouTubeチャンネルを購読してください。また、TwitterやFacebookでも私たちを見つけることができます。