如何将互动天梯图排行榜一键嵌入你的网站或博客？

你实际在嵌什么

OBPAI 的开放嵌入是一个指向 https://obpai.com/embed/tier/{模板ID} 的 iframe。读者在你的文章里拖拽排位，交互跑在我们域名上；你的页面只负责给出高度与宽度。完整编辑页仍是 https://obpai.com/tier/{模板ID}。

站点里复制代码的默认高度是 860px（可在嵌入弹窗里改）。高度太矮会出现内部滚动条；太高则手机上空白过多——下面按场景给建议值。

最短路径：复制并粘贴

1. 打开目标模板页，点「嵌入到网站/博客」。
2. 按需改高度；是否带回流链接自己决定（带链接便于读者回到完整天梯页，不带则更「干净」）。
3. 把生成的 HTML 贴进文章的 HTML / 自定义 HTML 区块。Markdown 编辑器若会转义标签，改用 Raw HTML 或短代码插件。

示例（把 ID 换成你的；下面用编程语言天梯模板 1785642240285 演示）：

<iframe src="https://obpai.com/embed/tier/1785642240285" width="100%" height="860" frameborder="0" style="border:none;border-radius:12px;overflow:hidden;" allowfullscreen></iframe>

高度与移动端：别只用 860

• 桌面长文：860 通常够用；条目特别多（近百图块）可试 960–1100，以「首屏能看到至少两档梯队」为准。
• 手机：固定 860 容易又高又难操作。更稳的做法是：桌面用 860，移动用 CSS 媒体查询把 iframe 高度降到约 640–720，或引导读者「横屏操作 / 打开完整页」。
• 宽度：保持 width="100%"，让外层文章容器限宽；不要写死 1200px，否则小屏横向溢出。

各发布环境常见坑

• WordPress 区块编辑器：用「自定义 HTML」区块；「经典段落」里直接贴 iframe 有时会被滤掉。部分安全插件会剥 iframe——白名单 obpai.com 或改用 iframe 短代码插件。
• Hexo / Hugo / 静态站：确认 Markdown 渲染器允许 raw HTML（如 Hugo 的 unsafe = true 一类配置）。主题若用 DOMPurify 清洗，需放行 iframe 的 src。
• Ghost：用 HTML card；付费主题偶发限制第三方 iframe，预览一次真机。
• 微信公众号 / 部分 App 内置浏览器：对第三方 iframe 限制多，常直接空白。更稳是发封面图 + 按钮链到 /tier/{id} 完整页，而不是硬嵌。
• Notion / 部分文档产品：只支持白名单嵌入，obpai 未必在列——改外链。

CSP、Cookies 与「白屏」排查

1. 打开浏览器开发者工具 Console / Network：若 CSP 报 frame-src / child-src 拦截，在你自己站点的 CSP 里允许 https://obpai.com。
2. iframe 能出来但拖不动：先排除父页用 CSS 盖住了指针事件（pointer-events: none 的遮罩、广告层）。
3. 仅 HTTPS 站点嵌 HTTP（或混合内容）会被浏览器直接拦——统一用 https://obpai.com。
4. 公司网络或扩展（广告拦截、隐私模式）可能拦第三方帧：换无痕窗口对比一次，再断定是代码问题。

什么时候别嵌

模板还在大改、条目名未校对完时，先别大面积嵌入——读者存下的截图会变成过期论据。条目极少（例如不到 8 个）时，一张静态图往往比 iframe 更轻。若你的站点 CSP 极严又改不了，外链到完整天梯页比「嵌了个白框」体面。

和静态排行图怎么选

需要读者自己改排序、导出、争论——用嵌入。你已经定稿、只要引用结论——导出 WebP/PNG 当配图更合适，加载也更轻。我们自己的选购长文（例如电竞鼠标天梯）会把互动板当「改意见的工具」，而不是整篇唯一内容。