有没有办法检测 Facebook Javascript SDK 是否成功加载?

本文介绍了有没有办法检测 Facebook Javascript SDK 是否成功加载?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我使用 Facebook 作为我网站的会员系统.它使用代码生成登录控件，允许用户通过他们的 facebook 帐户登录.如果他们已经是成员，则基本上只需单击一次，如果不是，则单击 2(用于授予权限).

我遇到了一个问题...反馈表明登录按钮并不总是正确加载.它没有加载 facebook 登录控件，而是简单地声明(以文本形式)通过 facebook 登录"——如果控件成功加载，登录按钮会显示此信息.

测试表明，当 facebook javascript SDK 无法完全加载(无论出于何种原因)时会发生这种情况.我见过一些实例，其中 url 中的 # 会阻止 SDK 加载.

为了更好地支持这个问题，我将如何检测 facebook javascript SDK 是否已加载并准备好?这样，如果它失败了，我可以给用户留下一些注释.

这是当前添加到页面的方式:

window.fbAsyncInit = function () {FB.init({appId: '***************',状态:真实，饼干:真的，xfbml: 真});FB.Event.subscribe('auth.login', function (response) {window.location.reload();});};(功能 () {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);} ());</脚本>

解决方案

你应该加载的示例:

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

I use Facebook as the membership system of my website. It uses the code to generate a login control, allowing users to login via their facebook account. It's essentially one click if they're already a member, 2 if they're not (for granting permissions).

I got a problem though... feedback is suggesting the login button isn't always loading correctly. Instead of loading the facebook login control, it simply states (in text) "login via facebook" - which is what the login button would say if the control loaded successfully.

Testing shows that is what happens when the facebook javascript SDK fails to load completely (for whatever reason). I've seen instances where a # in the url prevents the SDK from loading.

To better support this issue, how would I go about detecting if the facebook javascript SDK loaded, and is ready? That way, if it fails, I can leave some sort of note for the user.

Here's how it's currently added to the page:

<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>

解决方案

You should load the Javascript Library Asynchronously and put all your FB related functions inside the window.fbAsyncInit method:

<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>

A quick example is the following:

<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>

(Just clicked the check link a couple of times)

Please note that you can still construct the Login Link server-side and WITHOUT JavaScript. Example using the PHP-SDK:

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

这篇关于有没有办法检测 Facebook Javascript SDK 是否成功加载?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！