2016年2月4日 星期四

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

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

於FaceBook留言板插件網頁,sdk.js相關參數說明,fb-comments相關參數說明,並設置或修改。

獲取facebook留言板code代碼之流程:

Ⅰ、到 https://developers.facebook.com/docs/plugins/comments/ 留言板插件網址。

Ⅱ、輸入相關參數。

Comments Plugin Code Generator 意思是,留言插件代碼產生器。

URL to comment on 對應FB資料庫之文章網址,後面會用blog.fc2的引用變數替換,此處暫時輸入http://123test.com,代碼才不會落落長。

Width 留言插件之寬度,輸入100%,他會自動調整。

Number of Posts 最多顯示幾條回覆,暫時輸入8吧。

ok後,點擊Get Code按鈕。



Ⅲ、獲取facebook留言板code代碼。

應用程式密碼,應該叫應用程式代號才對,怪怪的,如果你有許多應用程式My Apps,選取到你剛建立的那一個,他會自動設置app_Id變數。

Language,選到Traditional Chinese Taiwan,會對應zh_TW網址。

代碼一,後面要copy,插入到<body>標籤下方。

代碼二,後面要copy,插入到blog.fc2.com內建留言上方。



Ⅳ、看懂代碼二之參數意義。

data-colorscheme 留言板風格

data-href 對應FB資料庫之網址,意思就是,什麼網址,顯示該網址留言

data-mobile 手機模式顯示

data-numposts 留言數顯示

data-order-by 留言排序 → 熱門、由舊到新、由新到舊

data-width 留言板寬度



※留言顯示排序部份,我們希望,是由新到舊,最新留言在最前面。

fb-comments 加入 data-order-by 並設置為 reverse_time 完成後如下:


<div class="fb-comments" data-href="http://123test.com" data-width="100%" data-numposts="8" data-order-by="reverse_time"></div>

後續文章,請參考 → 教你如何在FC2部落格上, 安裝FaceBook留言板 part3



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

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

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


謝謝大家,抽空觀看,files備份檔名:teachguides 006a 006b

沒有留言:

張貼留言