新しいウェブサイトの立ち上げが終わると、私はいつも次のステップとしてソーシャルメディア・チャンネルを統合する。これは、初日からオーディエンスを構築するための基礎となる部分だ。
あなたのサイトとFacebookページが別々の世界であることは、簡単なエンゲージメントとフォロワーを逃していることを意味します。
そこで今回は、WordPressにFacebookページを追加する最も確実な3つの方法をご紹介します。フィードを表示し、フォロワーを増やし、オンラインでよりつながりのあるブランドを作ることができるようになる。
なぜWordPressにFacebookページを追加するのか？
ローカルビジネスやコミュニティページを運営している場合、訪問者はすでに毎日Facebookを利用しています。Facebookページを自社サイトに直接追加すれば、訪問者は離脱せずに「いいね！」やフォローが可能です。この摩擦のない瞬間こそが、ソーシャルメディアの成長が実際に起こる場なのです。
また、ブランドを同時に2か所で可視化できるため、Google経由で初めて訪れたユーザーが、同じセッション内でSNSでもつながることができます。ローカルビジネスにとって、検索での可視性とSNSでのつながりを両立させるこの組み合わせは、非常に効果的です。
次に、その追加方法を順を追って説明しよう。
方法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の取得はわずか数分で完了します。手順は以下の通りです：
- developers.facebook.com/appsにアクセスし、Facebookアカウントでログインしてください。
- 「アプリを作成」をクリックし、プロンプトが表示されたらコンシューマーアプリの種類を選択してください。
- アプリ名と連絡先メールアドレスを入力し、セットアップウィザードを完了してください。
- アプリが作成されると、アプリダッシュボードの上部にApp IDが表示されます。これをコピーし、SeedProdの「ページ設定」フィールドに貼り付けてください。
Facebookページブロックの追加設定には、以下の機能があります：
- 小さなヘッダーを有効にする
- カバー写真を隠す
- プロフィール写真を表示する
- CTAボタンを隠す
- Facebookウィジェットの高さを変更する
- ウィジェットの配置を調整する
タイムライン、イベント、メッセージなど、さまざまなタイプのFacebookフィードを表示することもできる。
このブロックの素晴らしいところは、「いいね！」と「シェア」ボタンが自動的に含まれるため、ユーザーがあなたのソーシャルメディア・コンテンツを他のプラットフォームで簡単にシェアできることです。
ステップ4.WordPressページをカスタマイズする
Facebookページのフィードを設置したら、ランディングページの残りの部分のカスタマイズを続けましょう。以下のようなアイデアがあります：
- メールアドレスを収集するためのオプトインフォームの追加
- 信頼性を高めるために、満足した顧客からの声を掲載する。
- Facebookグループへの参加ボタンの追加
- ウェルカムビデオを埋め込んで、初めての訪問者を惹きつける
ランディングページのカスタマイズに関する詳しい説明は、WordPressでランディングページを作成する方法のステップバイステップガイドをご覧ください。
ステップ5.変更を保存する
ページが完成したら、画面右上の「保存して 公開」ボタンをクリックします。
では、そのページを訪れて、どのように見えるかをご覧ください。
方法2：プラグインを使わずにWordPressにFacebookページを追加する
それでは、WordPressにFacebookページを追加するもうひとつの効果的な方法、Facebookページ・プラグインを使う方法をご紹介しましょう。
この方法も比較的簡単だが、WordPressページビルダーほどカスタマイズできない。また、コードスニペットをサイトにコピー＆ペーストする必要がある。
ステップ1.Facebookページ・プラグインを入手する
まず、Facebook Page Pluginのウェブサイトにアクセスします。ここでページの詳細を入力し、ウェブサイトに埋め込むためのコードを生成します。
ステップ2.Facebookページプラグインを設定する
プラグインのページには、Facebookページについての詳細を入力するフォームがあります。
FacebookページのURLを貼り付けたり、プラグインの幅と高さをカスタム入力したり、カバー写真を非表示にしたりすることができます。
ステップ3.Facebookページの埋め込みコードを作成する
必要事項を入力後、「コードを取得」ボタンをクリックしてください。
Facebookは、あなたのウェブページに貼り付けるためのJavascriptとiFrameコードを生成します。ポップアップウィンドウでiFrameオプションを選択し、埋め込みコードをコピーしてください。
ステップ4.Facebookページの埋め込みコードをWordPressに追加する
さて、いよいよWordPressブログにこのコードを追加しよう。多くのサイトでは、新規投稿やサイドバー・ウィジェットにFacebookアカウント・ページを表示しているので、その方法を見てみよう。
WordPressの管理画面から「外観」タブを開き、「ウィジェット」を選択します。
次に、プラスアイコンをクリックして新しいWordPressブロックを追加し、カスタムHTMLまたはテキストウィジェットを見つけます。このウィジェットをFBページを表示させたい場所に追加します。
最後に、Facebookが生成したHTMLコードをコピーして、ウィジェット・エリアに貼り付ける。
保存ボタンをクリックして変更を適用します。これで、FacebookページがWordPressのサイドバーに表示されるはずです。
代わりにページや投稿に追加するには、ブロックエディタでページを開き、+ボタンをクリックして新しいブロックを追加します。「カスタムHTML」を検索し、そこに埋め込みコードを貼り付けます。ページを公開すると、Facebookフィードが配置した場所に表示されます。
表示されない場合？まず、Facebookページが公開されていることと、入力したURLが正しいことを確認してください。セキュリティやキャッシュプラグインが外部スクリプトをブロックしている可能性があるため、一時的に無効にしてテストしてみてください。FacebookのJavaScript埋め込みがブロックされることがあるため、その場合はステップ3のiFrameコードに切り替えてください。また、埋め込み先のドメインがFacebookアプリ設定で登録されているドメインと一致していることを確認してください。
方法3：プラグインでFacebookフィードをWordPressに追加する
Facebookに投稿すると自動的に更新される、動的でスタイリッシュなフィードをお望みなら、Smash BalloonのカスタムFacebookフィードプラグインが最適です。この用途で最も人気のあるソリューションであり、既存のページ、投稿、サイドバーのいずれもに機能します。
Facebookフィードプラグインを使えば、コードを書かずに、フィルター機能付きの美しいFacebook投稿ギャラリーを表示できます。設定方法は以下の通りです。
ステップ1. カスタムFacebookフィードプラグインをインストールする
WordPressのダッシュボードで、[プラグイン] ＞ [新規追加]に移動し、「Smash Balloon製 Custom Facebook Feed」を検索してください。無料版をインストールして有効化してください。
有効化すると、ダッシュボードに新しい「Facebookフィード」メニュー項目が表示されます。
ステップ2. Facebookアカウントを接続する
Facebookフィード » 新規追加をクリックして設定ウィザードを開始します。Facebookアカウントの接続を求められます。「Facebookに接続」をクリックし、必要に応じてログインして、プラグインがページにアクセスする権限を許可してください。
このプラグインは読み取りアクセス権のみを要求するため、あなたの投稿を表示することはできますが、あなたに代わって投稿することはできません。
ステップ3. Facebookページを選択する
接続後、管理しているFacebookページのリストが表示されます。表示したいページを選択し、「次へ」をクリックしてください。ウィザードでフィードの種類（タイムライン、写真、イベント、動画）を選択できます。サイト上での表示プレビューも可能です。
ステップ4. ショートコードをコピーするか、ブロックを追加する
フィードの設定が完了すると、Smash Balloonは次のようなショートコードを提供します： [custom-facebook-feed]専用の フェイスブック・フィード WordPressのブロックエディターを使用している場合はブロックを挿入してください。
フィードを保存し、ショートコードまたはブロック名をメモしてください。次のステップでフィードをサイトに配置する際に使用します。
ステップ5. フィードをページに配置する
フィードを表示したいページまたは投稿を開きます。ブロックエディタを使用している場合は、+ボタンをクリックし、「Facebookフィード」を検索して、ドロップダウンからフィードを選択します。ショートコードを使用している場合は、ショートコードブロックを追加し、そこに貼り付けます。
サイドバーにフィードを追加するには、[外観] » [ウィジェット] に移動し、ショートコードウィジェットを追加してショートコードを貼り付け、保存してください。ページを公開すると、配置した場所にライブFacebookフィードが表示されます。
WordPressにFacebookページを追加するFAQ
次は、WordPressサイトをカスタマイズする方法をさらに紹介する。
このガイドがWordPressにFacebookページを追加する方法を学ぶのにお役に立てば幸いです。SeedProdを使用してWordPressサイトをカスタマイズする方法は他にもたくさんあり、とても1つの記事では紹介しきれません。
そこで、WordPressのカスタマイズガイドをいくつかご紹介します：
- WordPressのメニュースタイルを3つの簡単な方法でカスタマイズする方法
- WordPressカスタムオーサーページの作り方（2つの簡単な方法）
- コンバージョンを高めるパーソナライズされたランディングページの作り方
- WordPressにFacebookの動画を埋め込む方法（3つの簡単な方法）
- WordPressでParticle.jsのアニメーション背景を作成する方法
お読みいただきありがとうございました！あなたのご意見をぜひお聞かせください。YouTube、X、Facebookで、あなたのビジネスを成長させるために役立つアドバイスやコンテンツを提供していますので、お気軽に会話にご参加ください。
