网站Facebook小组件持续加载转圈问题排查请求

以下是针对该问题的排查方向和解决方法：

1. 修复页面链接的转义字符问题 #

代码中data-href和cite属性里的链接使用了HTML转义字符ł（对应波兰语字符ł），Facebook SDK无法正确解析这类转义后的链接，会导致无法获取页面数据。

• 解决方法：将转义字符替换为原始的波兰语字符，修改后的链接应为：

  https://www.facebook.com/Skuteczna-Szkoła-Pływania-Delfinek-1551938465126202/
  

  更新代码中所有对应的链接地址。

2. 升级Facebook SDK版本 #

当前使用的v14.0版本SDK已被Facebook停止支持，旧版本会引发组件加载异常。

• 解决方法：替换SDK链接中的版本号为最新稳定版（例如v19.0，可通过Facebook开发者平台确认最新版本），修改后的脚本标签为：

  <script async defer crossorigin="anonymous" src="https://connect.facebook.net/pl_PL/sdk.js#xfbml=1&version=v19.0"></script>
  

3. 检查Nonce属性与CSP配置匹配 #

代码中的nonce="xv52lKjQ"需要与网站的Content Security Policy（CSP）配置完全匹配，若CSP未允许该nonce值，浏览器会阻止SDK脚本执行。

• 解决方法：如果没有配置CSP，直接移除nonce属性即可；如果有CSP配置，确保script-src规则中包含该nonce值，例如：

  script-src 'nonce-xv52lKjQ' https://connect.facebook.net;
  

4. 明确容器尺寸设置 #

data-width=""和data-height=""留空，且容器#fb-box未设置明确宽度时，SDK无法计算合适的渲染尺寸，会引发加载异常。

• 解决方法：给#fb-box添加CSS尺寸设置，例如：

  #fb-box {
    width: 300px;
    min-width: 280px;
  }
  

  也可以直接给fb-page组件设置data-width="300"属性。

5. 验证Content Security Policy（CSP）规则 #

如果网站配置了CSP，需确保允许加载Facebook相关资源，否则会阻止组件渲染：

• 检查CSP是否包含以下规则：

  script-src https://connect.facebook.net;
  frame-src https://www.facebook.com;
  style-src https://connect.facebook.net;
  

  若缺少这些规则，需添加到CSP配置中。

6. 确认网络可正常访问Facebook #

如果用户所在网络无法访问Facebook服务，组件会持续加载转圈。可以测试直接访问目标Facebook页面，确认网络连接正常。

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