Facebook Message Us插件设为small/medium时返回500错误求助

我之前处理过一模一样的问题，折腾了好一会儿才搞明白——这其实是Facebook Messenger插件的已知后端bug，虽然官方文档明明白白写了small和medium是合法的尺寸取值，但实际调用时，Facebook的API服务对这两个参数的解析逻辑有问题，直接触发了未处理的内部错误，也就是你看到的500状态码。

问题根源 #

• 核心原因是Facebook插件的服务器端参数校验逻辑存在漏洞：当传入size="small"或size="medium"时，后端服务无法正确处理这个参数，导致抛出未捕获的异常，返回500错误；而size="large"的校验逻辑是正常的，所以能正常渲染。
• 另外，如果你的页面加载的是较旧版本的Facebook SDK，也可能会加剧这个兼容性问题，旧SDK对新参数的适配性较差。

修复方案 #

这里给你几个可行的解决办法，按优先级排序：

1. 用CSS自定义缩小按钮（最快解决）

既然large尺寸能正常工作，我们可以先用size="large"，再通过CSS把按钮缩到想要的大小。比如要模拟small尺寸的效果：

/* 自定义缩小Messenger按钮 */
.fb-messengermessageus.small-btn {
  transform: scale(0.7);
  transform-origin: left center; /* 保证缩放后位置不变 */
}

对应的HTML代码修改：

<div class="fb-messengermessageus small-btn" 
     messenger_app_id='<%=FacebookAppId.ToString() %>' 
     page_id='<%=FacebookPageId.ToString() %>' 
     color="blue" 
     size="large" 
     style="margin-bottom:10px;"> 
</div>

这个方法不需要等官方修复，马上就能生效，视觉效果和原生small/medium尺寸几乎一致。

2. 跟进官方修复

你可以去Facebook开发者社区提交这个bug的反馈，或者关注Messenger平台的更新日志。目前已有大量开发者反馈了这个问题，官方应该会在后续的API版本中修复这个参数校验的bug。

3. 确保加载最新版SDK

检查你的页面是否加载了最新版本的Facebook SDK脚本，旧版本可能对新的尺寸参数支持不足。推荐使用最新稳定版的SDK（比如v18.0及以上），加载代码示例：

<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId      : '<%=FacebookAppId.ToString() %>',
      xfbml      : true,
      version    : 'v18.0'
    });
  };

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

内容的提问来源于stack exchange，提问作者C.Deacon