如何在自建网站中嵌入Facebook Shop店铺页面

可行性说明 #

可以实现，Meta官方提供了原生嵌入功能，无需第三方工具即可完成基础配置。

前置配置要求 #

• 待嵌入的Facebook Shop需处于审核通过、正常运营状态，受限、未审核通过的店铺无法使用嵌入功能
• 你需要持有该店铺对应Meta商务管理平台的管理员权限，至少需拥有「公共主页编辑」「店铺设置」两项操作权限
• 你的自建站需支持自定义页面HTML代码，无论是开源建站系统、SaaS建站平台还是纯静态站点，都需要可修改目标页面的源码
• 店铺运营区域需在Meta支持嵌入功能的服务范围内，中国大陆地区暂不开放该功能，面向海外市场运营的店铺可正常使用

具体操作流程 #

1. 登录Meta Business Suite，进入对应Facebook Shop绑定的公共主页管理后台
2. 依次进入「店铺设置」-「嵌入工具」板块，系统会自动生成对应店铺的专属嵌入代码
3. 可根据页面需求自定义调整嵌入窗口的宽高、展示的商品分类、是否显示购物车入口等参数，调整完成后复制生成的代码，代码格式通常如下：

<div id="fb-shop-root"></div>
<script>
// Meta官方生成的专属加载脚本，无需修改
</script>

4. 打开自建站待嵌入页面的HTML编辑界面，将复制的代码粘贴到你需要展示店铺的对应位置，保存后发布页面
5. 发布后清空浏览器缓存访问测试，确认店铺组件加载正常、商品信息展示完整、点击跳转逻辑正常即可

注意事项 #

• 嵌入组件默认会根据访问用户的Meta账号登录状态匹配对应语言、币种，若需要固定展示某一币种和语言，可在嵌入工具设置页提前固定对应参数
• 嵌入组件的加载速度受海外网络环境影响，若你的自建站主要面向中国大陆用户访问，不建议嵌入，会大幅拖慢页面加载速度
• 不要随意修改官方生成代码中的核心参数（如店铺ID、脚本加载地址等），修改后可能导致店铺无法正常加载
• 若嵌入后出现商品不展示的问题，优先检查Facebook Shop是否存在违规受限记录，再确认粘贴的代码是否完整无遗漏
• 用户在嵌入的店铺组件内提交订单后，会自动跳转至Facebook官方结账页面完成支付，无需你在自建站额外配置支付渠道

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