如何把Facebook帖文嵌入到你的HTML網頁
— 比較 IFrame 與 JavaScript SDK 方法 (有片)
Published in
5 min readAug 7, 2018
要把 Facebook 帖文嵌入到你的網頁，分別有2個方法：
1. 複製 Facebook 提供的 HTML IFrame 代碼至你的 HTML 網頁。
2. 安裝Facebook 社交外掛程式 (Social Plugins) 的JavaScript SDK，然後在你的網頁裏再插入包括 Facebook 帖子 URL 的<div>代碼。
兩種方法都可以在Facebook開發 — 內嵌帖子 — 社交附加程式 的說明網頁之中，取得代碼。
IFrame 方法
這個方法是利用 iframe 所以並不需要 JavaScript 來執行，只需要把 Facebook 產生的代碼插入到網頁的 HTML 編碼檔案之中即可，非開發人員也能簡單地把 Facebook 帖文嵌入至其網站的網頁。
HTML代碼的格式如下：
<iframe src="https://www.facebook.com/plugins/post.php?href=<url>&width=500&&show_text=<boolen>&appId=<fb-app-id>" width="500" height="474" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allow="encrypted-media"></iframe><url>為 Facebook 帖文的 URL地址。<boolen>為 show_text 的值，可選填true或false，切換是否加上完整貼文。<fb-app-id>為 Facebook 應用程式 ID，須到開發者介面申請。
相關外連：[教學]如何申請建立 Facebook APP ID 應用程式ID ？ — 香腸炒魷魚
雖然簡單，但有很多缺點，包括：
- 非響應式設計，不能自動調整嵌入物件的高度；
- 基於 cross-domain / third-party iframe ，無法用JavaScript讀取/修改IFrame裏的資料；
- 不能夠收集數據至Facebook Analytics
JavaScript SDK 方法
此方法較適合開發人員使用，但是設定比較複雜。在網頁的<body>標籤的開首，需要插入以下程式碼以載入 Facebook 的 JavaScript SDK：
<div id="fb-root"></div><script>
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = 'https://connect.facebook.net/zh_HK/sdk.js#xfbml=1&version=v3.1&appId=<fb-app-id>&autoLogAppEvents=1';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
※ 請緊記取代<fb-app-id> 為 Facebook 應用程式 ID。
之後，在要顯示的位置插入以下 HTML 代碼：
<div class="fb-post" data-href="<url>" data-width="500" data-show-text="true"></div>※ <url> 為 Facebook 帖文的 URL地址。
利用 JavaScript SDK 嵌入 Facebook 帖子的優點，包括：
- 可啟用收集數據至 Facebook Analytics。
- 帖子載入時，會按照內容自動調整物件的闊度及高度。
- 可以利用JavaScript 呼叫 Reference — 網頁 SDK 裏的功能，來修改嵌入式帖子之大小(Canvas Resizing — 網頁 SDK)或重新畫面 (XFBML Parsing — 網頁 SDK) 。
- 可啟用除錯模式，獲得更多及更嚴格的記錄。除錯操作需要在程式碼中，變更 js.src 的值為：
js.src = "https://connect.facebook.net/en_US/sdk/debug.js";
※ debug.js為非縮小化版本 (non-minified)，因此會降低網頁速度。
小結
如果您喜歡這篇文章，請為此文章 👏 👏 👏 👏 👏 👏 👏，並分享至你的 Facebook 及 Twitter。
假如您有任何疑問或建議，歡迎標註留言或透過 Facebook 專頁 聯繫我 🙂
