幾天前在「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 檔案進行修改。
| <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 作為預設的留言工具。
| <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 也就是延遲載入的功能內建其中，而獲取留言的方式是使用該頁面的固定網址。
