跳到主要內容

如何在 Blogger 或個人網站上嵌入可以管理的 Facebook 留言板 (FB Comments Social Plugin) 教學



Blogger 原生的留言板其實做得滿爛的,大部分人都會選擇使用像 FB 提供的留言框架來作替代,那如果是自架的 CMS 像 Wordpress 或許有比較好的留言 Plugins 可以選用,而靜態網頁或其他網站甚至得從頭到尾自己搞,光是資訊的回傳、身分驗證等就是個大工程,但 Facebook  Comments 只要加上簡單一段程式碼就能建置功能完善還附帶留言審查的回響功能,可以說是非常方便。


如果要建立附有管理功能的 Facebook 留言板就必須到 Facebook for developers 建立自己的應用程式並且複製這個應用程式編號,供之後留言板需要。


留言板程式碼的部分你可以選擇直接到官方文件生成,或複製下方的稍作修改。

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = 'https://connect.facebook.net/zh_TW/sdk.js#xfbml=1&version=v2.12&appId=剛剛的應用程式編號&autoLogAppEvents=1';
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
上方的程式碼建議是放置在 <body> 標籤的一開始,並且記得修改應用程式編號。這段是所有 FB Plugins 通用的,如果之後還有要裝按讚小工具就不必再安裝一次這段程式碼。


<div class="fb-comments" data-href="" data-numposts="5"></div>
這段則放置在想要顯示留言板的地方,data-href 建議留白就會自動抓取當下的網址,data-numposts 則是設定會顯示幾篇留言後收合,也可以額外加上 data-width 限制 FB 留言板的寬度。


以 Blogger 為例,第二段要顯示的程式碼就是放置在 <b:includable id='comments' var='post'> 的後方,如上圖所示,如此一來 FB 留言板就會顯示在原生的留言板之上。


<meta property="fb:admins" content="個人帳號編號"/>
<meta property="fb:app_id" content="你的應用程式編號"/>
那要指定留言板的管理功能就必須在 <head> 後方加入任一行程式碼 (兩行都加也可以),分別是指定個人帳號為管理員或某個應用程式的擁有者為管理員。個人帳號的編號可以用這個找到。


那如果留言板已經加上去也指定管理員了卻沒出現如上的審核功能怎麼辦?可能只是 Facebook 尚未更新你的對接內容,可以到除錯工具將網址打入再重整看看,應該就會出現了。



留言

張貼留言



這個網誌中的熱門文章

Linux (Ubuntu) 查詢硬碟容量、剩餘大小指令

在 Ubuntu Desktop 版本或有安裝 GUI 像 Xfce 的 Server 版本當然可以直接從圖形介面查看硬碟容量和已經使用的大小, 但如果是在純 CLI 版本或使用 SSH 連線時呢?那就需要用到指令了。 顯示硬碟容量、已使用、可用大小。 df -h 查詢資料夾所占硬碟的大小。 du -h 查詢檔案大小 ls -l

吃光硬碟讀寫的大怪獸 - Superfetch 是什麼?可以關嗎?

Superfetch 是 Windows 內建的硬碟快取功能,它會預先將檔案讀取起來到 Ram 裡方便稍後做使用,所以常常在工作管理員內都可以看到 Superfetch 往往占掉了不少的硬碟使用量,那這樣的情形是好的嗎?其實理論上並不會有太大影響,畢竟 Superfetch 只是將等會要讀取的內容先預置在 Ram 中,如果不趁硬碟負載小的時候優先讀取,之後反而可能忙不過來呢。當然如果你是使用 SSD 的話可能會為使用壽命擔心, 高頻率的讀取可能加速固態硬碟老化,那在讀取速度原本就很快的 SSD 當然就相對的沒有必要開啟 Superfetch 了。 Superfetch 在電腦待機時吃掉大部分硬碟使用量是很常有的事。 要關閉也很簡單, Win+R > services.msc 打開「服務」,找到 Superfetch。 右鍵 > 內容,將它更改為「 已停用 」後確定即可。

TLS / SSL 金鑰轉檔,「.crt / .key」如何轉成「.pem」?( OpenSSL 教學)

不管是哪個 Certificate Authority (CA) 發的憑證多半金鑰檔都是給「.crt / .key」格式的檔案,像是「ca_bundle.crt」、「 certificate.crt」和「.private.key」這種檔案, 但是在實際使用 (Nginx、Apache...等伺服器) 卻會需要的是「.pem」檔 ,那要怎麼轉換呢?其實可以直接使用 OpenSSL 這個軟體和幾行指令來達成。 OpenSSL 官方網站 :  https://www.openssl.org 下載頁面 :  https://www.openssl.org/source sudo apt-get install openssl 以 Linux (Ubuntu / Debian ...等) 為例,可以直接使用 apt-get 指令下載安裝 OpenSSL,如果是其他系統可以參考官方網站的說明。 openssl rsa -in private.key -text > private.pem openssl x509 -inform PEM -in certificate.crt > certificate.pem openssl x509 -inform PEM -in ca_bundle.crt > ca_bundle.pem 以前述所提到的「ca_bundle.crt」、「 certificate.crt」和「.private.key」三個檔案為例,就可以用上方的指令完成轉檔,其實同副檔名的轉檔指令都相同,所以兩個「.crt」的指令其實是重複的,也要記得套換成自己的檔案名稱。 如果需要申請免費的 SSL 憑證也可以參考之前介紹過的 SSL For Free ,它是使用「Let's Encrypt」核發的憑證,以及如果覺得申請憑證和定期更新太麻煩,也可以考慮自動化的 Caddy Server 能自動幫網站升級 HTTPS。