為 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 檔案進行修改。

.gist table { margin-bottom: 0; }

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

Show hidden characters

	<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 作為預設的留言工具。

.gist table { margin-bottom: 0; }

Show hidden 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>