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

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

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

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

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

Ⅰ、到設定樣板,找到<body>,並在<body>下方,貼上 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留言板步驟就到這了,算是作個記錄吧,畢竟修改部落格網頁,不是天天在用,一般都隔很久,待未來更換風格時,可以回顧觀看一下,有需要的人,也可參考看看。

同分類文章 → http://zmc6.blog.fc2.com/blog-category-6.html




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

此篇教學之youtube視頻解說A:https://youtu.be/ZmmCe2wf0vw

此篇教學之youtube視頻解說B:https://youtu.be/qhQrMmji9w8

此篇教學之youtube視頻解說C:https://youtu.be/iLPNKykomyc

此篇教學之youtube視頻解說D:https://youtu.be/JXHvKo48coI

此篇教學之youtube視頻解說E:https://youtu.be/nZ37lz5DOII

此篇教學之youtube視頻解說F:https://youtu.be/mNS2SGyAuSM


謝謝大家,抽空觀看,files備份檔名:teachguides 007a~007f

留言

秘密留言