Prevent Javascript Facebook SDK Conflicts in plugin

I have plugin that uses Facebook’s Javascript SDK to display a Facebook’s Customer Chat Plugin.

I’ve been getting feedback that it doesn’t work well with other WordPress plugins that load the Facebook Javascript SDK.

This is the code Facebook provides to use for my Facebook SDK plugin: Customer Chat for Facebook

<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId            : 'your-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.js";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));
</script>

This is an example of a plugin that breaks mine: Simple Facebook Plugin

<script>
    (function(d){
        var js, id = 'facebook-jssdk';
        if (d.getElementById(id)) {return;}
        js = d.createElement('script');
        js.id = id;
        js.async = true;
        js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
        d.getElementsByTagName('head')[0].appendChild(js);
    }(document));
</script>

Question:
How can protect my Facebook SDK plugin from any other Facebook SDK plugins that loaded before it AND not interfere with any plugins that load after it?

Live Example

0

Leave a Comment