如何修改FB.login()的display type？Facebook登录弹窗问题求助

嘿，我来帮你搞定这个Facebook登录的弹窗问题！先给你拆解一下警告信息的意思：它说你现在用了page类型的display模式，这种模式是给全屏页面设计的，放在弹窗里就会导致尺寸过大，而Facebook的JS SDK其实能自动根据当前环境（比如是全屏页面还是弹窗）选择最合适的display类型，所以我们要做的就是让SDK自己来处理这件事。

下面是具体的解决步骤：

1. 检查SDK初始化代码，移除手动指定的display参数 #

首先去看你初始化Facebook SDK的代码（一般是FB.init()那部分），如果里面手动设置了display: 'page'，直接把这行删掉就行。比如原来的初始化代码可能是这样：

FB.init({
  appId: '你的应用ID',
  autoLogAppEvents: true,
  xfbml: true,
  version: 'v18.0',
  display: 'page' // 就是这行搞的鬼，删掉它！
});

删掉display参数后，SDK会自动根据当前环境选择popup、touch或者page类型，弹窗的尺寸也会自动适配。

2. （可选）手动指定display为popup类型 #

如果你想强制让登录弹窗用适配弹窗的模式，也可以直接在FB.login的选项里添加display: 'popup'参数，修改你的代码如下：

export function facebookLogin() { 
  return new Promise((res: any, rej: any) => { 
    FB.login((response: FacebookLoginCallbackResponse) => { 
      if (response.authResponse) { 
        res(response.authResponse); 
      } else { 
        rej(); 
      } 
    }, {scope: "public_profile, email", display: 'popup'}); // 这里加上display参数
  }); 
}

不过官方更推荐让SDK自动判断，所以优先尝试第一步的方法。

为什么会出现这个问题？ #

你的代码里FB.login本身没指定display类型，但警告还是出现了，大概率是在SDK初始化的时候全局设置了display: 'page'，导致所有FB的对话框都用了这个不适合弹窗的模式。只要移除这个全局设置，问题就能解决。

修改完之后再测试一下，弹窗尺寸应该会变小，底部的警告也会消失啦！

内容的提问来源于stack exchange，提问作者Velidan