FB comment box 留言被覆蓋 - 部落格
By Edwina
at 2012-11-29T15:18
at 2012-11-29T15:18
Table of Contents
小弟是blogger的新手，
剛剛參考了這個網頁的方式想要設置FB留言版在文章後，blogger留言板之前
參考網頁:http://ppt.cc/zRfd
後來按照這個順序嵌入語法之後，會變成如果我用blogger內建的留言板留言時
FB的留言就被覆蓋了。
剛剛爬文有看到網友有提到可能是被某些語法夾住了，不過，小弟不清楚該放
在哪個位置才能解決這問題，剛剛試了很多次也沒有成功，因此上來求教。
在此附上Xml檔請各位大大賜教，謝謝!
dropbox:http://ppt.cc/OWhk
--------------------------------------已解決，附方法----------------
首先是參考網頁
http://ktnet.blogspot.tw/2012/07/blogger-facebook-2012.html
裡面第12個步驟之後我有小小的變動，才能完全解決FB留言會被Blogger留言覆蓋的問題
1. 到 Facebook 開發人員網頁 建立一個新的應用程式
2. 在應用程式名稱填入部落格的完整名稱，並且在名稱空間填寫縮寫
3. 輸入建立應用程式的認證碼，並且繼續
4. 複製 Facebook 應用程式的 App ID
5. 登入 Blogger > 部落格首頁 > 設計 > 網誌即時狀態 > 修改 HTML > 繼續 > 展開小
裝置範本
6. 利用 Control + F (Windows) / Command +F (Mac) 尋找 <html
7. 複製以下文字，取代 <html 五個字元
<html xmlns:fb='http://www.facebook.com/2008/fbml'
8. 利用 Control + F (Windows) / Command +F (Mac) 尋找 <body>，整行大概長這樣：
<body expr:class='"loading" + data:blog.mobileClass'>
(這段我是直接找<body>的位置貼上，因為我找不到一樣的程式碼)
9. 複製以下文字，貼在 <body... 這行文字的下面：
<div id='fb-root'/>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '自己的 App ID 號碼',
status : true, // check login status
cookie : true, // enable cookies to allow the server to
access the session
xfbml : true // parse XFBML
});
};
(function() {
var e = document.createElement('script');
e.src = document.location.protocol + '//connect
.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').
appendChild(e);
}());
</script>
＊ 將貼上的這段文字中，黃色標註的部份，替換成第四步驟中所得到的 App ID：
10. 利用 Control + F (Windows) / Command +F (Mac) 尋找 </head>
11. 複製以下文字，貼在 </head> 這行文字的下面：
<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta expr:content='data:blog.url' property='og:url'/>
<meta content='部落格名稱' property='og:site_name'/>
<meta content='部落格 LOGO 圖片連結' property='og:image'/>
<meta content='自己的 App ID 號碼' property='fb:app_id'/>
<meta content='http://www.facebook.com/ktnetblog' property='fb:admins'/>
<meta content='article' property='og:type'/>
* 替換 部落格名稱 成自己的部落格名稱
* 替換 部落格 LOGO 圖片連結 成自己部落格 LOGO 圖片的連結網址
* 替換 自己的 App ID 號碼 成自己的 App ID 號碼
* 替換 http://www.facebook.com/ktnetblog 成自己的粉絲專頁網址
12. 利用 Control + F (Windows) / Command +F (Mac) 尋找以下這行文字：
<b:includable id='comment-form' var='post'>
(這個步驟很重要，會影響留言是否會被覆蓋，我最後參考了幾個網頁，
在這段程式碼下面貼第13個步驟的才有效<div class='post-footer'>
13. 複製以下文字，貼在上述找到那行文字的下面：
<b:if cond='data:blog.pageType == "item"'> <div style='padding:0px
0px 0px 0px; margin:0px 0px 0px 0px;'><script
src='http://connect.facebook.net/zh_TW/all.js#xfbml=1'/> <div> <fb:comments
colorscheme='light' expr:href='data:post.url' expr:title='data:post.title'
expr:xid='data:post.id' width='500' num_posts='5'/></div></div> </b:if>
* 可以選擇將 light 改成或 dark，讓留言板變成黑色系
* 改變數字 500 決定留言板的框架px寬度
* 改變字數 5 可決定顯示的留言的數量
14. 預覽確定沒有問題後，按下儲存範本，完成！
希望對有同樣狀況的朋友有幫助，當然也可以直接在設定裡關掉Blogger的留言系統
這樣一樣不會有問題，但變成只有用FB連線時才可以留言。
--
剛剛參考了這個網頁的方式想要設置FB留言版在文章後，blogger留言板之前
參考網頁:http://ppt.cc/zRfd
後來按照這個順序嵌入語法之後，會變成如果我用blogger內建的留言板留言時
FB的留言就被覆蓋了。
剛剛爬文有看到網友有提到可能是被某些語法夾住了，不過，小弟不清楚該放
在哪個位置才能解決這問題，剛剛試了很多次也沒有成功，因此上來求教。
在此附上Xml檔請各位大大賜教，謝謝!
dropbox:http://ppt.cc/OWhk
--------------------------------------已解決，附方法----------------
首先是參考網頁
http://ktnet.blogspot.tw/2012/07/blogger-facebook-2012.html
裡面第12個步驟之後我有小小的變動，才能完全解決FB留言會被Blogger留言覆蓋的問題
1. 到 Facebook 開發人員網頁 建立一個新的應用程式
2. 在應用程式名稱填入部落格的完整名稱，並且在名稱空間填寫縮寫
3. 輸入建立應用程式的認證碼，並且繼續
4. 複製 Facebook 應用程式的 App ID
5. 登入 Blogger > 部落格首頁 > 設計 > 網誌即時狀態 > 修改 HTML > 繼續 > 展開小
裝置範本
6. 利用 Control + F (Windows) / Command +F (Mac) 尋找 <html
7. 複製以下文字，取代 <html 五個字元
<html xmlns:fb='http://www.facebook.com/2008/fbml'
8. 利用 Control + F (Windows) / Command +F (Mac) 尋找 <body>，整行大概長這樣：
<body expr:class='"loading" + data:blog.mobileClass'>
(這段我是直接找<body>的位置貼上，因為我找不到一樣的程式碼)
9. 複製以下文字，貼在 <body... 這行文字的下面：
<div id='fb-root'/>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '自己的 App ID 號碼',
status : true, // check login status
cookie : true, // enable cookies to allow the server to
access the session
xfbml : true // parse XFBML
});
};
(function() {
var e = document.createElement('script');
e.src = document.location.protocol + '//connect
.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').
appendChild(e);
}());
</script>
＊ 將貼上的這段文字中，黃色標註的部份，替換成第四步驟中所得到的 App ID：
10. 利用 Control + F (Windows) / Command +F (Mac) 尋找 </head>
11. 複製以下文字，貼在 </head> 這行文字的下面：
<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta expr:content='data:blog.url' property='og:url'/>
<meta content='部落格名稱' property='og:site_name'/>
<meta content='部落格 LOGO 圖片連結' property='og:image'/>
<meta content='自己的 App ID 號碼' property='fb:app_id'/>
<meta content='http://www.facebook.com/ktnetblog' property='fb:admins'/>
<meta content='article' property='og:type'/>
* 替換 部落格名稱 成自己的部落格名稱
* 替換 部落格 LOGO 圖片連結 成自己部落格 LOGO 圖片的連結網址
* 替換 自己的 App ID 號碼 成自己的 App ID 號碼
* 替換 http://www.facebook.com/ktnetblog 成自己的粉絲專頁網址
12. 利用 Control + F (Windows) / Command +F (Mac) 尋找以下這行文字：
<b:includable id='comment-form' var='post'>
(這個步驟很重要，會影響留言是否會被覆蓋，我最後參考了幾個網頁，
在這段程式碼下面貼第13個步驟的才有效<div class='post-footer'>
13. 複製以下文字，貼在上述找到那行文字的下面：
<b:if cond='data:blog.pageType == "item"'> <div style='padding:0px
0px 0px 0px; margin:0px 0px 0px 0px;'><script
src='http://connect.facebook.net/zh_TW/all.js#xfbml=1'/> <div> <fb:comments
colorscheme='light' expr:href='data:post.url' expr:title='data:post.title'
expr:xid='data:post.id' width='500' num_posts='5'/></div></div> </b:if>
* 可以選擇將 light 改成或 dark，讓留言板變成黑色系
* 改變數字 500 決定留言板的框架px寬度
* 改變字數 5 可決定顯示的留言的數量
14. 預覽確定沒有問題後，按下儲存範本，完成！
希望對有同樣狀況的朋友有幫助，當然也可以直接在設定裡關掉Blogger的留言系統
這樣一樣不會有問題，但變成只有用FB連線時才可以留言。
--
Tags:
部落格
All Comments
Related Posts
Re: PTT Blog板友簽到簿(PTTBlogRolling!)
By Olive
at 2012-11-28T12:26
at 2012-11-28T12:26
想請問CSS的字體
By Delia
at 2012-11-28T12:07
at 2012-11-28T12:07
最新回應＋留言者頭像＋文章標題
By Ursula
at 2012-11-25T21:15
at 2012-11-25T21:15
有這樣的需求不知道選哪一家blog
By Rosalind
at 2012-11-24T11:41
at 2012-11-24T11:41
無法登入(帳號密碼錯誤 找不到這個email)
By Edward Lewis
at 2012-11-23T18:21
at 2012-11-23T18:21