基本步驟有四
1.取得fb:app_id、fb:admins的兩串數字
2.將上面兩串數字替換掉以下對應的數字，置入<head>這一行之後
<meta content='xxxxxxxxxxx' property='fb:admins'/>
<meta content='xxxxxxxxxxxxxxxxxx' property='fb:app_id'/>
3.在<body 這一行後面置入代碼
4.選擇放留言板的位置，置入代碼
如果之前已經安裝過Facebook的外掛，通常前三步驟都已經完成了，直接執行第四步即可，如果是第一次安裝Facebook的外掛，就請從頭做一次，之後的Facebook外掛，通常就直接執行第四步驟就好了。
1.取得fb:app_id、fb:admins的兩串數字
首先到這邊https://developers.facebook.com/apps
按下右上方 +建立新的應用程式
跳出以下畫面
應用程式名稱：填入自己看得懂得即可
應用程名稱空間：他的namespace我一直搞不太懂，可填可不填
App Category：選擇一個接近的屬性就可以了
為了確定你是個人類，請填入驗證碼，然後繼續
以下這一頁有三個地方需要注意，
App ID：這一串號碼，就是fb:app_id
App Domains：請輸入專屬網址，不需要http://，如果是沒有專屬網址，就輸入blogspot.com
以Facebook登入網站＼網站位址(URL)：輸入完整的網址，或者沒有專屬網址，請輸入blogspot的網址，比方http://abc.blogspot.com/
我們在facebook都有個人專屬網址，可能是一串代號，也可能是之前編輯過有意義的文字，總之，先到個人頁面取得網址，
然後將www替換成graph
出現這個畫面
其中"id": "xxxxxxxxxxx"，這一串就是管理者id，也就是fb:admins
以上兩個步驟得到了兩串數字
fb:app_id
fb:admins
2.將上面兩串數字替換掉以下對應的數字，置入<head>這一行之後
<meta content='xxxxxxxxx' property='fb:admins'/>
<meta content='xxxxxxxxxxxxxxxx' property='fb:app_id'/>
接下來，到範本＼編輯HTML
在<head>後面，填上
<meta content='xxxxxxxxxx' property='fb:admins'/>
<meta content='xxxxxxxxxxxxxxxxx' property='fb:app_id'/>
其中fb:admins以及fb:app_id前面的數字，就是前面兩個步驟得到的數字，要換成你的喔
準備安裝留言板，請到這裡
https://developers.facebook.com/docs/plugins/comments/
如下圖
URL to comment on：填上網址，按下enter之後，下方就會出現留言板預覽，如果一切順利，就會看到「版主檢視」跟「設定」
Width：可不填，預設約為555px寬，有需要的話之後再修改也可以
3.在<body 這一行後面置入代碼
按下Get Code之後，會出現這個畫面，上面這一大塊複製起來，到範本＼編輯HTML
貼在<body這一行之後，如下圖
貼完之後按下儲存範本，十有八九會出現紅色警示文字：剖析XML時發生錯誤XXOO
這時候以amp;appid取代appid再儲存即可
4.選擇放留言板的位置，置入代碼
下面這一塊是留言板的框架
將這一串代碼先做修改
<div class="fb-comments" data-href="http://www.thephilko.com/" data-colorscheme="The color scheme used in the plugin" data-numposts="5" data-width="The pixel width of the plugin"></div>
深黃色的字請以expr:href='data:post.url'更換，才能正確抓到每一篇文章的位置，紅色的The pixel width of the plugin可以更改寬度，比方填入650px。
或者可以直接使用這一段精簡過的（寬度是符合我的版型）
<div class='fb-comments' data-numposts='5' data-width='700px' expr:data-href='data:post.url'/>
重點在這裡，留言框的位置，摸索了很久終於找到，這藏在一個神秘的區塊。
首先搜尋到<div class='post-footer-line post-footer-line-3'/>
然後觀察這一區塊的結尾</div>
下一行應該是</b:includable>
將剛剛的<div class='fb-comments' data-numposts='5' data-width='700px' expr:data-href='data:post.url'/>
前後加判斷式
<b:if cond='data:blog.pageType == "item"'>
<div class='fb-comments' data-numposts='5' data-width='700px' expr:data-href='data:post.url'/>
</b:if>
放在上面兩行中間
文字敘述複雜，請直接看下面示意（點選可放大）
<div class='post-footer-line post-footer-line-3'/>
中間有不定數量的代碼
</div>
<b:if cond='data:blog.pageType == "item"'>
<div class='fb-comments' data-numposts='5' data-width='700px' expr:data-href='data:post.url'/>
</b:if>
</b:includable>
基本上留言板已經安裝完成了，趕快測試看看。
然後其實我要含淚介紹這個，剛剛才發現有神人作出這個工具，只要取得了
'fb:admins'
'fb:app_id'
之後，進入此頁操作，就非常快能達成Facebook留言框，而且不衝突，怎不早點搜尋到啦吼！
http://tw.piliapp.com/blogger-template/facebook-comment-plugin/
當文章多，留言散落在各處的時候，就可以到這裡集中管理facebook的留言
https://developers.facebook.com/tools/comments?id=xxxxxxxxxxxxx
深黃色數字請換成自己的fb:app_id
管理界面大概長這樣
https://developers.facebook.com/docs/plugins/comments/
如下圖
URL to comment on：填上網址，按下enter之後，下方就會出現留言板預覽，如果一切順利，就會看到「版主檢視」跟「設定」
Width：可不填，預設約為555px寬，有需要的話之後再修改也可以
3.在<body 這一行後面置入代碼
按下Get Code之後，會出現這個畫面，上面這一大塊複製起來，到範本＼編輯HTML
貼在<body這一行之後，如下圖
貼完之後按下儲存範本，十有八九會出現紅色警示文字：剖析XML時發生錯誤XXOO
這時候以amp;appid取代appid再儲存即可
4.選擇放留言板的位置，置入代碼
下面這一塊是留言板的框架
將這一串代碼先做修改
<div class="fb-comments" data-href="http://www.thephilko.com/" data-colorscheme="The color scheme used in the plugin" data-numposts="5" data-width="The pixel width of the plugin"></div>
深黃色的字請以expr:href='data:post.url'更換，才能正確抓到每一篇文章的位置，紅色的The pixel width of the plugin可以更改寬度，比方填入650px。
或者可以直接使用這一段精簡過的（寬度是符合我的版型）
<div class='fb-comments' data-numposts='5' data-width='700px' expr:data-href='data:post.url'/>
重點在這裡，留言框的位置，摸索了很久終於找到，這藏在一個神秘的區塊。
首先搜尋到<div class='post-footer-line post-footer-line-3'/>
然後觀察這一區塊的結尾</div>
下一行應該是</b:includable>
將剛剛的<div class='fb-comments' data-numposts='5' data-width='700px' expr:data-href='data:post.url'/>
前後加判斷式
<b:if cond='data:blog.pageType == "item"'>
<div class='fb-comments' data-numposts='5' data-width='700px' expr:data-href='data:post.url'/>
</b:if>
放在上面兩行中間
文字敘述複雜，請直接看下面示意（點選可放大）
<div class='post-footer-line post-footer-line-3'/>
中間有不定數量的代碼
</div>
<b:if cond='data:blog.pageType == "item"'>
<div class='fb-comments' data-numposts='5' data-width='700px' expr:data-href='data:post.url'/>
</b:if>
</b:includable>
基本上留言板已經安裝完成了，趕快測試看看。
然後其實我要含淚介紹這個，剛剛才發現有神人作出這個工具，只要取得了
'fb:admins'
'fb:app_id'
之後，進入此頁操作，就非常快能達成Facebook留言框，而且不衝突，怎不早點搜尋到啦吼！
http://tw.piliapp.com/blogger-template/facebook-comment-plugin/
當文章多，留言散落在各處的時候，就可以到這裡集中管理facebook的留言
https://developers.facebook.com/tools/comments?id=xxxxxxxxxxxxx
深黃色數字請換成自己的fb:app_id
管理界面大概長這樣
預設的留言都是自動公開，如果想要公開前先經過審核，可以在上圖的右上方「設定」處，打開以下畫面，將預設每一篇貼文都公開，改成讓我在每個留言顯示前先審核
完工
.
回覆刪除謝謝你的文章，以下是建議
expr:href=是舊式，改成expr:data-href=會比較好，data-才是html5正規用法
.
謝謝你的回應，立馬來改~
刪除請問有沒有你的那種FB跟google分開點的語法?
回覆刪除輸入graph按下去卻跳出錯誤該怎麼辦?
回覆刪除還有想問一下如果用那個留言外掛器還需要去申請最上面的app developer那些嗎
https://developers.facebook.com/apps 點進去就出現 Sorry, something went wrong.
回覆刪除We're working on getting this fixed as soon as we can.
Go back
怎麼辦?
請問如果要讓Google Blogger留言不須審核要怎麼做? 我看你這邊留言送出就出現了，但我的網誌有留言會要我審核打勾才出現，找不到取消審核的方法。
回覆刪除