Есть ли способ определить, успешно ли загружен Javascript SDK для Facebook?

Я использую Facebook как систему членства на моем веб-сайте. Он использует код для создания элемента управления входами, что позволяет пользователям регистрироваться через свою учетную запись на facebook. Это по сути один клик, если они уже являются членами, 2, если они не являются (для предоставления разрешений).

У меня возникла проблема, хотя... обратная связь предполагает, что кнопка входа не всегда правильно загружается. Вместо того, чтобы загружать контроль входа в facebook, он просто указывает (в тексте) "логин через facebook" - это то, что кнопка входа в систему сообщит, если элемент управления загружен успешно.

Тестирование показывает, что это происходит, когда фреймворк javascript SDK полностью не загружается (по какой-либо причине). Я видел экземпляры, где # в URL-адресе не позволяет загружать SDK.

Чтобы лучше поддерживать эту проблему, как я могу узнать, загружен ли загрузочный фреймворк javascript в facebook и готов ли он? Таким образом, если это не удается, я могу оставить для пользователя заметку.

Вот как он в настоящее время добавляется на страницу:

<script>
window.fbAsyncInit = function () {
FB.init({
  appId: '***************',
  status: true,
  cookie: true,
  xfbml: true
});
FB.Event.subscribe('auth.login', function (response) {
  window.location.reload();
});

};
(function () {
  var e = document.createElement('script'); e.async = true;
  e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
  document.getElementById('fb-root').appendChild(e);
} ());

</script>

Ответ 1

Вы должны загрузить Javascript Library асинхронно и поместить все связанные с FB функции внутри метода window.fbAsyncInit:

<div id="fb-root"></div>
<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId      : 'YOUR_APP_ID', // App ID
      channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html', // Channel File
      status     : true, // check login status
      cookie     : true, // enable cookies to allow the server to access the session
      xfbml      : true  // parse XFBML
    });

    // Additional initialization code here
  };

  // Load the SDK Asynchronously
  (function(d){
     var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement('script'); js.id = id; js.async = true;
     js.src = "//connect.facebook.net/en_US/all.js";
     ref.parentNode.insertBefore(js, ref);
   }(document));
</script>

Этот код загружает SDK асинхронно, поэтому он не блокирует загрузку другие элементы вашей страницы. Это особенно важно для обеспечения быстрые загрузки страниц для пользователей и роботов SEO.

URL-адреса вышеуказанного кода относятся к протоколу. Это позволяет браузер для загрузки SDK по тому же протоколу (HTTP или HTTPS) в качестве содержащую страницу, которая предотвратит предупреждения "Insecure Content".

Функция, назначенная window.fbAsyncInit, запускается, как только SDK загружается. Загружается любой код, который вы хотите запустить после SDK. должен быть помещен в эту функцию и после вызова FB.init. Например, здесь вы проверите статус вошедшего в системупользователь или подписаться на любые события в Facebook, в которых ваша заявка интересно.

Быстрый пример:

<div id="fb-root"></div>
<script>
  var isLoaded = false;
  window.fbAsyncInit = function() {
    FB.init({
      appId      : 'YOUR_APP_ID', // App ID
      channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html', // Channel File
      status     : true, // check login status
      cookie     : true, // enable cookies to allow the server to access the session
      xfbml      : true  // parse XFBML
    });
    isLoaded = true;

    // Additional initialization code here
  };

  function checkIfLoaded() {
    if(isLoaded) console.log("LOADED!");
    else console.log("NOT YET!");

    return false;
  }

  // Load the SDK Asynchronously
  (function(d){
     var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement('script'); js.id = id; js.async = true;
     js.src = "//connect.facebook.net/en_US/all.js";
     ref.parentNode.insertBefore(js, ref);
   }(document));
</script>
<a href="#" onclick="checkIfLoaded();">Check</a>

(Просто нажал ссылку check пару раз)

Обратите внимание, что вы все равно можете создать серверную ссылку для входа в систему и БЕЗ JavaScript. Пример с помощью PHP-SDK:

$loginUrl = $facebook->getLoginUrl();
...
...
<a href="<?php echo $loginUrl; ?>">
    <img src="http://static.ak.fbcdn.net/rsrc.php/zB6N8/hash/4li2k73z.gif">
</a>

Ответ 2

Запуск события при загрузке SDK:

window.fbAsyncInit = function() {
  FB.init({appId: "#{KeyManager.facebook_app_id}", status: true, cookie: true, xfbml: true});
  jQuery('#fb-root').trigger('facebook:init');
};

И поймайте событие следующим образом:

$("#fb-root").bind("facebook:init", function() {
  ..
}

Ответ 3

Просто найдите объект FB после загрузки FB JS SDK sync/async, как указано:

            if (typeof FB !== 'undefined') {
                alert("FB JS API is available now");
            } else {alert("do something...")}

Это достаточно проверить, чтобы безопасно использовать любой связанный с JS API-интерфейс Facebook.

Ответ 4

Какие глобальные переменные делает этот JS файл?

Скажем, он создает

var FaceBook = function() {//make friends! Or whatever...}

Вы можете проверить if (FaceBook) и перейти оттуда.

Кажется вероятным, что они дают вам какое-то событие загрузки, когда, например, загружается их фреймворк.

Ответ 5

В соответствии с этой страницей http://www.techsirius.com/2014/04/detect-social-SDK-didnt-load.html

$(window).load(function(){
   if(typeof window.FB == 'undefined'){
       alert('Facebook SDK is unable to load, display some alternative content for visitor');
   }
   else{
      alert('Facebook is working just fine');
   }
});

Ответ 6

Если вы используете jQuery (и вы загрузили jQuery до инициализации FB), вы можете использовать команду "Отложен" для запуска дополнительной инициализации.

<script>
    window.fbLoaded = $.Deferred();

    window.fbAsyncInit = function() {

        FB.init({
            appId      : '----------',
            xfbml      : true,
            status     : true,
            version    : 'v2.7'
        });

        window.fbLoaded.resolve();
    };


    (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 = "//connect.facebook.net/en_US/sdk.js";
        fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));

</script>

Затем в другом месте (в JS файле) вы можете сделать это:

 window.fbLoaded.done(function () { alert('FB initialized'); });

Примечание. Если вызов resolve происходит до того, как вы добавите событие done, он будет немедленно запущен (так работают Отсрочки).

Ответ 7

Загрузите script динамически (добавьте тег script из js) и проверьте наличие ошибок/успешных событий.

Ответ 8

var FB;
jQuery.fbInit = function(app_id) {
    window.fbAsyncInit = function() {
        FB.init({
            appId      : app_id, 
            status     : true, 
            channelUrl: '#', 
            cookie     : true, 
            xfbml      : true  
        });
        FB = FB;
        getLoginStatus();
    };
    // Load the SDK Asynchronously
    (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/it_IT/all.js";
        d.getElementsByTagName('head')[0].appendChild(js);
    }(document));

    $('<div />').attr('id','fb-root').appendTo('body');
};

/**
 * https://developers.facebook.com/docs/reference/javascript/FB.getLoginStatus/
 */
function getLoginStatus() {
    FB.getLoginStatus(function(response) {
        if (response.status === 'connected') {
            $('#fb-root').trigger('facebook:init',[response]);
        } else if (response.status === 'not_authorized') {
            $('#fb-root').trigger('facebook:init',[response]);
        } else {
            $('#fb-root').trigger('facebook:init',[response]);
        }
    });
}

Если вы хотите проверить статус с другого javascript (с предложением @Leo Romanovsky)

 $("#fb-root").on("facebook:init", function(event, response) {
        if(response.status === 'connected') {
            alert("logged with FB")
        }else{
            alert("No Logged with FB")
        }

    });

Ответ 9

Я использую это из нескольких дней:

var isLoaded = false;

$(document).on('DOMSubtreeModified', function () {
    if ($('#fb-root').length && !isLoaded) {
        isLoaded = true;

        // ...
    }
});

Как вы думаете?

Ответ 10

Как указано в других ответах; с благодарностью @ifaour и @Leo Romanovsky; лучший способ определить, успешно ли загружен SDK, - инициировать событие при вызове fbAsyncInit.

Если событие захвачено, загрузится SDK. В приведенном ниже коде показано, как это может быть достигнуто:

<div id="fb-root"></div>
<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId      : 'YOUR_APP_ID', // App ID
      status     : true, // check login status
      cookie     : true, // enable cookies to allow the server to access the session
      xfbml      : true  // parse XFBML
    });

    // Fire an event when the FB library asynchronously is loaded
    $("#fb-root").trigger("facebook:init");

    // Additional initialization code here
  };

  // Load the SDK Asynchronously
  (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 = "//connect.facebook.net/en_US/sdk.js";
    fjs.parentNode.insertBefore(js, fjs);
  }
  (document, "script", "facebook-jssdk"));
</script>

// Somewhere else in the code
$(document).ready(function () {
    $("#fb-root").bind("facebook:init", function () {
        console.log("The event is fired FB SDK object is ready to be used.");
    });
});

Если событие не запущено, вы можете добавить таймер, чтобы проверить, есть ли объект FB 'undefined' и показать соответствующее сообщение.

Примечание 1: Внизу может произойти небольшая задержка до тех пор, пока это событие не будет запущено.

Примечание 2: "указывает, что кнопка входа в систему не всегда правильно загружается". Я знаю, что закрытый просмотр FFv49 блокирует вызов fb.

Ответ 11

версия на основе Promise для современных браузеров

// Load Facebook JS SDK
(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#xfbml=1&version=v2.11';
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

// Create a new promise, set to resolve using the global function `fbAsyncInit`,
// which the Facebook JS SDK will call once it ready.
(new Promise((resolve, reject) => {
  window.fbAsyncInit = resolve;
}).then(() => {
  // ... your code here ...
});