教你如何在FC2部落格上， 安裝FaceBook留言板 part3

此篇文章接續 教你如何在FC2部落格上， 安裝FaceBook留言板 part2 如還沒看過part2篇，可先前往觀看

此部份較為複雜許多，由其是plugin插入，顯示FaceBook留言板步驟，對代碼不熟識的人，只能多試幾次，文章尾部也有youtube視頻可參考

個人建議，最好使用notepad++之類的文字編輯軟體，將blog.fc2.com的網頁html代碼，複製copy出來，會比較好查視

blog.fc2.com部落格，安裝facebook留言板之流程

１、到設定樣板，找到＜ｂｏｄｙ＞，並在＜ｂｏｄｙ＞下方，貼上 FaceBook 之 sdk.js 調用代碼

２、在blog.fc2.com部落格內建留言板上方，貼上facebook留言板顯示代碼

似乎<%topentry_link>是文章迴圈變數，不能在comment_area跑，因此改用引用網址<%trackback_url>變數

將http://123test.com替換成<%trackback_url>

找到<!--comment_area-->並在下方插入facebook留言板顯示代碼

<div class="fb-comments" data-href="<%trackback_url>" data-numposts="8" data-width="100%" data-order-by="reverse_time"></div>

ok後如下

隨後發現一個缺點，就是留言的人，得到回覆後，FaceBook通知是帶引用網址，這樣就不太好，畢竟用FaceBook留言板的好處之一，就是有回覆，要能通知留言的人

於是還是使用<%topentry_link>網址變數，只是改放在<!--/more-->的前面，不過有一個小缺點，就是要有內文，才能顯示FaceBook留言板，正規的部落格寫法，是有前言和內文，所以沒什麼影響

facebook留言板顯示代碼，前方加一個<br />標籤，做空格，才不會黏太近，原則上，看你所使用的風格而定

<br /><div class="fb-comments" data-href="<%topentry_link>" data-numposts="8" data-width="100%" data-order-by="reverse_time"></div>

找到<!--/more-->並將代碼放至在<!--/more-->的前面

ok後如下

３、連結方面，添加一個FaceBook留言板管理網址，方便點擊後，可以進行管理

額●●●似乎管理的部份，還在調整吧，測試了一下，沒反應，總之FB留言板管理網址，可以先用上

FaceBook留言板管理網址

https://developers.facebook.com/tools/comments/這邊換上該應用之app_id代號/

安裝FaceBook留言板步驟就到這了，算是作個記錄吧，畢竟修改部落格網頁，不是天天在用，一般都隔很久，待未來更換風格時，可以回顧觀看一下，有需要的人，也可參考看看


返回目錄 → ( 部落格 Blog 修改 ) 之相關文章，連結總整理


對上述圖文教學，還不太明白的話，請至下方連結，查看 youtube 視頻解說

視頻解說之第一部分 https://www.youtube.com/watch?v=OID1cz7On4s

謝謝大家，抽空觀看，files備份檔名 website01066

Teach you how to install a plugin FaceBook comments into the blog fc2