2013年11月1日 星期五

[小工具]FB 留言板安裝懶人包__各大部落格通用(附Blogger, Xuite, Pixnet範例)

[小工具]FB 留言板安裝懶人包__各大部落格通用(附Blogger, Xuite, Pixnet範例)

Wayne Fu 0 A+
2014.5.28 公告:最新版本請見:「Facebook 留言板安裝懶人包 V2

Facebook 留言框要成功安裝在部落格不是容易的事,從官方提供的安裝方式來看,只能裝在 Blogger、Wordpress 這種開放自訂範本的部落格。但就算在 Blogger、WP,仍然常看到試遍各種網路教學、還是找不出安裝失敗因素的各種反應。其原因主要在於安裝步驟多,使用者不容易找出是那個步驟導致失敗。

前陣子安裝完 FB 留言框後,研究一下整個流程,覺得是有辦法將安裝程式碼的動作簡化到最少──只有一個步驟。利用本文封裝後的程式碼懶人包,以後安裝 FB 留言框就不會是苦差事了。而且更棒的是,由於只有一個步驟,如此只要是支援 js 的部落格,都是有可能成功安裝 FB 留言框的



一、準備動作


雖然安裝懶人包程式碼只要一個步驟,但仍須事先取得 FB 的身份識別碼,因此請先進行以下動作:

1. 取得 FB 管理者 ID

進入這個網址:https://lookup-id.com/

輸入 Facebook 帳號的網址後,按下「Lookup Numeric ID」即可取得管理者 ID,類似 100006369483483 這樣的一串數字。


2. 取得 FB 應用程式 ID

參考這篇教學「申請 Facebook 應用程式 APP ID 流程」即可取得。

因此以本文來說,取得 APP ID 是比較稍微有變數的一部份,能成功的話之後問題就不大了。



二、程式碼內容及參數


在修改範本之前,如果第一次安裝本站工具的讀者,建議先閱讀「備份範本的訣竅」系列文章。


安裝程式碼之前,需修改一些參數,請對照以上程式碼行號:

D:紅色字串請改為「一、準備動作」→「1. 取得 FB 管理者 ID」的字串 (Blogger 可省略此動作)

E:紅色字串請改為「一、準備動作」→「2. 取得 FB 應用程式 ID」的字串 (Blogger 可省略此動作)

F:藍色字串請改為符合自己頁面寬度的像素值

G:預設值為最多顯示 5 則留言,可自行調整

H:這一行要設定的是 FB 留言框出現在網頁上的位置。稍微解釋一下──
  • 如果對程式碼不熟的使用者,請參照以下大標題,依不同部落格的安裝範例來修改。
  • 如果對 HTML 很熟悉的使用者,想自訂 FB 留言框的擺放位置,可參考類似「Chrome開發人員工具」,來找出預定擺放區塊的 id 或 class,然後將 H 行的紅色字串,置換為 "#id字串" 或 ".class字串" 這樣的形式即可。

I:FB 留言框官方有兩種顏色效果,預設值適合淺色為底的部落格;若部落格底色是深色,可將藍色字串改為 dark


三、Blogger 安裝


請到後台「範本」→「編輯 HTML」,搜尋 </body> 這個字串,找到後在此字串的前一行,插入「二、程式碼內容及參數」的程式碼即可。

2013.11.22 補充

並在 <head> 的後面一行,插入以下程式碼,才能使用留言管理的功能:

<meta content='100006369483483' property='fb:admins'/>
<meta content='457090704320320' property='fb:app_id'/>

以上第一行的紅色字串請改為為自己的管理者 ID第二行的紅色字串請改為為自己的 app ID


程式碼 H 行的參數即代表 Blogger 的留言區塊,因此可不修改,FB 留言框出現的位置會在原留言區塊的上方;若 FB 留言框想放在別的地方,請按照 H 行的說明進行。

想先看 Blogger 的安裝效果可參考以下網頁:




四、非 Blogger 安裝


非 Blogger 平台的部落格,除了 WP 以外,大致都需要安裝到側邊欄的小工具或自訂欄位,最好放在最下面的位置;且程式碼 H 行的參數就一定要修改了,請參考以下的範例安裝。

1. Xuite
  • 先修改「二、程式碼內容及參數」的所有參數,H 行的紅色字串請改為 ".item_message"
  • 新增自由欄位,所有程式碼複製進去,並將此自由欄位放在側欄最下方即可。
  • FB 留言框出現的位置會在原留言區塊的上方。

想看效果可參考以下範例網頁:



2. Pixnet

Pixnet 本身有提供 FB 留言框的 app,可直接在「應用市集」安裝。測試之後發現,Pixnet 會將這個 app 的位置綁定在文章結尾處而無法移動。因此,如果想讓 FB 的留言集中在部落格原本留言區塊的話,那麼就可使用本文的程式碼,請依以下步驟:
  • 先修改「二、程式碼內容及參數」的所有參數,H 行的紅色字串請改為 "#comment-text"
  • 新增自訂欄位,所有程式碼複製進去,並將此自訂欄位放在側欄最下方即可。
  • FB 留言框出現的位置會在原留言區塊的上方。

想看效果可參考以下範例網頁:



其他部落格若想安裝 FB 留言框,但不知道 H 行參數如何修改,請再留言並提供網址,會再測試後告知如何修改,並增加到本文的安裝範例之中。



五、調整留言框 CSS 版面配置


如果對留言框的版面效果不滿意,例如 Xuite 剛安裝後可能會貼住左邊界,那麼就需要設定 CSS 參數,例如設定邊界值 margin 的參數。以下提供的範例,其參數內容請依自己需求調整。

1. 由於每個部落格的設定不一樣,如果知道部落格的 CSS 如何設定的話,可在 CSS 設定區域加入以下程式碼──

.fb-comments {
margin: 10px;
}


2. 如果不清楚部落格 CSS 如何設定的話,那麼最簡單的方法(但網頁執行效率稍差),就是在程式碼 A 行與 B 行之間,插入以下程式碼──

<style>
.fb-comments {
margin: 10px;
}
</style>


3. 經測試後 Pixnet 的 FB 留言框會與下方原本的留言貼太近,因此下邊界值最好設定多一些,可在 CSS 設定區域加入以下程式碼──

.fb-comments {
margin-bottom: 20px;
}




六、管理 FB 留言


如何管理 FB 的留言,網路上已經有非常多教學,因此就不用自己再寫一次,以下直接給連結。

這篇請直接看 Step 7~8,可讓管理者收到留言通知


這篇的後半段,對於如何管理留言講得比較仔細。


最後,如同「四、非 Blogger 安裝」所提,其他部落格若安裝上有問題,歡迎留言詢問,會盡量補齊其他部落格的安裝方式。


更多實用工具:
0 0
如這篇文章對你有幫助,歡迎「分享」到 FB、「追蹤」粉絲團、「訂閱」最新文章
TOP