iOS Safari环境下Facebook分享计数器失效问题求助

这个问题我之前帮人排查过，核心原因大概率是**iOS Safari的智能跟踪预防（ITP）**限制了第三方请求，再加上你的代码有几个需要调整的地方，咱们一步步来解决：

先搞清楚为什么正常模式失效，隐私模式正常 #

iOS Safari的ITP会在正常模式下限制第三方域名（比如Facebook）的跨域请求，尤其是当浏览器检测到有跟踪Cookie时，会直接拦截请求；而隐私浏览模式下没有Cookie和跟踪数据，所以请求能正常发送。另外你用的http://graph.facebook.com是HTTP协议，现代浏览器（尤其是HTTPS网站）会阻止混合内容请求，这也可能是触发失败的原因。

第一步：先排查请求失败的具体原因 #

你的代码没有错误处理，所以请求失败时连alert都不会触发，先给代码加上错误回调，看看具体问题：

$.getJSON('https://graph.facebook.com/?id=https://example.com')
  .done(function(fbdata) {
    // 用可选链避免share字段不存在时报错
    $('#fb-count').text(fbdata.share?.share_count || 0);
  })
  .fail(function(jqXHR, textStatus, errorThrown) {
    console.log('Facebook API请求失败:', textStatus, errorThrown);
    // 这里可以加alert调试
    alert('请求失败：' + textStatus);
  });

打开iOS Safari的控制台（需要连接Mac调试，或者用Safari的开发者工具），就能看到具体是跨域错误、403还是其他问题。

第二步：针对性解决方案 #

方案1：改用HTTPS的Graph API并指定版本 #

Facebook早就要求使用HTTPS访问Graph API，而且旧版本的API可能已经失效，建议指定最新的API版本（比如v18.0，你可以去Facebook开发者文档查当前最新版本）：

$.getJSON('https://graph.facebook.com/v18.0/?id=https://example.com')
  .done(function(fbdata) {
    $('#fb-count').text(fbdata.share?.share_count || 0);
  })
  .fail(function(jqXHR, textStatus, errorThrown) {
    console.error('请求错误:', errorThrown);
  });

如果你的网站是HTTPS的，HTTP请求会被直接拦截，这一步是必须的。

方案2：使用Facebook官方JS SDK（最稳定的方案） #

官方SDK已经处理了浏览器的各种限制（包括ITP），比直接AJAX请求靠谱得多，步骤如下：

1. 先去Facebook开发者平台创建一个免费的APP（只需要基本信息，不需要审核），拿到你的APP_ID
2. 在页面中添加SDK代码：

<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId      : '你的APP_ID', // 替换成你自己的APP ID
      cookie     : true,
      xfbml      : true,
      version    : 'v18.0'
    });
    
    // 获取分享计数
    FB.api('/?id=https://example.com', function(response) {
      if (response && !response.error) {
        $('#fb-count').text(response.share?.share_count || 0);
      } else {
        console.error('获取分享数失败:', response?.error);
        // 失败时可以显示默认值0
        $('#fb-count').text(0);
      }
    });
  };

  // 异步加载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";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));
</script>

这个方案能绕过ITP的限制，因为SDK是从Facebook域名加载的，浏览器会允许它的请求。

方案3：服务器端代理请求（如果不想用SDK） #

如果不想引入Facebook SDK，可以在你的服务器上写一个接口，由服务器去调用Facebook的Graph API，然后前端请求自己服务器的接口（同源请求不会被ITP拦截）。比如用PHP写一个简单的代理：

// 服务器端proxy.php
<?php
$url = 'https://graph.facebook.com/v18.0/?id=https://example.com';
$response = file_get_contents($url);
echo $response;
?>

然后前端请求这个代理接口：

$.getJSON('/proxy.php')
  .done(function(fbdata) {
    $('#fb-count').text(fbdata.share?.share_count || 0);
  })
  .fail(function() {
    $('#fb-count').text(0);
  });

这样就完全避免了跨域和ITP的问题。

最后注意事项 #

• 确保你的网站是HTTPS的，HTTP网站在现代浏览器会有更多限制
• 处理share_count不存在的情况（比如链接从未被分享过），用|| 0设置默认值，避免页面显示空白
• 如果使用SDK，APP ID只需要创建基本的应用即可，不需要提交审核

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