Facebook 嵌入生成器
介绍
Toollect Facebook 嵌入生成器可一键将任何公开的 Facebook 推文、视频或粉丝专页网址,转为 Facebook 官方文档记载的 JavaScript SDK 嵌入代码 – fb-post / fb-video / fb-page 的 div 加上 sdk.js 加载器,并在拷贝前先以 Facebook 官方 SDK 渲染实时预览。
它解决的是许多人手动粘贴 Facebook 代码时遇过的摩擦。Facebook 的设置工具把粉丝专页插件藏得很深,将推文与视频选项分散在不同页面,并在 iframe 与 SDK 两种形式间切换却不说明取舍。手写 div 时只要一个 data- 属性拼错,推文就会静默失效、只剩纯链接。这款工具将推文、视频与粉丝专页插件并列呈现,公开每个官方文档的插件属性,把你的语言选择直接写入加载器网址,并在与访客相同的浏览器中呈现真实渲染结果。
每个代码路径都刻意只走 SDK。SDK 是 Facebook 为三种插件类型持续维护的格式,是唯一支持显示语言的格式,也是唯一能让粉丝专页插件分页与尺寸保持一致的格式。生成器在需要时包含 fb-root 与加载器,在网站已加载 SDK 时则省略,对广告阻挡器与私密内容诚实反映预览结果,且绝不会让你的链接经过 Toollect 服务器。
使用情境
在博客文章之外,嵌入 Facebook 内容的场景比想像中更多,三个分页自然分工。
博客与编辑内容
引用公开推文的评论文章、重用爆红视频的文化报道、将品牌粉丝专页动态墙作为社交证明嵌入的评测 – 都是典型用途。推文模式默认 500 像素宽度适用大多数版心,视频模式让播放器居前,粉丝专页插件则无需截屏就能呈现实时动态墙。
新闻编辑室与实时报道
记者将官方声明与目击者推文拉进滚动报道。速度与查核同样重要 – 生成器会将 m.facebook.com 这类行动分享链接与带有大量追踪参数的网址规范化为单一规范参照,预览则在发稿前确认推文仍可渲染。
行销网站与作品集
以嵌入式粉丝专页动态墙呈现顾客评价、以页面内播放器呈现发表视频、以卡片呈现公告推文。语言选择会以访客语言渲染外框文字,已加载 Facebook SDK 的页面省略加载器即可避免重复脚本。
文档与社区网站
引用发表推文的版本说明、参照 Facebook 社团公告的文档、在活动页面显示粉丝专页的活动分页。显示文字与延迟加载控制让厚重页面在滚动靠近前保持安静。
运行方式
工具依五个步骤运行:
- 解析并分类网址 – 将输入与 Facebook 链接语法比对:数字 ID 为
5–20位或pfbid形式,用户名2–50字符,分页名称符合[a-z][a-z0-9_]*,官方主机为含任意子网域的facebook.com以及fb.watch与fb.me。追踪用查找键会被读取但在路由时忽略 – 重建的规范网址永远不会携带它们。缺少 ID 的路由如facebook.com/watch未带v或fb.watch未带短码会被拒绝。 - 选择插件类型 –
post/photo/group-post对应推文,video/reel对应视频,page对应粉丝专页插件。分页列会跟随链接 – 粘贴 watch 网址自动切到视频,粘贴粉丝专页网址自动切到粉丝专页插件,手动切换标签页时会清空过时输出而非弹回。 - 收集你的选项 – 从分页下拉菜单取得语言,从数字字段取得宽高,从粉丝专页复选框取得分页与外框,从视频切换取得全屏幕、自动播放与字幕。每次变更都会夹回有效范围、写回字段并立即重新产生。
- 建构官方标记 – 你的选项会成为
fb-*div 上的data-*属性,粉丝专页插件的加载器网址则会以https://connect.facebook.net/{locale}/sdk.js#xfbml=1&version=v26.0携带你的语言。不会建构 iframe 网址 – SDK 会在解析时直接取用 div 属性。 - 渲染预览 – 生成器将 div 与
fb-root注入预览容器,依所选语系加载或重新加载sdk.js,调用FB.XFBML.parse并监看产生的 iframe。诚实回报三种结果 – 成功、广告阻挡器或无法完成渲染。
变更任何选项都会重建整条链 – 新属性、全新的代码区块、重新解析的预览 – 因此你拷贝的代码永远与眼前所见一致。
支持的 URL 格式
生成器接受在 Facebook 三个官方主机上能识别公开推文、视频或粉丝专页的任何网址形状,其余一律以具体消息拒绝。网址配置与 www. 可省略,行动子网域会被规范化。
接受的格式
| 格式 | 范例 | 分页 | 结果 |
|---|---|---|---|
| 规范推文 | facebook.com/username/posts/1234567890123456 |
推文 | 该推文的 fb-post |
| pfbid 推文 | facebook.com/nike/posts/pfbid0ABCDEF12345 |
推文 | 该推文的 fb-post |
| 分享推文 | facebook.com/share/p/Ab12CdEfGh/ |
推文 | 该推文的 fb-post |
| 故事 / 永久链接 | facebook.com/story.php?story_fbid=123&id=456 / permalink.php?story_fbid=... |
推文 | 该推文的 fb-post |
| 照片 | facebook.com/username/photos/1234567890123456 / photo.php?fbid=... / photo/?fbid=... |
推文 | 该照片的 fb-post |
| 社团推文 | facebook.com/groups/999888777666/posts/111222333444555 |
推文 | 该社团推文的 fb-post |
| 规范视频 | facebook.com/username/videos/1234567890123456 |
视频 | 该视频的 fb-video |
| Watch 链接 | facebook.com/watch/?v=10153231379946729 |
视频 | 该视频的 fb-video |
| Reels | facebook.com/username/reels/Ab12CdEfGhIj / facebook.com/reel/Ab12Cd... |
视频 | 该 Reels 的 fb-video |
| 以用户名识别的粉丝专页 | facebook.com/facebook |
粉丝专页插件 | 该粉丝专页的 fb-page |
| 以 ID 识别的粉丝专页 | facebook.com/profile.php?id=100001234567890 |
粉丝专页插件 | 该粉丝专页的 fb-page |
| 粉丝专页分页查看 | facebook.com/facebook/videos |
粉丝专页插件 | 该粉丝专页的 fb-page – 分页后缀已忽略 |
| 短网域 | fb.watch/AbC12dEfXy |
— | 已拒绝 – 短链接带有 kind:"short",需要完整网址 |
| 重新导向网域 | fb.me/nike |
粉丝专页插件 | 该粉丝专页的 fb-page |
结尾斜线、hash 片段与 ID 后的查找字符串会被容忍并丢弃;用户名后如数字分页段这类显示后缀会被视为粉丝专页分页查看,而非独立资源。
拒绝的格式
| 网址形状 | 拒绝原因 |
|---|---|
fb.watch/AbC12dEfXy |
官方短链接 – 无法在本地解析目的地,Facebook 也未为短码提供嵌入形式 |
facebook.com/sharer/sharer.php?u=... / l.php / dialog / tr 等 |
保留的工具路由 – 登录、分享、追踪 – 非可嵌入内容 |
facebook.com/hashtag/something / search/top/?q=... |
探索路由 – 非单一推文或粉丝专页 |
example.com/facebook/nike 或任何非 Facebook 主机 |
非 Facebook 网域 |
| 非网址的文字 | 没有可比对的主机 |
fb.watch 的情况值得特别说明,因为应用程序分享按钮至今仍会产生这种形状。生成器会以专属的短链接消息刻意拒绝,并请你打开链接后拷贝完整的推文或视频网址。粘贴展开后的网址即可立即成功。
嵌入代码结构
输出即 Facebook 文档记载的代码,并应用你的选项。以默认值嵌入推文会长这样:
<div class="fb-post" data-href="https://www.facebook.com/facebook/posts/10153231379946729" data-width="500"></div>
<div id="fb-root"></div>
<script async defer src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v26.0"></script>
逐段解析:
- 插件 div 类别 –
fb-post、fb-video或fb-page告诉 SDK 要初始化哪个插件。每次嵌入仅用一个类别。 data-href– 上一节的规范网址,已做 & 跳脱。这是三种插件唯一必填的属性。data-width(推文与视频)– 期望的宽度,单位像素。推文接受350–750,本工具默认500,视频220–1920默认500。Facebook SDK 会在可行时将卡片缩放到此宽度。data-show-text– 勾选显示推文文字时出现。Facebook 对含照片的推文与视频有文档说明,没有它文字可能会被隐藏。data-lazy– 勾选延迟加载时出现。会延后到嵌入卷动靠近时才渲染。data-allowfullscreen/data-autoplay/data-show-captions(仅视频)–allowfullscreen激活全屏幕按钮,autoplay在桌面加载时以静音自动播放,show-captions在桌面有字幕时默认显示。关闭时三者皆不出现。data-tabs/data-height/data-small-header/data-adapt-container-width/data-hide-cover/data-hide-cta/data-show-facepile(仅粉丝专页插件)–tabs列出可见分页如timeline,events,messages,默认timeline,height默认500,布尔值直接对应插件的外框切换。- 加载器 –
fb-root加上来自connect.facebook.net/{locale}/的sdk.js#xfbml=1&version=v26.0。en_US仅为范例 – 你的语言选择会写入语系段。取消勾选「包含 fb-root div 与 sdk.js 加载器」时会整个省略此区块。
以非默认值设置的粉丝专页插件会显示更完整的属性集:
<div class="fb-page" data-href="https://www.facebook.com/facebook" data-tabs="timeline,events" data-width="340" data-height="500" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-hide-cta="false" data-show-facepile="true"></div>
嵌入选项
每个控件对应一个属性。括号内为默认值。
语言(默认为你的 Toollect 网站语言 – zh-hant 对应 zh_TW、zh-hans 对应 zh_CN、en 对应 en_US,de、es、fr、it、ja、nl、pt、sv 亦同)– 显示从 en_US 到 af_ZA 的 60 个语系,名称依 Toollect 页面语言本地化。包含英文在内的每个明确选择都会写入加载器网址。SDK 会本地化嵌入周围的文字 – 时间戳记、赞按钮标签 – 永远不会改变推文本身。
宽度(推文 500,视频 500,粉丝专页 340)– 以精确数字输入,离开字段时立即夹回有效范围。推文 350–750,视频 220–1920,粉丝专页 180–500。超出范围的值会贴齐最近边界 – 在视频输入 5000 会变成 1920。
高度(粉丝专页 500)– 仅粉丝专页插件,70–2048。推文与视频没有高度属性 – SDK 会依宽度与内容决定卡片高度。
与照片和视频一并显示推文文字(关闭)– 推文会写入 data-show-text="true",视频则在标签上加注「(仅限桌面)」以呼应 Facebook 说明文字切换仅影响桌面的备注。
卷动靠近前延迟加载(关闭,适用所有分页)– 写入 data-lazy="true"。
允许全屏幕播放(关闭,仅视频)– 写入 data-allowfullscreen="true"。
页面加载时自动播放(静音、仅限桌面)(关闭,仅视频)– 写入 data-autoplay="true"。Facebook 文档将此描述为仅限桌面的静音自动播放。
有字幕时默认显示字幕(仅限桌面)(关闭,仅视频)– 写入 data-show-captions="true",仅限桌面。
要显示的分页(动态时报,粉丝专页插件)– 三个核取方块 timeline / events / messages 会合并为 data-tabs="timeline,events,messages"。未勾选的分页仅从清单中省略。
使用小标头 / 自动适应容器宽度 / 隐藏封面照片 / 隐藏自订行动呼吁 / 显示好友大头贴(粉丝专页插件)– 各自写入对应的 data-* 布尔值。自动适应默认打开,好友头像默认打开。
包含 fb-root div 与 sdk.js 加载器(打开)– 控制是否附加加载器区块。已在全站加载 sdk.js 的网站应取消勾选。
语言与国际化
Facebook 的嵌入推文常见问题与 JavaScript SDK 国际化指南都说明同一条规则 – 社交插件的显示语言来自 sdk.js 网址的语系段。本工具让这点一目了然。
你的语言选择会流入两个地方:
- 产生的代码 –
https://connect.facebook.net/{locale}/sdk.js#xfbml=1&version=v26.0,其中locale如en_US、zh_TW、fr_FR或ja_JP。 - 实时预览 – 变更下拉菜单会重建预览容器,移除先前以不同语系加载的 SDK 脚本,清除
window.FB,再全新加载新语系后调用FB.XFBML.parse。
默认值会自动跟随你的 Toollect 网站语言 – 浏览 toollect.com/zh-hant/tools/facebook-embed-generator/ 会预选 zh_TW,zh-hans 预选 zh_CN,ja 预选 ja_JP,欧洲语言则对应其地区形式(de→de_DE、fr→fr_FR 等),其余退回 en_US。没有自动选项 – Facebook 要求明确语系,因此工具永远会写入一个。
哪些会变、哪些不会:
| 项目 | 跟随语系 | 保持原样 |
|---|---|---|
| 时间戳记格式 | 是 | — |
| 赞 / 分享按钮标签 | 是 | — |
| 推文内文、视频标题、粉丝专页名称 | — | 是 |
| 推文留言 | — | 是 |
支持的显示语言
Facebook 为 SDK 文档化了约一百个语系。下拉菜单提供最常用的 60 种,名称依 Toollect 页面语言本地化。完整的文档化清单包括:
af_ZA 南非荷兰文 · ar_AR 阿拉伯文 · az_AZ 阿塞拜疆文 · bg_BG 保加利亚文 · bn_IN 孟加拉文 · bs_BA 波斯尼亚文 · ca_ES 加泰罗尼亚文 · cs_CZ 捷克文 · da_DK 丹麦文 · de_DE 德文 · el_GR 希腊文 · en_GB 英文(英国) · en_US 英文(美国) · es_ES 西班牙文(西班牙) · es_LA 西班牙文 · et_EE 爱沙尼亚文 · eu_ES 巴斯克文 · fa_IR 波斯文 · fi_FI 芬兰文 · fr_FR 法文 · gl_ES 加利西亚文 · gu_IN 古吉拉特文 · he_IL 希伯来文 · hi_IN 印地文 · hr_HR 克罗地亚文 · hu_HU 匈牙利文 · hy_AM 亚美尼亚文 · id_ID 印尼文 · is_IS 冰岛文 · it_IT 意大利文 · ja_JP 日文 · jv_ID 爪哇文 · ka_GE 格鲁吉亚文 · km_KH 高棉文 · kn_IN 卡纳达文 · ko_KR 韩文 · lo_LA 寮文 · lt_LT 立陶宛文 · lv_LV 拉脱维亚文 · mk_MK 马其顿文 · ml_IN 马拉雅拉姆文 · mr_IN 马拉地文 · ms_MY 马来文 · my_MM 缅甸文 · nb_NO 挪威文 · ne_NP 尼泊尔文 · nl_NL 荷兰文 · pa_IN 旁遮普文 · pl_PL 波兰文 · pt_BR 葡萄牙文(巴西) · pt_PT 葡萄牙文(葡萄牙) · ro_RO 罗马尼亚文 · ru_RU 俄文 · si_LK 僧伽罗文 · sk_SK 斯洛伐克文 · sl_SI 斯洛文尼亚文 · sq_AL 阿尔巴尼亚文 · sr_RS 塞尔维亚文 · su_ID 巽他文 · sv_SE 瑞典文 · sw_KE 斯瓦希里文 · ta_IN 泰米尔文 · te_IN 泰卢固文 · th_TH 泰文 · tl_PH 菲律宾文 · tr_TR 土耳其文 · uk_UA 乌克兰文 · ur_PK 乌尔都文 · vi_VN 越南文 · zh_CN 简体中文 · zh_HK 中文(香港) · zh_TW 繁体中文
此下拉菜单以外的任何语系,依相同模式 https://connect.facebook.net/{locale}/sdk.js 也属有效,但上述 60 种已涵盖 Toollect 本身提供的所有语言,因此粘贴代码后很少需要手动编辑。
使用方式
- 粘贴 Facebook 网址到输入框 – 上表任何接受的格式皆可,包括
m.facebook.com与解析为粉丝专页的fb.me短链接。网址配置与www.可省略。 - 按下产生或按 Enter。代码会出现在输出框,预览会自动打开并显示真实 SDK 渲染结果。网址列也会驱动分页 – watch 链接切到视频,粉丝专页链接切到粉丝专页插件。
- 视需要选择标签页 – 推文、照片与社团推文选推文,视频与 Reels 选视频,粉丝专页选粉丝专页插件。切换时会以该分页的选项重新产生,不符的分页会清空过时输出。
- 设置语言 – 默认已符合你的网站语言,但你可从 60 个语系中任选。产生的加载器网址与预览都会立即切换。
- 调整其余选项 – 宽度、粉丝专页用高度、标头与封面切换、延迟加载。每次变更都会重新产生,代码区块与预览永不脱节。
- 查看预览诊断 – 若未出现卡片,输出上方的警告会说明是 SDK 被阻挡、内容无法渲染,或网址指向个人动态墙而非粉丝专页。
- 拷贝代码并贴到页面上要显示嵌入的位置。若网站已加载
sdk.js,请取消勾选加载器包含选项以避免重复。
不符合支持格式的输入会清空输出,并在红色错误区说明原因 – 非法链接消息或短链接消息。清除会一次重置输入、代码与预览。
教程
跟着一个真实链接走过三个分页。
步骤 1 – 粘贴如应用程序分享的推文链接。 拷贝带有追踪参数的推文网址:
https://m.facebook.com/facebook/posts/pfbid0AbCdEfGhIjKlMnOpQrStUvWxYz1234567890?__tn__=K-R
按下产生。解析器会越过 m. 子网域与 __tn__ 追踪参数,识别为 facebook 的推文 pfbid0AbCdEfGhIjKlMnOpQrStUvWxYz1234567890,分页维持在推文,代码显示 data-width="500" 与 en_US 加载器,因为此演练位于英文站。预览打开,卡片以 500 像素渲染。
步骤 2 – 变更语言。 将推文语言切到繁体中文 zh_TW。加载器变为 https://connect.facebook.net/zh_TW/sdk.js#xfbml=1&version=v26.0,预览重新加载 SDK – 推文旁的时间戳记切换为中文形式,而推文内文完全保持原样。
步骤 3 – 调窄。 在宽度输入 600 并离开字段。div 增加 data-width="600",卡片随之改变。试着输入 9999 再离开 – 字段会贴齐到推文上限 750。
步骤 4 – 切到视频。 在输入框将推文网址替换为视频:
https://www.facebook.com/facebook/videos/10153231379946729/
按下产生。工具切到视频,代码变为 <div class="fb-video" data-href="https://www.facebook.com/facebook/videos/10153231379946729" data-width="500">,语言下拉仍显示相同的 en_US 默认值。勾选自动播放与显示字幕 – 各自写入其 data-*,标签上保留仅限桌面的说明。
步骤 5 – 粉丝专页插件。 粘贴 https://www.facebook.com/facebook 并产生。粉丝专页插件分页以 data-tabs="timeline" 与完整外框设置打开。勾选活动与消息 – 属性变为 data-tabs="timeline,events,messages"。将宽度改为 500、高度改为 700 – 两个属性皆更新。预览如实显示粉丝专页的动态墙、封面与好友头像,与贴到网站上的效果一致。
步骤 6 – 拷贝并上线。 按下拷贝,贴到已加载 sdk.js 的纯 HTML 页面 – 拷贝前先取消勾选加载器。打开页面 – 推文、视频与粉丝专页各自以你设置的宽度与语言渲染。
预览与诊断
预览会对你来自 buildSdkCode 的精确 div 运行 Facebook 真正的 sdk.js,因此它会在与你的页面相同的位置失败。容器在下载 sdk.js 与运行 FB.XFBML.parse 期间显示转圈,之后呈现四种结果之一:
| 状态 | 意义 | 处理方式 |
|---|---|---|
| 卡片 / 视频 / 动态墙已渲染 | 嵌入有效且公开 | 拷贝粘贴 – 相同渲染结果会出现在你的网站上 |
| 「Facebook SDK 加载失败 – 通常是广告阻挡器所致」 | 浏览器完全无法下载 connect.facebook.net/{locale}/sdk.js |
在阻挡器中将 connect.facebook.net 加入白名单,或以干净的无痕窗口重试。已发布的嵌入对使用该阻挡器的访客也会同样失败 |
| 「Facebook 未在 15 秒内渲染预览」 | SDK 已加载但未产生 iframe | 内容可能非公开、受年龄或地区限制、已删除,或作者已关闭嵌入。在 facebook.com 打开原始链接检查 – 若在那里可见但在此不可见,表示嵌入已关闭 |
| 「此网址可能是个人文件 – 粉丝专页插件仅在 Facebook 粉丝专页上可稳定运行」 | SDK 渲染出 iframe,但在数次轮询中维持 0 或小于 70 像素,或 FB.Event 回报渲染错误 |
粉丝专页插件为粉丝专页而设 – 个人动态墙与 /username 及 profile.php?id=... 等粉丝专页共用相同网址形状,因此静态检查会误判真实粉丝专页。请以已知粉丝专页如 facebook.com/facebook 测试 – 若该页可渲染,表示警告正确标记了个人网址 |
两种计时警告皆在宽松等待后才触发 – SDK 下载 20 秒、渲染再 15 秒 – 因此连接较慢不会造成误报。可嵌入的推文远在时限内即可渲染,个人文件的粉丝专页插件则在 iframe 维持零尺寸约三秒后显示黄色警告。
一个值得了解的细节:生成器会追踪 loadedLocale。成功渲染后变更语言时,会移除先前的 sdk.js script 标签、清除 window.FB,再全新加载新语系后解析。先前语系已渲染的卡片会在新解析前从预览容器中清除,因此预览永远与你将拷贝的加载器网址一致。
专业提示
- 与 Facebook 链接解析器搭配使用。 解析器分析并清理链接 – 类型、用户名、ID、已移除的追踪键 – 而此生成器将干净链接转为代码。以解析器归档,以生成器发布。
- 一个加载器、多个嵌入。 含多个 Facebook 嵌入的页面只需加载一次
sdk.js– 第一个嵌入勾选加载器产生,其余不勾选,或在网站样板中自行加载 SDK 并全部省略。fb-rootdiv 每页也只需一次。 - 先为版心设计,再设置宽度。 Facebook 卡片在选项表的宽度附近视觉上达到上限,预览会在定案前显示容器尺寸下的真实结果。输入精确像素值 –
567也有效 – 仅在超出文档范围时才会被夹回。 - 以视频为主的推文请用视频模式。 透过推文插件嵌入的视频会渲染为静态卡片 – 以
fb-video嵌入则渲染为带自动播放与字幕控制的播放器,符合插件文档。 - 明确锁定语言。 让外框跟随宿主页的
<html lang>会使输出取决于粘贴位置。包含en_US在内的每个明确选择都会将语系写入代码,无论宿主为何都能重现相同标签。 - 厚重页面使用延迟加载。 含三个粉丝专页插件动态墙的文章可直接受益于
data-lazy– SDK 会延后解析直到嵌入卷动靠近。 - 粉丝专页插件分页保持最少。 每增加一个分页都会增加高度与网络成本 – 仅
timeline是最快的初始渲染,仅在页面真的需要时才加入events与messages。
替代方案
还有哪些方式可将 Facebook 内容放到页面上?
| 方式 | 官方标记 | 选项涵盖 | 实时预览 | 相依性 |
|---|---|---|---|---|
| 本工具 | 是 – 带文档化 data-* 的 SDK div |
完整,含 60 种语言、粉丝专页分页与播放器控制 | 是,含三态诊断 | 无 – 浏览器直连 Facebook |
Facebook 粉丝专页插件设置工具(developers.facebook.com) |
是 – 相同的 SDK div | 仅粉丝专页,无推文/视频集成,宽度指引有限 | 仅在设置工具内 | Facebook 账号 |
手写 fb-* div 加 sdk.js |
小心撰写时形状正确 | 取决于你输入的内容 – 容易打错 | 无 | sdk.js |
单独 iframe plugins/post.php 网址 |
旧式 iframe 形式 | 子集 – 无语言、无延迟、无以 data- 表示的粉丝专页分页 |
无 | 无 |
Facebook Graph API(/{id}?fields=... 加自订渲染器) |
否 – 仅 JSON | 完全自订,由你建构 | 自行建构 | 应用程序、权杖、审核 |
| 第三方嵌入服务 | 其包装标记 | 各不相同 | 有时有 | 其脚本与追踪 |
Facebook 官方设置工具是最接近的替代方案,也是相同 data-* 语汇的来源 – 但它将推文、视频与粉丝专页分散到不同页面,不提供个人与粉丝专页区分的警告,也不会产生含完整工具语言清单的推文/视频/粉丝专页集成输出。Graph API 路线以应用程序、权杖与持续审核为代价换取完全控制,渲染仍由你负责。第三方服务则插入其自家脚本。生成器位居实用的中间 – 官方标记、完整选项、实时视觉确认。
与官方 API 比较
触及 Facebook 嵌入的官方界面有两个,生成器直接建构在更友善、无需密钥的那一个之上。
| 能力 | 社交插件与 JavaScript SDK | Graph API |
|---|---|---|
| 用途 | 网址 → 客户端渲染的嵌入 | 平台完整数据与发布 |
| 验证 | 无 | 用户或应用程序权杖,常需审核 |
| 费用 | 免费 | 基本读取免费、有限流,需审核扩充权限 |
| 回传可粘贴的代码 | 是 – fb-* div 加 sdk.js 加载器 |
否 – 需自行渲染的 JSON |
| 语言控制 | 是 – sdk.js 语系段 |
无关 – 由你渲染画面 |
| 速率限制 | SDK / 插件无文档化限制 | 有文档化的 Graph 限制 |
生成器不会调用任何 Graph 端点。它依规则建构社交插件标记,重现设置工具会输出的内容,并仰赖 SDK 自身的 FB.XFBML.parse 进行渲染。Graph API 未参与 – 透过它取得推文数据需要权杖,且渲染仍由你完成,而 SDK 已免费渲染官方卡片。
生成器 vs. URL 解析器
Toollect 提供两个接受相同链接的 Facebook 工具,分工值得一看:
| 问题 | URL 解析器 | 本生成器 |
|---|---|---|
| 支持哪些链接? | 所有 Facebook 主机与类型 – 推文、视频、Reels、照片、社团推文、粉丝专页,外加 fb.watch / fb.me 短链接与追踪参数清单 |
可嵌入的公开推文、视频与粉丝专页 |
| 输出什么? | 干净的规范网址、嵌入与分享网址、参数移除清单 | 可直接粘贴的 SDK 嵌入代码 |
| 会清理追踪参数吗? | 会 – 列出每个被移除的键如 __tn__ 与 utm_* 家族 |
无需 – 输出是全新产生的代码 |
会解析 fb.watch 吗? |
会 – 保留短规范形式并以 kind:"short" 与专属错误标记 |
不会 – 请提供完整推文或视频网址 |
| 网络请求? | 零 – 全部为本地正则 | 预览从 connect.facebook.net 加载 sdk.js,并从 Facebook 加载渲染用 iframe |
| 会显示推文内容吗? | 仅结构 – 不显示推文数据 | 预览显示真实渲染的推文、视频或粉丝专页 |
解析器是分析师,生成器是建构者。发布流程中两者依序使用才完整 – 先以解析器识别并规范化杂乱分享链接指向的目标,再以生成器放到页面上。两者依相同语法建构,因此解析器接受为可嵌入推文或视频的链接,本生成器即可嵌入,而本生成器拒绝的链接也能由解析器的类型与消息说明。
功能限制
为避免过度信任,先说明边界:
- 不会直接嵌入
fb.watch短链接。 短链接在 Facebook 重新导向前不含目的地。请粘贴展开后的推文或视频网址。 - 无法仅凭网址可靠区分粉丝专页与个人文件。 两者皆共用
facebook.com/{username}与profile.php?id=...。静态允许清单会挡掉真实粉丝专页或放行个人文件 – 现实中两者皆曾发生 – 因此工具对任何粉丝专页形状的网址都会产生代码,仅在 SDK 渲染出零或极小 iframe 或回报渲染错误时,才显示黄色预览警告。 - 不会覆写隐私或限制。 私密推文、观看者无权限的社团推文、受年龄或地区限制的粉丝专页,以及作者已关闭嵌入的内容,即使代码正确也会渲染为空白或受限查看,即使是 Facebook 官方设置工具也会如此。
- 不会在渲染前先取得或验证推文内容。 验证是语法层级 – 内容是否存在且可嵌入,仅在 SDK 解析 div 时才有答案。
- 不会设置卡片样式。 渲染后插件内部的颜色、字体与外框皆由 Facebook 决定。你能控制的仅是存在与尺寸 – 是否显示文字、封面、好友头像、延迟与数字宽高。
- 不会自动安装代码。 你拷贝的就是你粘贴的,工具无法伸入你的 CMS 或页面建构器。
疑难排解
| 问题 | 原因 | 解决方式 |
|---|---|---|
| 「找不到可嵌入的 Facebook 链接」 | 非 Facebook 主机,或保留路由如 sharer.php / hashtag |
使用位于 facebook.com、fb.watch 或 fb.me 的推文、视频或粉丝专页网址 |
| 「fb.watch 短链接无法直接嵌入」 | 官方短链接 – 无法在本地解析目的地 | 打开链接并拷贝完整的推文或视频网址 |
| 粉丝专页形状网址出现黄色「此网址可能是个人文件」 | SDK 渲染出空或极小 iframe,或回报渲染错误 – 相同网址形状同时服务粉丝专页与动态墙 | 以已知粉丝专页如 facebook.com/facebook 测试 – 若该页可渲染,表示警告正确标记了个人网址。真实粉丝专页仍出现警告时,可能是粉丝专页受限或未发布 |
| 「Facebook SDK 加载失败」 | 广告阻挡器、追踪保护或对 connect.facebook.net 的网络阻挡 |
为此页面将 connect.facebook.net 加入白名单,并以无痕窗口重试 |
| 「Facebook 未在 15 秒内渲染预览」 | 非公开或受限内容,或 Facebook 暂时不可用 | 在 facebook.com 打开原始链接 – 若需登录或显示限制插页,表示在你网站上的嵌入也会有相同行为 |
| 输入的宽度被贴齐到 500 / 1920 | 超出范围的值在离开字段时被夹回 | 属预期行为 – 工具反映 Facebook 文档范围,请在嵌入选项所示范围内输入 |
| 预览正常,在我的网站上却空白 | 网站 CSP 阻挡 Facebook 网域,或 CMS 移除了 div | 将 https://connect.facebook.net 加入 script-src,将 https://www.facebook.com / https://*.facebook.com / https://*.fbcdn.net 加入 frame-src;贴到原始 HTML,而非可视化编辑器 |
| 变更语言后推文内文仍是外文 | 属预期 – 语系仅本地化小工具外框,永远不会改推文内容 | 属预期 – 推文依原样显示 |
主控台出现 [Violation] Permissions policy violation: unload |
Facebook SDK 注册了被页面权限政策阻挡的 unload 处理器所产生的主控台噪音 |
无害 – 预览与产生的代码皆不受影响 |
隐私与数据处理
本工具对其流量诚实以告。
- 产生本身在本地完成。 解析网址、对应到分页、组装
fb-*div 皆以 JavaScript 字符串操作在你的浏览器中完成。没有 Toollect 服务器会看到你粘贴的链接。 - 预览会加载 Facebook 机制。 渲染卡片会从
connect.facebook.net依所选语系取得sdk.js,调用FB.init与FB.XFBML.parse,渲染后的 iframe 则来自facebook.com与fbcdn.net– 正是你拷贝的代码在读者浏览器中会产生的流量。 - 语言选择会写入代码。 选择
ja_JP即会将该语系写入你粘贴的加载器网址,访客浏览器将取得该语系的 SDK。Toollect 不会保存任何偏好。 - 无账号、无保存、无分析。 工具在内存内预览容器之外不保留任何状态,关闭标签页即结束一切。
- 发布代码代表访客会与 Facebook 通信。 这是嵌入第三方社交内容的本质 – 值得直言。若你需要完全脱机的 Facebook 流程,本站的 Facebook 链接解析器可在零网络请求下完成全部工作。
技术规格
详细信息:
- 输出:SDK div
fb-post/fb-video/fb-page含文档化data-*属性,加上fb-root与来自https://connect.facebook.net/{locale}/sdk.js的sdk.js#xfbml=1&version=v26.0;关闭「包含 fb-root div 与 sdk.js 加载器」时省略加载器区块 - 输入语法:主机
facebook.com含任意子网域、fb.watch、fb.me;用户名2–50字符[A-Za-z0-9.];分页[a-z][a-z0-9_]*且拒绝数字第二段;ID 为5–20位数字或pfbid[1,200];短码5–40字符英数;保留清单 43 项;profile.php?id=与/username皆路由至粉丝专页,留待渲染时验证 - 规范输出网址:粉丝专页为
https://www.facebook.com/{username}或profile.php?id=,推文为.../posts/{id}/share/p/{id}//story.php?story_fbid=...,视频为.../videos/{id}或watch/?v=,Reels 为.../reels/{id}/reel/{id},照片为.../photo/?fbid=,社团推文为.../groups/{gid}/posts/{id} - 尺寸:推文
350–750默认500,视频220–1920默认500,粉丝专页宽度 180–500默认340加高度 70–2048默认500;data-width/data-height直接写入,不涉及 iframe 尺寸 - 语言:可选 60 个
fbeLangCodes任一;fbeLangDefault跟随 Toollect 页面语言 –zh-hant→zh_TW、zh-hans→zh_CN、en→en_US、de→de_DE、es→es_ES、fr→fr_FR、it→it_IT、ja→ja_JP、nl→nl_NL、pt→pt_BR、sv→sv_SE;语系写入加载器网址并由预览 SDK 透过loadedLocale追踪重新加载 - 预览生命周期:
renderPreview注入fb-root加fb-*div,loadSdkJs(locale, cb)管理含语系敏感重新加载的缓存sdk.js(切换时移除旧脚本与window.FB),在容器上调用FB.XFBML.parse,startWatcher每 500 毫秒轮询 iframe 最多 30 次(15 秒)并在持续0×0时最多 6 次(约 3 秒)后显示个人文件警告,setPreviewLoading在四个退出点统一,fbe-fallback链接在任何诊断时指向lastCanonical - 浏览器支持:所有支持 clipboard API 与
async/defer脚本的现代浏览器;SDK 渲染需要第三方脚本运行与connect.facebook.net可连接
功能特色
- 一键产生推文、视频与粉丝专页插件的官方 Facebook JavaScript SDK 嵌入代码
- 拷贝前先以 Facebook 官方 sdk.js 渲染实时预览 – 含 SDK 加载失败与逾时诊断
- 从 60 种显示语言中选择 – 你的选择会写入访客加载的 sdk.js 加载器网址
- 精细调整每个官方插件选项 – 宽度、粉丝专页分页、封面、标头、好友头像与延迟加载
- 仅输出 SDK 代码,适用任何网站 – 视需要包含或省略 fb-root 与加载器
- 免费且在浏览器内完成 – 无需 API 密钥、无需账号、无需经过 Toollect 服务器