WordPressウェブサイトにFacebookページを追加する方法(コードなし)
クリック・ソーシャル

ClickSocialを使ってWordPressから直接ソーシャルメディア投稿をスケジュールする

無料トライアル開始 アングルライト
ホーム ブログ WordPressウェブサイトにFacebookページを追加する方法(コードなし)

WordPressウェブサイトにFacebookページを追加する方法(コードなし)

ワードプレスにカスタムfacebookフィードを埋め込む方法

私はこれまで多くの企業のオンライン・プレゼンスの立ち上げを支援してきたが、常に重要なのは、オーディエンスとつながることだ。

Facebookページを持つことは、最新情報を共有し、コミュニティを構築する素晴らしい方法です。

ウェブサイトにWordPressを使い、ビジネスやブランドのFacebookページも持っているなら、それらをリンクさせるのが賢い方法だ。

WordPressのウェブサイトにFacebookページを追加すると、訪問者がソーシャルメディアであなたを見つけやすくなり、あなたのサイト上でFacebookのコンテンツを見ることができます。

そして一番の魅力は?コーディングの知識がなくてもできることだ。

この記事では、私の経験から、コーディングの知識がなくても簡単にFacebookページをWordPressサイトに接続する方法を説明します。

多くのビジネスで使われている、コードを使わないシンプルな方法をご紹介します。

この記事で

WordPressにFacebookページのフィードを埋め込む最も簡単な方法

Facebook Feed Proのような使いやすいWordPressプラグインをインストールすると便利です。

Facebook Feed Proは最も簡単で最高のWordPressフィードプラグインで、カスタマイズ可能なFacebookフィードをウェブサイトに表示できます。

市場で最高のFacebookフィードプラグインであるFacebook Feed Proは、WordPressサイトの機能を拡張し、わずか数クリックでFacebookページのコンテンツをウェブサイトに表示します。

このFacebook WordPressプラグインについて、私が個人的に気に入っている点は以下の通りだ:

  • 時間と労力を節約Facebookの投稿をサイトに埋め込むと、Facebookに新しい投稿をアップロードするたびに、サイト訪問者に更新されたコンテンツを見せることができます。
  • 設定が超簡単:WordPressのFacebookフィードを30秒以内に表示することができます。
  • ブランディングの一貫性:このプラグインは、箱から出してすぐに素晴らしい外観になります。既存のWordPressテーマのスタイルを自動的にコピーし、ブランドのビジュアルを維持します。
  • Facebookコンテンツの選択肢が豊富:プラグインを使用すると、ユーザーエンゲージメントを高めるために、あなたのページの投稿だけでなく、イベントフィード、FacebookのビデオプレイリストFacebookの写真を表示することができます。
カルーセル・フェイスブック・ビデオフィード
  • 社会的証明: フェイスブックのレビューや体験談を埋め込んで、実在の人々があなたの製品を使っているという社会的証拠を示すこともできる。
  • ビジュアルフィードカスタマイザー:Facebook Feed Proにはビジュアルフィードエディタがあり、カスタマイズした内容をリアルタイムで確認できます。
  • シンプルでわかりやすい:Facebookフィードの背景色を変更したいですか?フォントサイズ?それともヘッダー?Facebook Feed Proのビジュアルフィードカスタマイザーを使えば、数クリックでこれらすべてを行うことができます。

WordPress用の最も人気のあるFacebookフィードプラグインとして、Facebook Feed Proは25万人以上の ユーザーに信頼され、4.9/5つ星の評価を得ています。

WordPressにFacebookページのフィードを埋め込む準備はできましたか?

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

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

FacebookからWordPressウェブサイトにソーシャルメディアコンテンツを追加するには、こちらからFacebook Feed Proを入手してください。

プラグインをコンピューターにダウンロードしたら、次のステップはウェブサイトにアップロードして有効化することです。

プラグインのインストールにお困りですか?WordPressのプラグインをインストールする方法については、こちらのステップバイステップのチュートリアルをご覧ください。

ステップ2:Facebookページのフィードを作成・選択する

ウェブサイトにプラグインをインストールし、有効化した後、WordPressの管理ダッシュボードからFacebookフィード " すべてのフィード メニューに移動します

Facebook Feed Proを使ってフィードを作成するには、「新規追加」をクリックします。

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

そして、タイムラインフィード、写真フィード、Facebookイベント、Facebookライブストリームフィード、ビデオフィード、Facebookアルバムフィードなど、作成可能なFacebookフィードの種類が表示されます。

このチュートリアルでは、Facebookのタイムラインフィードを表示するので、タイムラインを 選択し、次へをクリックする。

ピックタイムライン

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

Facebookフィードのタイプを選択したら、次はFacebookフィードのソースをプラグインに接続します。

ソースとは、あなたのフィードが投稿、写真、ビデオを取得するFacebookページです。

始めるには、ページの新規追加 ボタンをクリックします。

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

次に、ソースの種類を選択するポップアップが表示されます。残念ながら、フェイスブックはフェイスブックのグループフィードを許可していません。そこで、Pageオプションを選択し、Connect to Facebookをクリックする。

フェイスブック・フィード・プロ・ページを選択

Facebookにリダイレクトされ、プラグインがあなたのFacebookコンテンツへの読み取り専用アクセスを要求します。

読み取り専用なので、プラグインが実際に何かを変更することはできません。

次に、「続行」 ボタンを使用して、ここでアカウントを接続します。

フェイスブック・フィード・プロへのアクセスを許可する

最後に、接続したいFacebookページを選択し、Addをクリックする。

フェイスブック・フィード・プロのソースを追加

おめでとうございます!これで、このFacebookページをWordPressのFacebookフィードのソースとして選択できるようになりました。次の ステップに進むには、忘れずに「次へ 」をクリックしてください。

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

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

その後、Facebook Feed Proは自動的にあなたのウェブサイトのデザインをコピーし、美しいFacebookフィードを作成します。

フィードの見た目をコントロールするために、ユニークなデザインのフィードテーマをインポートすることもできます。5つのテーマから選べます:

  • デフォルト
  • モダン
  • ソーシャルウォール
  • 概要
  • オーバーラップ

好きなテーマを選んだら、「次へ」をクリックする。

facebookフィードのテーマを選択する

プラグインは、インポート可能なフィードテンプレートのコレクションを表示します。そうすれば、Facebookのフィード投稿にユニークなレイアウトを素早く追加することができます。

テンプレートを選択し、「Next」をクリックする。

facebookフィードテンプレートのオプションを選択します。

フィードテンプレートをインポートしたら、次はプラグインのライブフィードカスタマイザーを使ってFacebookフィードをカスタマイズします。

また、Facebookのフィードがウェブサイト上でどのように表示されるかを、コードに一行も触れることなくコントロールすることもできる。

左側には、フィードタイプ、フィードレイアウト、カラースキーム、ヘッダー、投稿、Facebookいいね!ボックスなど、Facebookフィードのカスタマイズオプションがたくさん表示されます。

Facebookのフィードをカスタマイズするたびに、右側に表示される変更内容をリアルタイムで確認できる。

facebookフィードプロ用ライブフィードエディタの例

まず、フェイスブックのフィードに名前をつけることで、他のフィードと簡単に見分けられるようになる。

一番上の名前欄をクリックしてください。

フィード名の編集 facebookフィードプロ

左側にあるカスタマイズ・オプションを使って、Facebookのフィードの見栄えを変えることができる。

例えば、Facebookフィードのレイアウトをカスタマイズするには、配色 オプションをクリックします。

facebookフィードプロプラグインの配色オプション

Facebook Feed Proでは、Facebookフィードの配色を4つのオプションから選択できるので、訪問者のユーザーエクスペリエンスをパーソナライズできます:

  • テーマから継承:ウェブサイトの配色を自動的にコピー
  • 明るい:明るい背景に濃い色の文字
  • Dark:暗い背景に明るい色のテキスト
  • カスタム:フィードの背景色と文字色をお好みにカスタマイズできます。
フェイスブック・フィード・プロの配色オプション

変更を確認するには、忘れずに「保存」をクリックしてください。

さらにカスタマイズしたいですか?まず、左上のカスタマイズをクリックしてメインオプションに戻ります。

配色から主なカスタマイズ・オプションに戻る

次に、Facebookの投稿がフィード上でどのように表示されるかをコントロールできる。

まず、左側の投稿オプションをクリックします。

facebook投稿編集オプション ライブエディター

ここでは、投稿のタイプを変更したり、投稿の各要素の見え方を変更したりできます。特定のレイアウトでは、ここから投稿タイプを変更することもできます。

とりあえず、「個々の要素を編集」オプションを選んでみよう。

facebook用の個々の投稿要素の編集を開始

左側では、投稿者名、投稿テキスト、投稿日、投稿写真、投稿動画など、すべての投稿要素の表示・非表示を選択できるようになりました。

チェックリストを使って、見せたい要素を選ぶだけ。

ここで各オプションをクリックして、さらにカスタマイズオプションを開くこともできます。最後に、投稿要素の編集が終わったら、保存をクリックして変更を保持します。

残りのカスタマイズオプションから、ヘッダータイプ、いいね!ボタン、フィードサイズ、投稿数、カバー写真の表示、投稿の余白などを編集することもできる。

Facebookフィードの編集が終わったら、「保存」ボタンをクリックするのを忘れずに。

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

Facebookフィードの選択とカスタマイズが終わったら、最後のステップはあなたのウェブサイトに埋め込むことです。

このプラグインはWordPressと完璧に連動するので、ウェブページや ウィジェット対応エリアに簡単に追加できます

以下、この2つの方法をチェックしてみよう:

WordPressのページや投稿にFacebookのフィードを追加する

まず、フィードカスタマイザーの右上にある埋め込み ボタンをクリックします。

フィードを埋め込む facebookフィードプロ

次に、Facebookフィードをページに追加するかウィジェットに追加するかを選択するポップアップが表示されます。ショートコードをコピーして、サイトの任意の場所に手動でフィードを追加することもできます。

続行するには、ここで「ページに追加」ボタンをクリックします。

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

Facebook Feed Proは、利用可能なWordPressページのリストを表示します。

ここで、Facebookフィードを表示したいページを選択し、追加ボタンをクリックします。

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

プラグインが選択したページにリダイレクトします。ここで、プラス(+)アイコンを クリックして、新しいWordPressコンテンツブロックを追加します。

新しいコンテンツブロックを追加する

そうしたら、検索フィールドに「facebook」と入力する。

次に、検索結果の Facebookフィードブロックをクリックすると、自動的にあなたのページに追加されます。

facebookフィード・プロ挿入ブロック

Facebookのフィードがページエディターに表示されます。自由にページの内容を編集してください。

最後に、見た目に満足したら、「更新」をクリックして、この例のようにウェブページに反映させます:

ウェブサイト上のfacebookフィードの例

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

Facebookのフィードウィジェットをサイドバーエリアに表示したい場合は?このプラグインはそのような場合にも役立ちます。

さらに、ビジュアル・カスタマイザーから直接それを始めることができます。

ビジュアルカスタマイザーでフィードが開かれていない場合は、WordPressダッシュボードからFacebookフィード " すべてのフィードメニューに移動します。

次に、埋め込みたいFacebookのフィードをクリックします。

ビジュアルカスタマイザーでfacebookフィードを開く

これで、Facebookフィードのライブエディターが再び開くのが見えるだろう。

右上のEmbed ボタンをクリックしてください。

フィードを埋め込む facebookフィードプロ

Facebookのフィードを埋め込む場所を尋ねるポップアップが表示されます。今回はサイドバーに表示させるので、「ウィジェットに追加」をクリックします。

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

次に、ウェブサイトのウィジェットページに移動します。ここでは、WordPressのすべてのウィジェットを追加、削除、管理することができます。

ここで、Facebookウィジェットを追加したい場所に応じて、サイドバーまたはフッターをクリックしてください。

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

まず、プラス(+)アイコンを クリックして、サイドバーまたはフッターに新しいウィジェットを追加します。

次に、オプションからFacebookフィードウィジェットを 選択します。

facebookフィード・ウィジェット・サイドバーを挿入する

最後に「更新」をクリックすると、Facebookのフィードがウェブサイトのウィジェット対応エリアに追加されます。

これで、あなたのウェブサイトにアクセスし、サイドバーやフッターエリアをチェックすると、このようにFacebookのフィードが表示されます:

サイドバーのfacebookフィードの例

WordPressのウェブサイトにFacebookのフィードを簡単に追加する方法がわかりました。しかも、JavaScriptやCSS、HTMLなどのコーディング言語を使う必要もありません。

このように、Facebook Feed Proは、記録的な速さであなたのウェブサイトにFacebookのフィードを追加することをこれまで以上に簡単にします。

Facebookフィードの埋め込みを始めたいですか?Facebook Feed Proを始めましょう

WordPressのFacebookページ・プラグインを使うべきか?

FacebookのビジネスページのフィードをWordPressサイトに追加するには、2つの選択肢があります。FacebookのPageプラグインを使うこともできますが、いくつかの制限があります

  • カスタマイズの選択肢が限られている:Facebookのフィードに、あなたのウェブサイトのテーマが使っているスタイルを継承させたい場合、それは不可能だ。高価な開発者を雇ってコードを修正してもらわない限り。
  • 基本タブのみFacebookフィードのタイムラインしか表示できません。どのFacebookの投稿を表示するかをコントロールするオプションはありません。
  • 特に初心者にとっては圧倒的だ:共有ボタンから埋め込みコードを取得し、フィードの見え方をカスタマイズするために微調整する必要があるので、混乱してしまう。さらに、FacebookのフィードをWordPressに埋め込むためのコードも扱わなければならない。

最後に、リスクを冒してWordPressにFacebookのフィードを追加しようとすると、誤ってサイトを壊してしまう危険性がある。

一番不満なのは?あなたを助けてくれるサポートチームがいないことです。特に技術に詳しくない人には難しい。

あるいは、2番目のオプションはどうだろう?

Smash Balloon Facebook Feed Pro プラグインを使用して、WordPress ウェブサイトに Facebook フィードを表示する最も簡単な方法を選択します。

Facebook Feed Proはこちらから。(14日間の返金保証付き!)

他のソーシャルネットワークのフィードも表示したい場合は、WordPressにTwitterウィジェットを簡単に追加する方法をご覧ください。

この記事を楽しんでいただけたなら、ツイッターや フェイスブックでソーシャルメディア・マーケティングのチュートリアルをもっとご覧ください。

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

コメントを追加する

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