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 社團公告的文件、在活動頁面顯示粉絲專頁的活動分頁。顯示文字與延遲載入控制讓厚重頁面在滾動靠近前保持安靜。

運作方式

工具依五個步驟運作:

  1. 解析並分類網址 – 將輸入與 Facebook 連結語法比對:數字 ID 為 5–20 位或 pfbid 形式,使用者名稱 2–50 字元,分頁名稱符合 [a-z][a-z0-9_]*,官方主機為含任意子網域的 facebook.com 以及 fb.watchfb.me。追蹤用查詢鍵會被讀取但在路由時忽略 – 重建的正規網址永遠不會攜帶它們。缺少 ID 的路由如 facebook.com/watch 未帶 vfb.watch 未帶短碼會被拒絕。
  2. 選擇外掛類型post / photo / group-post 對應貼文,video / reel 對應影片,page 對應粉絲專頁外掛。分頁列會跟隨連結 – 貼上 watch 網址自動切到影片,貼上粉絲專頁網址自動切到粉絲專頁外掛,手動切換分頁時會清空過時輸出而非彈回。
  3. 收集你的選項 – 從分頁下拉選單取得語言,從數字欄位取得寬高,從粉絲專頁核取方塊取得分頁與外框,從影片切換取得全螢幕、自動播放與字幕。每次變更都會夾回有效範圍、寫回欄位並立即重新產生。
  4. 建構官方標記 – 你的選項會成為 fb-* div 上的 data-* 屬性,粉絲專頁外掛的載入器網址則會以 https://connect.facebook.net/{locale}/sdk.js#xfbml=1&version=v26.0 攜帶你的語言。不會建構 iframe 網址 – SDK 會在解析時直接取用 div 屬性。
  5. 渲染預覽 – 產生器將 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-postfb-videofb-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,預設 timelineheight 預設 500,布林值直接對應外掛的外框切換。
  • 載入器fb-root 加上來自 connect.facebook.net/{locale}/sdk.js#xfbml=1&version=v26.0en_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_TWzh-hans 對應 zh_CNen 對應 en_USdeesfritjanlptsv 亦同)– 顯示從 en_USaf_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,其中 localeen_USzh_TWfr_FRja_JP
  • 即時預覽 – 變更下拉選單會重建預覽容器,移除先前以不同語系載入的 SDK 指令碼,清除 window.FB,再全新載入新語系後呼叫 FB.XFBML.parse

預設值會自動跟隨你的 Toollect 網站語言 – 瀏覽 toollect.com/zh-hant/tools/facebook-embed-generator/ 會預選 zh_TWzh-hans 預選 zh_CNja 預選 ja_JP,歐洲語言則對應其地區形式(de→de_DEfr→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 本身提供的所有語言,因此貼上程式碼後很少需要手動編輯。

使用方式

  1. 貼上 Facebook 網址到輸入框 – 上表任何接受的格式皆可,包括 m.facebook.com 與解析為粉絲專頁的 fb.me 短連結。網址配置與 www. 可省略。
  2. 按下產生或按 Enter。程式碼會出現在輸出框,預覽會自動開啟並顯示真實 SDK 渲染結果。網址列也會驅動分頁 – watch 連結切到影片,粉絲專頁連結切到粉絲專頁外掛。
  3. 視需要選擇分頁 – 貼文、相片與社團貼文選貼文,影片與 Reels 選影片,粉絲專頁選粉絲專頁外掛。切換時會以該分頁的選項重新產生,不符的分頁會清空過時輸出。
  4. 設定語言 – 預設已符合你的網站語言,但你可從 60 個語系中任選。產生的載入器網址與預覽都會立即切換。
  5. 調整其餘選項 – 寬度、粉絲專頁用高度、標頭與封面切換、延遲載入。每次變更都會重新產生,程式碼區塊與預覽永不脫節。
  6. 查看預覽診斷 – 若未出現卡片,輸出上方的警告會說明是 SDK 被阻擋、內容無法渲染,或網址指向個人動態牆而非粉絲專頁。
  7. 複製程式碼並貼到頁面上要顯示嵌入的位置。若網站已載入 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 回報渲染錯誤 粉絲專頁外掛為粉絲專頁而設 – 個人動態牆與 /usernameprofile.php?id=... 等粉絲專頁共用相同網址形狀,因此靜態檢查會誤判真實粉絲專頁。請以已知粉絲專頁如 facebook.com/facebook 測試 – 若該頁可渲染,表示警告正確標記了個人網址

兩種計時警告皆在寬鬆等待後才觸發 – SDK 下載 20 秒、渲染再 15 秒 – 因此連線較慢不會造成誤報。可嵌入的貼文遠在時限內即可渲染,個人檔案的粉絲專頁外掛則在 iframe 維持零尺寸約三秒後顯示黃色警告。

一個值得了解的細節:產生器會追蹤 loadedLocale。成功渲染後變更語言時,會移除先前的 sdk.js script 標籤、清除 window.FB,再全新載入新語系後解析。先前語系已渲染的卡片會在新解析前從預覽容器中清除,因此預覽永遠與你將複製的載入器網址一致。

專業提示

  • 與 Facebook 連結解析器搭配使用。 解析器分析並清理連結 – 類型、使用者名稱、ID、已移除的追蹤鍵 – 而此產生器將乾淨連結轉為程式碼。以解析器歸檔,以產生器發布。
  • 一個載入器、多個嵌入。 含多個 Facebook 嵌入的頁面只需載入一次 sdk.js – 第一個嵌入勾選載入器產生,其餘不勾選,或在網站樣板中自行載入 SDK 並全部省略。fb-root div 每頁也只需一次。
  • 先為版心設計,再設定寬度。 Facebook 卡片在選項表的寬度附近視覺上達到上限,預覽會在定案前顯示容器尺寸下的真實結果。輸入精確像素值 – 567 也有效 – 僅在超出文件範圍時才會被夾回。
  • 以影片為主的貼文請用影片模式。 透過貼文外掛嵌入的影片會渲染為靜態卡片 – 以 fb-video 嵌入則渲染為帶自動播放與字幕控制的播放器,符合外掛文件。
  • 明確鎖定語言。 讓外框跟隨宿主頁的 <html lang> 會使輸出取決於貼上位置。包含 en_US 在內的每個明確選擇都會將語系寫入程式碼,無論宿主為何都能重現相同標籤。
  • 厚重頁面使用延遲載入。 含三個粉絲專頁外掛動態牆的文章可直接受益於 data-lazy – SDK 會延後解析直到嵌入捲動靠近。
  • 粉絲專頁外掛分頁保持最少。 每增加一個分頁都會增加高度與網路成本 – 僅 timeline 是最快的初始渲染,僅在頁面真的需要時才加入 eventsmessages

替代方案

還有哪些方式可將 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.comfb.watchfb.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.initFB.XFBML.parse,渲染後的 iframe 則來自 facebook.comfbcdn.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.jssdk.js#xfbml=1&version=v26.0;關閉「包含 fb-root div 與 sdk.js 載入器」時省略載入器區塊
  • 輸入語法:主機 facebook.com 含任意子網域、fb.watchfb.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 預設 500data-width / data-height 直接寫入,不涉及 iframe 尺寸
  • 語言:可選 60 個 fbeLangCodes 任一;fbeLangDefault 跟隨 Toollect 頁面語言 – zh-hant→zh_TWzh-hans→zh_CNen→en_USde→de_DEes→es_ESfr→fr_FRit→it_ITja→ja_JPnl→nl_NLpt→pt_BRsv→sv_SE;語系寫入載入器網址並由預覽 SDK 透過 loadedLocale 追蹤重新載入
  • 預覽生命週期:renderPreview 注入 fb-rootfb-* div,loadSdkJs(locale, cb) 管理含語系敏感重新載入的快取 sdk.js(切換時移除舊指令碼與 window.FB),在容器上呼叫 FB.XFBML.parsestartWatcher 每 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 伺服器

常見問題

Facebook 嵌入產生器會產生什麼?
它會建構 Facebook 官方文件記載的 JavaScript SDK 片段 – 帶有 fb-post、fb-video 或 fb-page 樣式類別的 div 加上 sdk.js 載入器。放到已載入 Facebook SDK 的頁面上時,這個 div 會被來自 facebook.com 的 iframe 內完整渲染的卡片、影片播放器或粉絲專頁動態牆所取代。工具不會自創標記 – 而是組合出與 Facebook 外掛設定工具相同的屬性。
哪些 Facebook 連結可以嵌入,哪些會被拒絕?
貼文、相片與社團貼文歸到貼文分頁,影片與 Reels 歸到影片分頁,粉絲專頁則歸到粉絲專頁外掛。位於 facebook.com 且含任意子網域如 m.facebook.com 的連結,以及官方短網域 fb.watch 與 fb.me 都會被接受。產生器會正規化追蹤參數與顯示後綴並顯示正規形式。fb.watch 短連結無法直接嵌入,需要完整的貼文或影片網址,非 Facebook 網域與不完整網址則會以專屬訊息被拒絕。
為什麼產生器只提供 JavaScript SDK 程式碼,而不提供 iframe?
SDK 程式碼是 Facebook 為三種外掛類型持續維護的格式,也是唯一支援語言選擇、自動尺寸與完整顯示選項的形式。單獨的 iframe 仍可渲染,但會失去語言控制與官方尺寸行為。維持單一程式碼路徑也簡化了診斷 – 預覽執行的是與你的頁面相同的 SDK。
語言設定如何運作?
你的選擇會寫入 sdk.js 載入器網址 – 例如繁體中文會是 https://connect.facebook.net/zh_TW/sdk.js。Facebook 會將嵌入周圍的外框如時間戳記與操作標籤本地化為該語言,而貼文內文本身則保持原樣。切換語言時預覽會重新載入 SDK,預設選項則跟隨你的 Toollect 網站語言,例如 zh-hant 對應 zh_TW、zh-hans 對應 zh_CN。
為什麼我的粉絲專頁外掛預覽顯示警告或保持空白?
工具會在你的瀏覽器中執行 Facebook 的 SDK。若完全無法下載 SDK 指令碼,你會看到廣告阻擋器警告。若 15 秒內未出現 iframe,你會看到逾時警告 – 通常是私密貼文、年齡或地區限制,或作者已關閉嵌入。若 iframe 出現但數秒內維持 0 或小於 70 像素,你會看到個人檔案警告 – 粉絲專頁外掛是為粉絲專頁設計,個人動態牆與粉絲專頁共用相同網址形狀,因此只能在渲染後判斷。
這與本站的 Facebook 連結解析器有何不同?
連結解析器會拆解任何 Facebook 連結 – 類型、使用者名稱、ID、粉絲專頁 ID – 移除數十個追蹤參數並重建乾淨的正規、嵌入與分享網址。這個產生器則反向運作 – 將已識別的連結轉為可直接貼到網站的 SDK 標記。兩個工具共用相同網址語法,因此解析器接受為貼文、影片或粉絲專頁的連結,這個產生器就能嵌入,而這個產生器拒絕的連結也能由解析器說明原因。
ESC