WordPressにFacebookページを追加する方法（簡単な3つの方法） 

新しいウェブサイトのセットアップが完了したら、次にソーシャルチャネルを接続します。オーディエンスは自然に構築されるものではなく、Facebookを無視するサイトは最も簡単なフォロー機会を逃しています。

サイトとFacebookページが別々の世界にあるということは、簡単なエンゲージメントとフォロワーを逃しているということです。

そのため、WordPressにFacebookページを追加する最も信頼性の高い3つの方法を紹介します。また、Facebookいいねボタンを追加する方法も紹介するので、訪問者はサイトを離れることなくワンクリックであなたのページをフォローできます。

WordPressにFacebookページを追加する理由

ローカルビジネスやコミュニティページを運営している場合、訪問者はすでに毎日Facebookを利用しています。Facebookページをサイトに直接追加すると、訪問者はサイトを離れることなく「いいね！」やフォローができるようになり、このスムーズなやり取りこそが、ソーシャルメディアの成長が実際に起こる場所なのです。

また、ブランドを同時に2つの場所に表示できるため、Google経由であなたを見つけた新しい訪問者は、同じセッションでソーシャルメディアでもつながることができます。地域ビジネスにとって、検索での可視性とソーシャルでのつながりの組み合わせは、他に類を見ないものです。

次に、ステップバイステップで追加する方法を説明します。

方法1：SeedProdを使用してWordPressにFacebookページを追加する

専用のソーシャルランディングページやブランドのFacebookハブなど、ゼロから新しいページを作成している場合は、SeedProdが最良の選択肢です。ドラッグアンドドロップエディターには、Facebookページブロックが組み込まれているため、コードを記述せずにページを埋め込み、レイアウト全体をカスタマイズできます。

SeedProdは、ドラッグアンドドロップで利用できる最高のWordPressページビルダーおよびウェブサイトビルダーです。コーディングをゼロから行う手間なしにカスタムページレイアウトを作成できます。

Facebookページブロックを使用すると、数回クリックするだけでWordPressに任意のFacebookページを埋め込むことができます。また、Facebookいいねボタン、Facebookコメント、Facebook投稿を埋め込むことができる便利なブロックもあります。

SeedProdを使用してWordPressにFacebookページを追加する方法は次のとおりです。

ステップ1. SeedProdのインストールと有効化

まず、SeedProdプラグインをダウンロードしてWordPressサイトにインストールする必要があります。

このガイドでは、高度なカスタマイズ機能のためにSeedProd Proを使用しています。

ヘルプが必要な場合は、SeedProdのインストール方法とライセンスのアクティベーションに関するドキュメントを参照してください。

SeedProdは、WordPressサイトをカスタマイズするための2つの方法を提供します。スタンドアロンのランディングページを作成するか、テーマビルダー機能を使用してカスタムWordPressテーマを作成できます。

このガイドでは、ランディングページビルダー機能を使用します。

ステップ2.ランディングページテンプレートの選択

新しいランディングページを作成するには、WordPressダッシュボードから「ランディングページ」に移動し、「新しいランディングページを追加」ボタンをクリックします。

そこから、デザインの出発点として使用できる何百もの既製のランディングページテンプレートが表示されます。各テンプレートは100％モバイルレスポンシブであり、デザインがスマートフォンやタブレットなどのモバイルデバイスで素晴らしく見えることを保証します。

上部のタブをクリックしてテンプレートをフィルタリングするか、検索ボックスを使用して特定のニッチ向けのデザインを見つけることができます。気に入ったものを見つけたら、カーソルを合わせてチェックマークアイコンをクリックします。

次に、ページの名前を入力し、「保存してページの編集を開始」ボタンをクリックします。

次に、テンプレートがSeedProdのビジュアルエディターで開かれ、コードなしでレイアウトとコンテンツのカスタマイズを開始できます。

ステップ3. Facebookページブロックを追加する

SeedProdのドラッグアンドドロップエディターはナビゲートが簡単です。

右側にライブプレビューが表示され、左側にブロック、セクション、設定が表示されます。ブロックパネルからコンテンツ要素をプレビューにドラッグし、数回クリックするだけで設定を編集できます。

Facebookページブロックをランディングページに追加する方法は次のとおりです。

「高度なブロック」パネルで、Facebookページブロックが表示されるまで下にスクロールします。ページに追加するには、左からドラッグしてプレビューにドロップします。

次に、ブロックをクリックしてカスタマイズオプションを表示し、FacebookページURLを追加できます。

ページが表示されない場合は、「ページ設定」リンクをクリックして、FacebookアプリID情報を入力する必要があります。

FacebookアプリIDを取得する方法

アプリIDは、これが少し面倒な部分ですが、一度設定すれば済みます。

方法は次のとおりです。

1. developers.facebook.com/appsにアクセスし、Facebookアカウントでログインします。
2. 「アプリを作成」をクリックし、求められたら「コンシューマー」アプリタイプを選択します。
3. アプリ名と連絡先メールアドレスを入力し、セットアップウィザードを完了します。
4. アプリが作成されると、アプリダッシュボードの上部にアプリIDが表示されます。それをコピーして、SeedProdのページ設定フィールドに貼り付けます。

追加のFacebookページブロック設定には、次の機能が含まれます。

• 小さなヘッダーを有効にする
• カバー写真を非表示にする
• プロフィール写真を表示する
• CTAボタンを非表示にする
• Facebookウィジェットの高さを変更する
• ウィジェットの配置を調整する

タイムライン、イベント、メッセージなど、さまざまな種類のFacebookフィードを表示することもできます。

このブロックの素晴らしい点は、いいね！ボタンと共有ボタンが自動的に含まれているため、ユーザーはソーシャルメディアコンテンツを他のプラットフォームで簡単に共有できることです。

ステップ4. WordPressページをカスタマイズする

Facebookページフィードが配置されたら、ランディングページの残りの部分のカスタマイズを続けることができます。

アイデアとしては以下のようなものがあります：

• オプトインフォームを追加してメールアドレスを収集する

• 信頼性を高めるために、満足した顧客からのお客様の声を含める
• Facebookグループに参加するためのボタンを追加する

• 初めて訪れる方を惹きつけるために、ウェルカムビデオを埋め込む

ランディングページのカスタマイズに関する完全なチュートリアルについては、WordPressでランディングページを作成する方法のステップバイステップガイドをご覧ください。

ステップ5：変更を保存する

ページに満足したら、画面右上にある「保存」および「公開」ボタンをクリックします。

これで、ページにアクセスして表示を確認できます。

方法2：プラグインなしでWordPressにFacebookページを追加する

2番目の方法はFacebook独自のページプラグインを使用するため、ページビルダーは関与しません。

この方法も比較的簡単ですが、WordPressのページビルダーを使用する場合ほどカスタマイズ性は高くありません。また、コードスニペットをコピーしてサイトに貼り付ける必要があります。

ステップ1：Facebookページプラグインを取得する

まず、Facebookページプラグインのウェブサイトにアクセスします。ここでページの詳細を入力し、ウェブサイトに埋め込むコードを生成します。

ステップ2：Facebookページプラグインを設定する

プラグインページには、Facebookページの情報を入力できるフォームが表示されます。

FacebookページのURLを貼り付けたり、プラグインのカスタム幅と高さを入力したり、カバー写真を非表示にしたりできます。

ステップ3：Facebookページ埋め込みコードを生成する

必要な情報を入力したら、「コードを取得」ボタンをクリックします。

Facebookは、ウェブページに貼り付けるためのJavaScriptコードとiFrameコードを生成します。ポップアップウィンドウでiFrameオプションを選択し、埋め込みコードをコピーします。

ステップ4：Facebookページ埋め込みコードをWordPressに追加する

次に、このコードをWordPressブログに追加します。多くのサイトでは、Facebookアカウントページを新しい投稿またはサイドバーウィジェットに表示しているため、その方法を見てみましょう。

WordPress管理画面の「外観」タブに移動し、「ウィジェット」を選択します。

次に、プラスアイコンをクリックして新しいWordPressブロックを追加し、カスタムHTMLまたはテキストウィジェットを見つけます。このウィジェットをFBページを表示したいエリアに追加します。

最後に、Facebookによって生成されたHTMLコードをコピーし、ウィジェットエリアに貼り付けます。

次に、「保存」ボタンをクリックして変更を適用します。これで、WordPressのサイドバーにFacebookページが表示されるはずです。

代わりにページや投稿に追加するには、ブロックエディターでページを開き、「+」ボタンをクリックして新しいブロックを追加し、「カスタムHTML」を検索して埋め込みコードを貼り付けます。ページを公開すると、Facebookフィードが配置した場所に表示されます。

表示されない場合？まず、Facebookページが公開されており、入力したURLが正しいことを確認してください。セキュリティプラグインやキャッシュプラグインが外部スクリプトをブロックしている場合は、テストのために一時的に無効にしてみてください。

FacebookのJavaScript埋め込みはブロックされることがあるため、その場合はステップ3のiFrameコードに切り替えてください。また、埋め込んでいるドメインがFacebookアプリの設定で登録されているドメインと一致していることを確認してください。

方法3：プラグインを使用してWordPressにFacebookフィードを追加する

Facebookに投稿するたびに自動的に更新される、動的でスタイリッシュなフィードが必要な場合は、Smash BalloonのカスタムFacebookフィードプラグインが最適です。これはこのユースケースで最も人気のあるソリューションであり、既存の任意のページ、投稿、またはサイドバーで使用できます。

当社のFacebookフィードプラグインを使用すると、コードを書かずにFacebook投稿のフィルタリング可能なギャラリーを表示できます。設定方法は次のとおりです。

ステップ1：カスタムFacebookフィードプラグインをインストールする

WordPressダッシュボードで、プラグイン » 新規追加に移動し、「Custom Facebook Feed by Smash Balloon」を検索します。無料版をインストールして有効化します。

有効化すると、ダッシュボードに新しい「Facebookフィード」メニュー項目が表示されます。

ステップ2：Facebookアカウントを接続する

Facebookフィード » 新規追加をクリックしてセットアップウィザードを開始します。Facebookアカウントの接続を求められます。

「Facebookに接続」をクリックし、必要に応じてログインし、プラグインにページにアクセスする権限を付与します。

このプラグインは読み取り専用アクセスのみを要求するため、代わりに投稿する機能なしで投稿を表示できます。

ステップ3：Facebookページを選択する

接続後、管理しているFacebookページのリストが表示されます。表示したいページを選択し、「次へ」をクリックします。

ウィザードでフィードの種類（タイムライン、写真、イベント、または動画）を選択できます。サイトでの表示方法をプレビューできます。

ステップ4：ショートコードをコピーするか、ブロックを追加する

フィードが設定されると、Smash Balloonは[custom-facebook-feed]のようなショートコードを提供します。WordPressブロックエディターを使用している場合は、専用の「Facebookフィード」ブロックを使用することもできます。

フィードを保存し、ショートコードまたはブロック名をメモします。次のステップで、サイトにフィードを配置するために使用します。

ステップ5：ページにフィードを配置する

フィードを表示したいページまたは投稿を開きます。ブロックエディターを使用している場合は、「+」ボタンをクリックし、「Facebookフィード」を検索して、ドロップダウンからフィードを選択します。ショートコードを使用している場合は、「ショートコード」ブロックを追加して貼り付けます。

フィードをサイドバーに追加するには、外観 » ウィジェットに移動し、「ショートコード」ウィジェットを追加してショートコードを貼り付け、保存します。ページを公開すると、ライブのFacebookフィードが配置した場所に表示されます。

WordPressにFacebookいいねボタンを追加する方法

ページを埋め込むことは一つのことです。訪問者にワンクリックでフォローできる方法を提供することは別のことであり、それがFacebookいいねボタンの役割です。

私が運営してきたブログでは、「いいね！」ボタンは読者をフォロワーに変えるための最も簡単な方法でした。コメントや共有は労力がかかりますが、「いいね！」はクリック一つで、バックグラウンドで静かにあなたのページを成長させます。

WordPressには組み込みの「いいね！」ボタンがないため、追加する方法を2つ紹介します。コード不要の方法はSeedProdを使用します。手動の方法はFacebook独自のコードを使用します。

SeedProdでFacebookいいねボタンを追加する（コード不要）

方法1に従った場合、すでにSeedProdがインストールされており、ビルダーでページが開かれています。「いいね！」ボタンの追加は、さらに数回のクリックで完了します。

Facebookページブロックの横に、SeedProdのFacebookブロックを使用すると、あなたのページ、個々の投稿、コメント、およびスタンドアロンの「いいね！」ボタンを埋め込むことができます。

ボタンを追加するには、「高度なブロック」パネルから「Facebookいいね！」ブロックをページにドラッグします。

ブロックをクリックして設定を開き、ボタンの外観を正確に調整します。レイアウトを標準、ボタン、ボタン数、またはボックス数に設定できます。

同じパネルから、小または大のサイズを選択し、隣にFacebook共有ボタンをオンまたはオフに切り替えることができます。

また、ボタンを現在のページまたはカスタムURLに向けること、URL形式をプレーンパーマリンクと prettyパーマリンクの間で切り替えること、ボタンを左、右、または中央に配置することもできます。

「高度な」設定タブでは、ボタンのスペーシングを微調整したり、アニメーションを付けたり、モバイルとデスクトップでの表示を制御したりできます。すべてコードを書かずに実行できます。

注意：ボタンが正しく表示されるようにするには、SeedProd » 設定の下にFacebookアプリIDを追加してください。そのIDは、上記のアプリIDの手順で説明したのと同じ場所、developers.facebook.comのアプリダッシュボードから取得できます。

ボタンに満足したら、「保存」ボタンのドロップダウン矢印をクリックし、「公開」を選択します。

これで、ページにアクセスして、Facebook「いいね！」ボタンが機能しているのを確認できます。

コードでFacebookいいねボタンを手動で追加する

プラグインを使いたくない場合は、Facebook独自の「いいね！」ボタンコードをWordPressに貼り付けることができます。これにはいくつかの追加手順が必要なので、コードの編集に慣れている場合にのみお勧めします。

より安全にするために、WPCodeプラグインを使用します。これにより、テーマファイルを直接編集せずにコードスニペットを管理できるため、テーマの更新で削除されることはありません。

まず、Meta for Developersのウェブサイトにあるいいね！ボタンページにアクセスし、「いいね！するURL」までスクロールします。

「いいね！するURL」フィールドにFacebookページのURLを入力し、プレビューが正しく表示されるまでレイアウトとサイズを調整します。満足したら、「コードを取得」をクリックします。

JavaScript SDKとiFrameの2つのタブと2つのコードスニペットが表示されるポップアップが表示されます。JavaScriptオプションをクリックします。

次に、WPCodeプラグインをインストールして有効化します。その後、ダッシュボードのコードスニペット » ヘッダーとフッターに移動します。

Facebookから最初のスニペットをコピーし、「本文」セクションに貼り付けて、「変更を保存」をクリックします。

次に、実際にボタンを表示する2番目のスニペットを追加します。コードスニペット » + スニペットを追加に移動し、「カスタムコードを追加（新しいスニペット）」を選択してから、「スニペットを使用」をクリックします。

スニペットに名前を付け、「コードプレビュー」ボックスに2番目のFacebookスニペットを貼り付け、「コードタイプ」を「HTMLスニペット」に設定します。

「挿入」セクションまでスクロールして、ボタンが表示される場所を選択します。投稿の上に表示するには、「場所」ドロップダウンを開き、「ページ固有」の下にある「コンテンツの前に挿入」を選択します。

最後に、「スニペットを保存」をクリックし、トグルを非アクティブから「アクティブ」に切り替えます。ブログ投稿にアクセスすると、Facebookいいねボタンがコンテンツの前に表示されます。

WordPressにFacebookページを追加することに関するFAQ

WordPressでFacebookページを表示する最も簡単な方法は何ですか？

SeedProdのようなページビルダーをすでに使用している場合は、そのFacebookページブロックが最も簡単な方法です。それ以外の場合は、FacebookページプラグインツールにページのURLを貼り付け、コードをコピーして、カスタムHTMLブロックまたはウィジェットに追加します。

WordPressのサイドバーまたはフッターにFacebookページを追加するにはどうすればよいですか？

外観 » ウィジェットに移動し、サイドバーまたはフッターにカスタムHTMLブロックを追加して、Facebookページの埋め込みコードを貼り付け、保存します。

Facebookページの埋め込みが表示されないのはなぜですか？

ページが公開されていること、URLが正しいこと、およびスクリプトをブロックしているセキュリティプラグインやテーマ設定がないことを確認してください。それでも表示されない場合は、JavaScriptの代わりにFacebookのiFrameコードを使用してみてください。

WordPressにFacebookページを追加すると、サイトの速度が低下しますか？

Facebookのスクリプトはサイト外から読み込まれるため、低下する可能性があります。速度を維持するために、埋め込みをページの下部に配置し、表示するタブの数を制限し、キャッシュを使用してください。

Facebookいいねボタンとシェアボタンは同じですか？

いいえ、違います。いいねボタンはあなたのページを誰かのFacebookの「いいね」に追加しますが、シェアボタンはあなたのページをその人のタイムラインに公開します。SeedProdのFacebookいいねブロックを使用すると、両方を一緒に表示できます。

Facebookいいねボタンはどこに配置すべきですか？

通常、ランディングページの最下部か、ブログ投稿タイトルのすぐ下に配置します。どちらの場所も、サイドバーよりもクリック数が多い傾向があります。

次に、WordPressサイトをカスタマイズするその他の方法を発見する

このガイドが、WordPressにFacebookページを追加する方法を学ぶのに役立ったことを願っています。SeedProdを使用すると、WordPressサイトをカスタマイズする他の方法はたくさんありますが、1つの投稿にすべてを記載することはできません。

そこで、WordPressのカスタマイズに関するトップガイドをいくつかご紹介します。

• WordPressのメニューのスタイルを簡単にカスタマイズする方法3選
• カスタムWordPress著者ページを作成する方法（簡単な2つの方法）
• コンバージョンを促進するパーソナライズされたランディングページの作成方法
• WordPressにFacebook動画を埋め込む方法（簡単な3つの方法）
• WordPressでアニメーションParticle.js背景を作成する方法

お読みいただきありがとうございます！皆様のご意見をお聞かせいただければ幸いです。お気軽に会話にご参加ください YouTube, X および Facebook で、ビジネスを成長させるための役立つアドバイスやコンテンツをさらにご覧ください。