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

為 Facebook Comments 留言外掛程式加入延遲載入 Lazy Load 功能
Copyright : dolphfyn / 123RF Stock Photos

幾天前在「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 檔案進行修改。

https://gist.github.com/Pseric/41e687628f2f91736ae7180229633298

STEP 2

接著打開佈景主題 single.php(或相關檔案),找到跟迴響相關的程式碼片段,例如:comments_template() ,將它完整移除以關閉內建留言功能。複製以下程式碼貼上,以 Facebook Comments 作為預設的留言工具。

https://gist.github.com/Pseric/7b40e2d0fd9ee7a2698220c8d7c31695

這邊要注意的是 YOUR_APP_ID 必須改為你的應用程式 ID,同時確認 sdk 版本是否過時,如果直接使用這段代碼,已有 Lazy Load 也就是延遲載入的功能內建其中,而獲取留言的方式是使用該頁面的固定網址。

分享本文
Pseric
Pseric

學生時代成立網站以來堅持每日更新,在挖掘資料的過程中慢慢找出自己經營網站的方法,最開心的是有一群一起長大的讀者。

文章: 6250