幾天前在「CommentBox.io 沒有廣告、不追蹤用戶隱私的網站留言系統」一文有提到當今網站或部落格使用的幾種留言服務，而目前最多網站使用就屬 Facebook Comments 臉書留言外掛程式，可透過幾行程式碼快速串接，也不用自己建置相關系統或資料庫，整合使用者的 Facebook 帳戶在管理上更容易，我在幾年前就已經將 WordPress 內建的迴響功能關閉並替換為臉書留言外掛，在資源耗用和安全性方面更為理想。
雖然 Facebook Comments 速度還算快，但對於網頁載入時間也會有些影響，一開始我只把這段程式碼擺在文章頁面下方，後來發現每次打開網頁、不管有沒有要留言都會花時間載入 Facebook 相關 .js 檔，於是就研究了一下應該怎麼改善這個問題。
預設的 Facebook Comments 外掛程式沒有延遲載入，也就是每次開啟網頁只要有這段程式碼就一定會載入留言功能，因此可以加入一個判斷視窗高度的參數，當拖曳到留言框位置時才會載入相關檔案。這段程式碼修改自 Lazy Facebook Comments Plugin，原本使用於 Ghost，但稍微調整一下後 WordPress 也可使用，而且不用額外安裝外掛。
使用教學
STEP 1
首先，你必須先去 Facebook 自行建立一個新的應用程式，然後獲取應用程式 ID，這部分我就不多做介紹，網路上已經有很多完整教學，也或許你本身已經在網站上安裝過留言功能。
為了讓 Facebook Comments 具有留言審核工具功能，要在網頁的 前加入這兩行宣告代碼，同時將 YOUR_FACEBOOK_USER_ID 設定為你的臉書使用者 ID，YOUR_APP_ID 設定成應用程式 ID ，這部分通常可以從佈景主題的 header.php 檔案進行修改。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <meta property="fb:admins" content="YOUR_FACEBOOK_USER_ID" /> | |
| <meta property="fb:app_id" content="YOUR_APP_ID" /> |
STEP 2
接著打開佈景主題 single.php（或相關檔案），找到跟迴響相關的程式碼片段，例如：comments_template() ，將它完整移除以關閉內建留言功能。複製以下程式碼貼上，以 Facebook Comments 作為預設的留言工具。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script> | |
| function loadAPI() { | |
| var js = document.createElement('script'); | |
| js.src = '//connect.facebook.net/zh_TW/sdk.js#xfbml=1&appId=YOUR_APP_ID&version=v3.2'; | |
| document.body.appendChild(js); | |
| } | |
| window.onscroll = function () { | |
| var rect = document.getElementById('comments').getBoundingClientRect(); | |
| if (rect.top < window.innerHeight) { | |
| loadAPI(); | |
| window.onscroll = null; | |
| } | |
| } | |
| </script> | |
| <div id="fb-root"></div> | |
| <div id="comments" class="fb-comments" data-width="100%" data-href="<?php the_permalink() ?>" data-numposts="10" data-colorscheme="light"></div> |
這邊要注意的是 YOUR_APP_ID 必須改為你的應用程式 ID，同時確認 sdk 版本是否過時，如果直接使用這段代碼，已有 Lazy Load 也就是延遲載入的功能內建其中，而獲取留言的方式是使用該頁面的固定網址。
