How To Add Facebook Comment Box To Blogger
相信許多 Blogger 的使用者對於 blogger comments 沒有指定回覆的功能很失望.
加上 Facebook 的社群龐大, facebook 留言板的外掛功能比 blogger好.
所以想要另外加裝 facebook 的留言板.
在提到正題之前, 照慣例,我還是要閒聊幾句... 哈哈哈~
今天在網路閒逛時, 看到一篇文章.
它談到：目前的免費部落格中, Wordpress 是自由度最高的一種,
所以許多人喜歡使用它.
我好訝異! 作者似乎是介紹網路、電腦資訊的部落客.
我說這位先生啊! WordPress.org 跟 WordPress.com 根本是兩種不同等級的, OK!?
WordPress 的神奇好玩的外掛, 任意編寫的後台, 都是指 Wordpress.org.
那是要付費的, 連架設主機都要租用付費的.
目前自由度最高,又是免費,又是不限流量的部落格, 應該是 Blogger.
只要你有本事改寫 CSS 、運用 JavaScript、甚至自寫程式外掛, 它都讓你使用.
只是寫寫日常生活, post photos...等等, 也有一些樣版可選擇.
閒聊結束 ! 以下文章就是: 如何加裝 Facebook 留言版...
圖解請點入看大圖
♦ Step 1. 到此處申請 Facebook Apps plugin ► Click here
Reference 1. 填寫你的 blogger 名稱及網址. (區域或網址填寫錯誤會提示 error) 如圖.
♦ Step 2. 填寫驗證碼
♦ Step 3. 同意應用程式存取個人資訊. (此程式非官網程式,故需本人同意)
♦ Step 4. 記住你的 APP ID 及 Facebook ID. 回到 Blogger 開始改寫 Html.
Reference 2. 如何取得 Facebook ID ? ► facebook 個人檔案的網址.
範例：http://www.facebook.com/dreamtalker(或數字) ◄ 紅字部分就是 Facebook ID.
♦ Step 5. Design (設計) ► Edit Html (修改 Html)
將以下 code 放在 <head> 的下方.
<meta property='fb:app_id' content='APP ID'/>
<meta property='fb:admins' content='Facebook ID'/>
♦ Step 6. Design (設計) ► Edit Html (修改 Html) ► Expand Widget Templates (展開小裝置範本)
繼續插入第二段程式碼.
這裡有兩種程式碼,目的相同,但效果略有不同. (任選其一)
插入 <data:post.body/> 的下方, 或 <b:includable id='comments' var='post'> 的下方.
* Blogger更新自動導引區域網址, 將造成臉書留言板無法正確讀取留言. 以下程式碼已作修正, 請同好務必更新!
A 程式碼 ►
<div id='fb-root'/><script src='http://connect.facebook.net/en_US/all.js#appId=APP ID&xfbml=1'/><fb:comments expr:href='data:post.canonicalUrl' num_posts='x' width='500'/>
B-1 程式碼 ►
<b:if cond='data:blog.pageType == "item"'>
<div id='fb-root'/>
<script>
window.fbAsyncInit = function() {
FB.init({appId: 'APP ID', status: true, cookie: true,
xfbml: true});
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
</script>
<fb:comments expr:href='data:post.canonicalUrl' numposts='x' publish_feed='true' width='500'>
</fb:comments>
</b:if>
如果因 CSS 編寫的差異,而無法儲存. 請修改為以下 B-2 程式碼.
<div id='fb-root'/>
<script>
window.fbAsyncInit = function() {
FB.init({appId: 'APP ID', status: true, cookie: true,
xfbml: true});
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
</script>
<fb:comments expr:href='data:post.canonicalUrl' numposts='x' publish_feed='true' width='500'>
</fb:comments>
C 程式碼 ► 最新版 (建議版本)
在申請過App ID後, 登入狀態下進入 Social Plugins 頁面, 設定完取得程式碼, 裡面已經幫你套好App ID. 按照指示插入Blogger範本內.
* APP ID ► 見 Step 4
* 留言版改成繁體中文語系 ► en_US ► zh_TW
* numposts='x' x=頁面上顯示的留言數, 最好大於5.
因為預設值是大於5就會自動折疊留言.
* width 寬度像素 (px). 到這裡完成 Blogger 的改寫.
* 黑底背景怎麼顯示? 將部份code改寫如下:
<fb:comments expr:href='data:post.canonicalUrl' numposts='5' publish_feed='true' width='500' colorscheme='dark'>
</fb:comments>
♦ Step 7. 如何管理我的留言 ? (★)
* 打開 Facebook "應用程式" 選項. ► Developer ► 我的應用程式 ►友善的回覆
或是, 直接連結：http://developers.facebook.com/tools/comments/?id=APP ID
* 部落格上直觀管理：需完成 Step 5
懶得記下管理連結, 可以在任何一篇的臉書留言板右上角按下 ► "設定 (Setting)".
從 "moderate application comments" 開啟留言管理頁面.
★ Facebook App 更新了應用程式管理. 可管理留言分析數據.
需登記使用的網址(如 Blogger 網址), 並添加一行 標籤. ► Click here
登記分析數據所獲得的ID (數字) 可以取代 Facebook ID(共用). (見 Step 4)
* 更新後的留言管理可以在任何一篇的留言版右上角, ► 設定(Setting)
可以看到所有留言. 就不必進入應用程式頁面才可管理.
Reference 3. 應用程式登錄於 Facbook Apps , 需超過10個月以上的經歷.
如果只使用留言版等功能, 沒必要登錄個人程式, 省略此項目.
Reference 4. 假使省略 Step 5, 未插入該程式碼; 仍然可顯示留言版, 但不可管理.
即是,在管理頁面看不到任何留言. 除非完成 Step 5 才會顯示留言. 如下圖：
Reference 5. 如何知道留言是回覆哪一篇文章呢 ?
每則留言的時間項目, 連結著回應的文章, 可直接在管理頁面回覆.
Reference 6. 留言的管理 ► 設定. 避免垃圾留言的機制. 如圖：
如果你是很重視隱私的人；請考慮是否使用這種外掛.
Facebook 的隱私設定繁複, 讓使用者有種很安全的錯覺.
其實你只需要透過任何 Facebook 的外掛, 都能看到隱私保護的臉書.
縱然你不是他的好友; 也沒有任何社群交集.
有許多祕技, 是不能說的秘密...
使用Google+留言板系統的Blogger, 臉書留言板可能會被遮蔽.
程式碼的位置要稍做修改.
