使用Facebook网页点赞按钮出现X-Frame-Options报错求助

问题原因 #

Facebook近期更新了安全策略，将主站的X-Frame-Options设为deny，禁止自身页面被嵌入第三方iframe中。你之前用iframe直接嵌入点赞按钮的方式，点击时会尝试在iframe内打开Facebook的授权/点赞页面，因此触发了这个报错。

解决方案：改用Facebook JavaScript SDK嵌入方式 #

放弃直接iframe的嵌入方法，改用官方推荐的JavaScript SDK方案，步骤如下：

1. 移除现有iframe代码
   直接删除你当前页面中那个报错的iframe代码段。

2. 添加Facebook SDK初始化脚本
   在WordPress页面的<head>标签内，或者页面底部（</body>标签前）添加以下初始化脚本：

<div id="fb-root"></div>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/zh_CN/sdk.js#xfbml=1&version=v18.0&appId=你的APPID&autoLogAppEvents=1" nonce="随机字符串"></script>

注意：把你的APPID替换成你自己的Facebook应用ID；如果不需要追踪应用事件，可去掉autoLogAppEvents=1；nonce值可留空或生成随机字符串用于内容安全策略验证。

3. 添加点赞按钮代码
   在需要显示点赞按钮的位置，插入以下代码：

<div class="fb-like" data-href="https://www.perofamilyfarms.com/pepperday/" data-width="72" data-layout="button" data-action="like" data-size="large" data-share="false"></div>

这段代码的参数和你之前iframe的参数完全对应，会渲染出和之前样式一致的点赞按钮。

为什么这个方法有效？ #

JavaScript SDK会在页面中动态创建符合Facebook安全规则的元素，点击点赞按钮时会以弹窗或新标签页的方式打开Facebook相关页面，既规避了iframe嵌入的跨域限制，又能保证功能正常运行。

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