跳到主要內容

如何在 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 尚未更新你的對接內容,可以到除錯工具將網址打入再重整看看,應該就會出現了。



留言

張貼留言



這個網誌中的熱門文章

WinRAR - 繁體中文版、免費版,別再破解了,老牌壓縮軟體直接免費給你用

WinRAR 應該對於所有 Windows 使用者一點都不陌生,可能也是很多人壓縮、解壓縮檔案的首選,舉凡 RAR、ZIP、7-Zip、TAR ...等檔案格式都可以處理,製作自解壓縮 (.EXE) 檔也沒問題,也算是最老牌的解壓縮軟體之一。 WinRAR 官方網站 :  https://www.win-rar.com 繁體中文版 :  https://rar.tw/download.html 永久免費簡體版 :  http://www.winrar.com.cn/download.htm 其實我也不太理解為什麼一個 WinRAR 可以有這麼多版本、不同語系的官網,畢竟在最原始的官網內也有「漢語」(簡體中文) 的選項,所以其他的國家自己的官網算代理商嗎? 如果真的要說我會比較建議到 英文版的官網 下載,畢竟這種軟體轉了一手又一手,加了什麼都不知道。

鍵盤按鍵壞了怎麼辦?用 Sharpkeys 換一個鍵來用就好啦 (重新設定 / 配置鍵盤按鍵 / Key Mapping)

我有一個壞習慣就是很常按 Alt+Tab,有時候即使沒要跳畫面還是偶爾會手癢按個幾下,尤其 Alt 又是大拇指按的,可能我的大拇指特別有力所以最近把 Alt 真的按壞了,我是用青軸的機械式鍵盤,所以每個軸都是獨立的應該是可以更換,但如果是用薄膜式鍵盤呢?那可能只能整把換掉了, 或是交換一下鍵位拿一個平常沒在用的鍵頂替一下,也就是今天要介紹的「Sharpkeys」。 Sharpkeys 官方網站 :  http://www.randyrants.com/category/sharpkeys GitHub :  https://github.com/randyrants/sharpkeys 使用 Sharpkeys 會需要 .NET Framework 4.0,如果還沒有安裝的可以到 微軟官方 下載。 開啟 Sharpkeys 後點選 「Add」 ,左方是選擇 「被重新分配的鍵位」 ,右方是 「替代的鍵位」 ,你也可以按 Type Key 直接用打的讓系統偵測。 像我就做了兩個 Key Mapping,其實就是 Win 鍵和 Alt 鍵互換啦,設定完成後就按「Write to Registry」寫入註冊表, 然後重開機或重新登入就可以生效囉。

Facebook 臉書按「讚」小工具 (讚按鈕),把程式碼置入網站、Blogger 讓人隨時按讚 (一分鐘安裝完成)

Facebook 的按「讚」小工具大概是所有社交外掛程式裡面最受歡迎的了,除了按讚功能外還有結合「分享」,很適合放在網站的文章內讓讀者能把好的東西推薦給別人,而且安裝使用這個小工具並不需要建立獨立的應用程式,只要將程式碼貼進網站內就可以了。同樣是 Facebook 社交小工具的還有 留言板 (Comments) 可以參考 這篇 。 到 Facebook 社交外掛頁面選擇自己想要的按鈕形式, 建議可以把按讚網址留白,這樣它就會自動抓取當下的網址按讚 ,之後點擊取得程式碼。 <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';   fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script> 之後會得到兩段程式碼, 上方的這種貼進 <body> 的開頭 ,如果網站已經安裝過類似的社交小工具可以不必再安裝這段程式碼,它是可以共用的。 <div class="fb-like" data-layout="standard" data-action="like" data-size="small" data-show-faces="true" data-share="true"></div> 這段則貼到想要讓 按鈕顯示的位置 ,可以自行決定。 如果是使用 B...