DiviにFacebook Messengerを追加する方法(サイトを壊さずに)

Updated on January 8, 2026
|
Written by サージャン・シャルマ Sajjan Sharma
DiviにFacebook Messengerを追加する方法(サイトを壊さずに)

リアルタイムチャットは、訪問者がページにアクセスした瞬間に信頼関係を築くための最も効果的な方法の1つです。

DiviにFacebookメッセンジャーを追加したい場合は、無料のWordPressチャットプラグインを使用するか、Metaチャットスクリプトをテーマオプションに直接貼り付けることで簡単に行うことができます。

開発者でない場合、Diviのコードモジュールをいじるのは怖いことだとわかっています。

コードの1行の配置ミスが、画面を真っ白にしたり、定期的なテーマの更新中に完全に消去されたりするのを見たことがあります。

最も安全なプラグインの方法と手動の方法の両方を紹介するので、あなたのビジネスに最適な方法を選択し、すぐに顧客とつながり始めることができます。

あなたのDiviウェブサイトでリアルタイムチャットが重要な理由

Facebookメッセンジャーを追加すると、訪問者は直接、人間と即座につながることができ、静的なDiviサイトがインタラクティブな体験に変わります。

調査によると、82%の消費者は、販売に関する質問がある場合に即時の応答を期待しており、ライブチャット全体で大規模な73%の満足度評価を誇っています。

ビジネス向けFacebook Messenger

Facebookメッセンジャーには13億人以上のアクティブユーザーがいるため、訪問者はあなたと話すためだけに新しいアプリをダウンロードしたり、新しいアカウントを作成したりする必要はありません。彼らはすでにプラットフォームにログインしている可能性が高いです。

クロスデバイス同期の利点

Messenger統合の最大の利点の1つは、プラットフォームがさまざまな画面間で会話を処理する方法です。

潜在的な顧客は、デスクトップウェブサイトで製品を閲覧しながら簡単にチャットを開始し、その日の後半に携帯電話でまったく同じ会話を終了できます。

Facebookチャットウィジェットの例

チャット履歴はMessengerアプリ内で自動的に同期されるため、コンピューターから離れたからといってリードを失うことはありません。

プラグイン対手動コード:どちらの方法があなたに適していますか?

どちらの方法でも、FacebookメッセンジャーチャットをDiviサイトで実行できます。しかし、特に開発者でない場合は、それらは同等ではありません。

それらを比較したサイドバイサイドの表示を次に示します。

要素プラグイン方法(WPChat)手動コード方法
セットアップ時間5分未満20〜40分
サイト破損のリスク非常に低い中〜高
テーマの更新を生き残るはい — プラグインはDiviから独立していますいいえ — コードは更新時に消去される可能性があります
視覚的なカスタマイズコントロールライブプレビュー付きのフルダッシュボード手動CSS編集が必要
必要な技術スキルなし中級〜上級
継続的なメンテナンスプラグインの自動更新手動でのコードチェックが必要

開発者でない場合、プラグイン方式が明確な選択肢となります。

代わりに、WPChatのようなプラグインを使用できます。これは、ビジュアルダッシュボードを通じてすべてを処理します。コード不要、レイアウトが壊れるリスクなし、Diviのアップデート後に作業が消える心配もありません。

WPChatがDiviユーザーにとって最良である理由

利用可能なすべてのオプションの中で、WPChatはDiviウェブサイトにとって最高のチャットプラグインであることがわかりました。

WPCHATプラグインのホームページ

Diviサイトで、WPChatを他の3つのチャットプラグイン(Tidio、Tawk.to、LiveChat)と比較テストしました。

Diviユーザーにとって重要なWPChatの主な機能

  • ガイド付きセットアップウィザード:WPChatは、技術的な知識を必要とせずに、10分以内にFacebook Messengerチャットをライブにするためのセットアッププロセス全体を段階的に案内します。
  • ワンクリックテーマを備えたライブカスタマイザー:プリセットテーマを選択してチャットの外観を即座に変え、コードに触れることなく色、フォント、レイアウトを微調整します。
Diviチャットのライブエディター
  • スマートルーティングによるマルチエージェントサポート:複数のチームメンバーを追加してチャットを処理し、WPChatが利用可能性に基づいて会話を適切な担当者に自動的にルーティングできるようにします。
  • 強力な表示制御:特定のページ、カテゴリ、または投稿タイプを選択することで、チャットが表示される場所を正確に決定できるため、意味のない場所にチャットを表示することはありません。
  • 組み込み分析ダッシュボード:応答時間、顧客行動、満足度メトリクスを追跡して、何が機能しているかを確認し、サポートを継続的に改善します。
WPChatプラグインのアナリティクス機能

セットアッププロセスは10分未満で完了し、WPChatはコードの変更を必要とせずにDiviとシームレスに統合されます。

さらに、WPChatはテーマを更新してもアクティブなままなので、チャット機能が失われることはありません。

Diviサイトでの訪問者とのつながり方を変える準備はできましたか?

今すぐWPChatを入手して、インスタントサポートの提供を開始してください。

DiviにFacebook Messengerチャットを追加する方法(プラグインを使用)

Facebook MessengerチャットがDiviでうまく機能する理由を理解したところで、正確なセットアッププロセスを説明します。

迅速かつ簡単なプロセスで、わずか数分で強力なチャットシステムが準備できます。

ステップ1:WPChatプラグインのインストールと有効化

まず、WPChatプラグインを入手する必要があります。WPChatのウェブサイトにアクセスして、ニーズに合ったプランを入手してください。

プラグインファイルをダウンロードしたら、ウェブサイトにインストールして有効化してください。

ヘルプが必要な場合は、WordPressプラグインのインストール方法に関するステップバイステップガイドを参照してください。

ステップ2:WPChatの初期設定を完了する

次に、新しいプラグインを設定します。WordPressダッシュボードからWPChatメニュー項目を開きます。

ウェルカム画面にセットアップボタンが表示されます。それをクリックするだけでセットアップを開始できます。

wpchatの設定を開始する

その後、プラグインでこのチャットアシスタントをFacebookに接続できるようになります。

そのためには、ブランドのFacebookページのユーザー名を入力してください。

WhatsApp(Meta所有)やInstagram、Telegramなど、他のメッセージングアプリもここから接続できます。

最後に、下にスクロールして次へボタンをクリックします。

接続を確認するには次へをクリックします

次の画面で、チャットウィジェットの外観テーマを選択できるようになります。

WPChatは、さまざまなウェブサイトのスタイルに合わせた、いくつかの既成のテーマを提供しています。

  • ベーシック
  • ナイト
  • パステル

Diviのデザインを最も引き立てるものを選び、次へをクリックして続行してください。

Divi Messengerチャットウィジェットのテーマを選択

ステップ3:Facebookメッセンジャーチャットウィジェットの表示を選択

このステップでは、チャットウィジェットがDiviサイトのどこに表示されるかを正確に制御できます。考慮すべき主なオプションは2つあります。

  • すべてのページに表示は、ウェブサイト全体にチャットウィジェットを表示し、訪問者がサポートに一貫してアクセスできるようにします。
  • 特定のページにのみ表示を使用すると、チャットバブルを表示するページを正確に選択できます。
Divi Facebook Messengerウィジェットを表示する場所を選択

それが完了したら、以下のフィルターを使用して、Messengerチャットオプションを表示するためのさらに詳細な制御を行うことができます。

ページ、カテゴリ、タグ、またはカスタム投稿タイプに基づいてフィルターを追加できます。 

たとえば、チャットを商品ページまたはお問い合わせページにのみ表示したい場合があります。または、ブログセクションからチャットオプションを除外することもできます。

表示設定を行った後、次へをクリックしてください。 

ページ、カテゴリ、タグ、またはカスタム投稿タイプを選択してください

最後のセットアップ画面で、WPChatライセンスキーを入力します。このキーは、WPChatのアカウントページで確認できます。

ここにキーを入力し、セットアップ完了ボタンをクリックして完了してください。 

セットアップを完了するには、wpchatライセンスキーを入力してください

これで、Facebook MessengerチャットウィジェットがDiviサイトでアクティブになりました。

サイト上の誰でも、フローティングボタンをクリックするだけでFacebookチャットウィジェットを開くことができます。

Facebook Messengerチャットボタンの例

ステップ4:最適な印象を与えるためにMessengerウィジェットをカスタマイズする

基本的なセットアップが完了したので、チャットウィジェットをDiviウェブサイトに最適な外観にしましょう。 

まず、WPChatダッシュボードのカスタマイズボタンをクリックします。

Diviチャットウィジェットのカスタマイズを開始

これによりライブエディタが開かれ、さまざまなカスタマイズオプションを備えたパネルが表示されます。

Diviエディタと同様に、ライブプレビューが表示されるため、チャットウィジェットのデザインが簡単になります。

ここでは、いくつかのカスタマイズオプションを見ていきましょう。

Messengerチャットアシスタントのライブカスタマイザー

アシスタントアバターのパーソナライズ

まず、チャットウィジェットにフレンドリーな顔を追加したいでしょう。 

そのため、カスタマイズメニューのアシスタントアバターオプションをクリックします。

アシスタントアバターのカスタマイズを開始する

ここでは、いくつかの既成のアバターから選択できます。

独自の画像を使用したい場合は、代わりに独自の画像を追加ボタンをクリックしてください。 

カスタムアシスタントアバターを追加する

アップロードボタンを使用して、メディアライブラリまたはコンピューターから画像を追加します。

アバターの名前を入力し、追加をクリックして保存するだけです。 

カスタムアシスタントアバターを追加する

これで、保存をクリックして新しいアシスタントアバターを確認できます。

それが完了したら、戻るボタンをクリックしてメインのカスタマイズ画面に戻ります。

WPChatプラグインのメインカスタマイズオプションに戻る

表示セクションの編集

次に、Messengerウィジェットのさまざまなセクションを制御できます。

カスタマイザーの左側にある「セクション」オプションを探してください。

Instagramチャットアシスタントの表示セクション

ここから、ワンクリックでセクションを表示または非表示にすることを選択できます。

セクションを上下に移動させて、FAQオプションのメッセージング機能に焦点を当てることもできます。

メインの2つのセクションのそれぞれをクリックして、さらにカスタマイズしてください。

Diviウィジェットの表示セクションを編集

ウィジェットに満足したら、「保存」をクリックして変更を保存します。

ご覧のとおり、このカスタマイザーは、デザインやコーディングの経験がなくても非常に簡単に使用できます。

ステップ5:複数のチャットエージェントを設定する(チーム管理)

顧客からの問い合わせに対応するチームがいる場合、WPChatを使用すると、サポートチームを代表するさまざまなエージェントを作成できます。

各エージェントには名前とプロフィール写真を設定でき、訪問者にとって会話がより人間味のあるものになります。

エージェントを設定するには、WordPressダッシュボードから「WPChat » エージェント」メニューを開きます。

プラグインの設定時に作成されたデフォルトのエージェントが表示されます。

このエージェントの横にある「編集」をクリックして、情報を変更してください。

チャットエージェントの編集を開始

プロフィール写真をアップロードするには、「アップロード」をクリックして、コンピューターから画像を選択してください。

プロフェッショナルな顔写真は、訪問者との信頼関係を築くのに役立ちます。または、会社のアイコンやマスコットを使用して、会話を公式なものにすることもできます。

Facebook Messengerチャットエージェントのプロフィール写真の設定を開始する

次に、下のフィールドにエージェントの「名前」を入力します。

個人の実名を使用して人間味を加えるか、すべてのサポートスタッフに共通の名前を使用できます。

チャットエージェントの名前を入力する

下にスクロールすると、この特定のチャットエージェントの連絡先情報を変更することもできます。

エージェントの設定が完了したら、「変更を保存」をクリックします。

その後、新しいエージェントを追加し、チャット会話を処理する各チームメンバーに対してこのプロセスを繰り返すことができます。

最後に、ウェブサイトを開いて、新しいMessengerチャットウィジェットをテストしてください。

Facebook Messengerボタンのポップアップアシスタント

結論

ご覧のとおり、WPChatを使用してDivi WordPressサイトにFacebook Messengerを追加するのは、驚くほど簡単です。

主なポイント

これで、DiviサイトにFacebook Messengerチャットを追加する最も安全で最も簡単な方法がわかりました。WPChatを使用すると、すべての操作をビジュアルダッシュボードで行うことができます。

チャットバブルが表示される場所を正確に制御する方法、サイトに合わせてブランド設定する方法、チャットエージェントを設定する方法も確認しました。

訪問者とリアルタイムでつながり始めましょうか? 今すぐWPChatを始めましょう

よくある質問

MessengerをDiviに追加するにはFacebookビジネスページが必要ですか?

はい、MessengerチャットをDiviサイトに追加するにはFacebookビジネスページが必要です。Messengerチャットウィジェットは、ページの受信トレイに直接接続します。個人のFacebookプロフィールには接続できません。

まだお持ちでない場合は、Facebook独自のセットアップガイドを使用して、数分でFacebookページを作成できます。

チャットウィジェットを追加すると、Diviウェブサイトが遅くなりますか?

WPChatをDiviサイトに追加しても、目立った速度低下はありません。WPChatは非同期で読み込まれます。つまり、チャットウィジェットは、訪問者にとってページの残りの部分が表示された後にバックグラウンドで読み込まれます。

ページのコンテンツが常に最初に読み込まれ、他のすべてが準備できたときにウィジェットが静かに表示されます。

MessengerチャットをDiviの1つのページにのみ追加できますか?

はい、チャットウィジェットを1つのページにのみ表示できます。WPChatの表示制御(このウォークスルーのステップ3で説明)により、特定のページ、タグ、カテゴリ、またはカスタム投稿タイプをターゲットにすることができます。

Facebook MessengerチャットはDiviのモバイルレイアウトで動作しますか?

はい、WPChatウィジェットはDiviのモバイルレイアウトで完全に動作します。フローティングチャットバブルはデフォルトでレスポンシブであり、デスクトップモニターからスマートフォンまで、あらゆる画面サイズに自動的に調整されます。

さらに、前述のクロスデバイス同期の利点により、訪問者はモバイルで会話を開始し、メッセージを失うことなくデスクトップで再開できます。