Facebook Messenger Customer Chat Plugin not appear

问题:

I have integrated Facebook Customer Plugin on one of our websites. I followed the instructions in the developer documentation. It is working fine when there is an active facebook session. However, the plugin does not appear at all when there is no active fb session. I might be missing something but I have no clue on what that is.

回答1:

The solution for me was adding #xfbml=1&version=v2.12&autoLogAppEvents=1 after the xfbml.customerchat.js file like :

js.src = 'https://connect.facebook.net/en_US/sdk/xfbml.customerchat.js#xfbml=1&version=v2.12&autoLogAppEvents=1';

回答2:

i solved my problem using this script :

<div class="fb-customerchat"
 page_id="<ENTER-YOUR-FACEBOOK-ID-HERE>"
 minimized="true">
</div>
<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId            : 'facebook-developer-app-id',
      autoLogAppEvents : true,
      xfbml            : true,
      version          : 'v2.11'
    });
  };
(function(d, s, id){
     var js, fjs = d.getElementsByTagName(s)[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement(s); js.id = id;
     js.src = "https://connect.facebook.net/en_US/sdk/xfbml.customerchat.js";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));
</script>

<!-- Your customer chat code -->
<div class="fb-customerchat"
  attribution=setup_tool
  page_id="your-page-id"
  theme_color="#BE59B9">
</div>

Another case might be that, fb messenger only show when it it hosted, not locally.

For more info have a deep look at doumentation: https://developers.facebook.com/docs/messenger-platform/discovery/customer-chat-plugin

回答3:

It is May 2018 now, the instruction in Page --> Settings --> Messenger platform --> Customer chat plugin is much more clear.

Plus checking Country Restrictions

回答4:

I only added this code to the customer chat code provided in the page's settings:

    window.fbAsyncInit = function() {
    FB.init({
      appId            : '1175565702494581', // Trokis Philippines App ID; you may use your App ID but this App ID might work on you too.
      autoLogAppEvents : true,
      xfbml            : true,
      version          : 'v2.11'
    });
  };

Original Code:

    <script>
(function(d, s, id){
     var js, fjs = d.getElementsByTagName(s)[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement(s); js.id = id;
     js.src = "https://connect.facebook.net/en_US/sdk/xfbml.customerchat.js";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));
</script>

<!-- Your customer chat code -->
<div class="fb-customerchat"
  attribution=setup_tool
  page_id="{your-page-id}"
  theme_color="#BE59B9">
</div>

Final Code:

<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId            : '1175565702494581',
      autoLogAppEvents : true,
      xfbml            : true,
      version          : 'v2.11'
    });
  };
(function(d, s, id){
     var js, fjs = d.getElementsByTagName(s)[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement(s); js.id = id;
     js.src = "https://connect.facebook.net/en_US/sdk/xfbml.customerchat.js";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));
</script>

<!-- Your customer chat code -->
<div class="fb-customerchat"
  attribution=setup_tool
  page_id="{your-page-id}"
  theme_color="#BE59B9">
</div>

回答5:

Well, shamelessly it was the "Whitelisted Domains" that I didn't operate right.
After you insert your domain you should click "Save"...

回答6:

At first I tried with a code generated by Facebook Customer Chat Plugin wizard - no luck. To make it work I had to add FB.init section providing valid developer appId:

  <script>
    window.fbAsyncInit = function() {
        FB.init({
            appId            : 'YOUR-APP-ID-HERE',
            autoLogAppEvents : true,
            xfbml            : true,
            version          : 'v2.11'
        });
    };
    (function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.src = 'https://connect.facebook.net/pl_PL/sdk/xfbml.customerchat.js';
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));</script>

  <!-- Your customer chat code -->
  <div class="fb-customerchat"
    attribution=setup_tool
    page_id="YOUR-PAGE-ID-HERE"
    theme_color="#ed1d24"
    logged_in_greeting="Hello, how can we help you?">
  </div>

You can find more info on the Facebook Customer Chat Plugin here

回答7:

For me problem was, that i had whitelisted non www domain, but opened it through www. Both cases should be added as whitelist cases.

回答8:

If you are using brave and probably debugging the site with included messenger plugin code. Most likely you'll find setting Block cross-site trackers to be disabled, Block scripts to be disabled, Cookies to be Allow all cookies, and lastly Fingerprinting to Allow all fingerprinting be helpful.

Once you changed the settings and you find that you have no problem in your code, then it will be most likely to work.

回答9:

Found a solution. If anyone encounters this, please check your Facebook Page's Country Restrictions (Settings->General->Country Restrictions). It must be available everywhere in order for the plugin to render even if there is no active session