Facebook连接按钮未在Safari/Chrome中显示

我的FacebookConnect实现（只是一个简单的登录按钮，fb:login按钮）在Firefox和IE上运行得非常好

但Safari/Chrome（Webkit）中没有显示相同的按钮

讽刺的是。在调试过程中，我将页面（包含fb:login按钮）保存为静态页面，然后将其加载到Safari中。按钮出现了，一切正常

我的PHP呈现的完全相同的页面（具有完全相同的HTML源代码）无法打开按钮

---

我正在努力支持Webkit，但我几乎要放弃了。有人能帮忙吗？

这可能是因为安装了ClickToFlash。禁用它，或者在ClickToFlash设置中选中“自动加载不可见的Flash视图”。

当我在config/facebooker.yml的回调url中有错误的域时，就会发生这种情况。显然，它是用这个来加载js文件的。

我也遇到了同样的问题，但我通过确保我的应用程序设置中的URL与我的站点的URL完全相同来解决了这个问题（即，当我在没有www的情况下访问我的站点时，它不起作用）。

我们发现的是Safari（可能还有一些较旧版本的Chrome或其他WebKIT浏览器）如果页面到达时带有XHTML响应头（application/XHTML+xml），则使用innerHTML JS函数的Facebook代码有问题。 使用text/html解决了这个问题

在我们使用的JSF2中，实现修复非常简单，只需像这样包装FB按钮：

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
    xmlns:fb="http://www.facebook.com/2008/fbml"
    xmlns:f="http://java.sun.com/jsf/core">

...

    <f:view contentType="text/html">
        <fb:login-button>Login using Facebook</fb:login-button>
    </f:view>

...
使用Facebook登录

Facebook错误报告在此：

---

我发现了另一种可能发生这种情况的方式（责备自己愚蠢的方式）；这可能并不常见，但如果为其他人省去了麻烦，请看以下内容：

这种症状也可能是由各种安全工具阻塞facebook资源造成的

就我而言，我早就在Chrome上安装了Facebook Disconnect插件，但我完全忘记了它的安装。我还安装了第二个Chrome，看起来一模一样（但没有Facebook断开连接）。第一个会正确加载fb:login按钮，另一个不会；我花了很长时间才看到插件，因为Facebook没有图标，所以它的出现很容易让我错过

下面是一些安全插件阻止facebook资源加载的情况。只需查看使用开发人员工具在浏览器中呈现的html

在正常的chrome会话中，您将得到如下结果：

您的文本在此

但在禁用facebook资源的版本中，您最终会遇到以下问题：

您的文本在此

---

就像我说的，回想起来很明显。

我有一个问题，Facebook按钮根本没有显示出来，我花了很长时间才弄清楚它是什么。幸运的是，经过几天的拉扯，我现在将与大家分享答案。在我的情况下，我只是没有启用xfbml。在我的FB.init中，我将其设置为false：

    FB.init({
        appId       : 'app_id', // App ID
        status      : true, // check login status
        cookie      : true, // enable cookies to allow the server to access the session
        xfbml       : false,  // parse XFBML
        oauth       : true // enable OAuth 2.0
    });

---

我将其更改为“true”（xfbml），登录按钮现在工作得很好！：祝你好运

也有同样的问题，但与插件或格式错误的内容无关。如果你在你的facebook页面上启用了国家过滤功能，那么like按钮似乎有问题，这应该是相当明显的。Facebook从你的个人资料中获取你的位置，而不是你的IP地址

---

如果您打算使用社交插件，请确保禁用国家/地区锁定。

我已经尝试了这里建议的所有解决方案，但都不适用于我。但现在我终于找到了解决办法

Facebook现在需要一个安全的（https）画布（安全画布URL）。没有担保的那一种很快就会被弃用

主要区别在于，Chrome不喜欢带有无效证书的https连接。在本地主机上，很可能已安装stunnel以允许本地主机的https连接。Firefox可以使用自行创建的SSL证书，并允许您在尝试访问该站点时添加异常。Chrome不允许它开箱即用

当我在Chrome中加载我的应用程序时，页面是空白的，我看不到任何登录按钮

单击F12并单击Chrome中的Netwrok选项卡：

您会看到对本地主机的post请求被取消。双击它

现在，您将看到chrome由于证书而阻止本地主机：

单击“继续”

现在返回到其他选项卡并重新加载页面：

Chrome现在可以像Firefox一样工作，并显示登录按钮。

---

你能发布你的源代码吗，或者更好的是，发布一个链接到一个实例吗？当然。动态页面-静态页面-两个页面呈现相同的代码；只有静态页面在Webkit中工作。我也有同样的问题。如果你把测试页面放在“主”文件夹中，它还能工作吗？这里也一样，一年前有人问过这个问题：）+1用于提及断开连接扩展。我花了一段时间才弄明白：——）