為 Facebook Comments 留言外掛程式加入延遲載入 Lazy Load 功能教學

幾天前在「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" />

view raw gistfile1.php hosted with ❤ by GitHub

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>