网站Facebook点赞按钮点击后消失问题求助

问题概况 #

• 网站曾有Facebook点赞按钮，累计获得6次点赞，删除按钮代码后重新添加，初始能正确显示点赞数，但点击按钮后会短暂消失，刷新页面后恢复；点赞功能实际有效，目前点赞数已达7次，Edge和Firefox浏览器均出现此现象
• Facebook调试工具提示：警告 - 缺少必填属性fb:app_id，且响应码为206

问题原因 #

Facebook新版SDK要求必须配置fb:app_id元数据，缺少该属性会导致SDK在用户交互（如点赞）后出现渲染异常；响应码206代表资源部分加载失败，进一步触发了按钮消失的问题。

修复步骤 #

1. 添加fb:app_id元标签：在页面<head>的Open Graph标签后，添加fb:app_id属性（需先在Facebook开发者平台创建对应网站应用，获取应用ID）
2. 完善SDK加载参数：在SDK的加载URL中补充appId参数，确保和元标签中的应用ID一致

修改后的完整代码示例 #

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home</title>

<meta property="og:url"           content="https://www.our-site.com" />
<meta property="og:type"          content="website" />
<meta property="og:title"         content="Home" />
<meta property="og:description"   content="our description." />
<meta property="og:image"         content="https://www.our-site.com/images/logo002.jpg" />
<!-- 添加fb:app_id元标签，替换为你的应用ID -->
<meta property="fb:app_id"        content="你的Facebook应用ID" />

</head>
<body>

<div id="fb-root"></div>
<!-- SDK加载URL补充appId参数 -->
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_AU/sdk.js#xfbml=1&version=v18.0&appId=你的Facebook应用ID" nonce="xjkEXir5"></script>

<div class="fb-like" data-href="https://www.our-site.com" data-width="" data-layout="button_count" data-action="like" data-size="large" data-share="false"></div>

</body>
</html>

验证方法 #

修改代码后重新加载页面，点击点赞按钮确认不会消失；再用Facebook调试工具检测，确认fb:app_id警告消失，响应码恢复正常。

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