How To Add Facebook Comment Box To Blogger

20   Comments

相信許多 Blogger 的使用者對於 blogger comments 沒有指定回覆的功能很失望.
加上 Facebook 的社群龐大, facebook 留言板的外掛功能比 blogger好.
所以想要另外加裝 facebook 的留言板.
在提到正題之前, 照慣例,我還是要閒聊幾句... 哈哈哈~


今天在網路閒逛時, 看到一篇文章.
它談到:目前的免費部落格中, Wordpress 是自由度最高的一種,
所以許多人喜歡使用它.
我好訝異! 作者似乎是介紹網路、電腦資訊的部落客.
我說這位先生啊! WordPress.orgWordPress.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 IDFacebook 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&amp;xfbml=1'/><fb:comments expr:href='data:post.canonicalUrl' num_posts='x' width='500'/>


B-1 程式碼 ►


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='fb-root'/>
<script>
window.fbAsyncInit = function() {
FB.init({appId: &#39;APP ID&#39;, status: true, cookie: true,
xfbml: true});
};
(function() {
var e = document.createElement(&#39;script&#39;); e.async = true;
e.src = document.location.protocol +
&#39;//connect.facebook.net/en_US/all.js&#39;;
e.async = true;
document.getElementById(&#39;fb-root&#39;).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: &#39;APP ID&#39;, status: true, cookie: true,
xfbml: true});
};
(function() {
var e = document.createElement(&#39;script&#39;); e.async = true;
e.src = document.location.protocol +
&#39;//connect.facebook.net/en_US/all.js&#39;;
e.async = true;
document.getElementById(&#39;fb-root&#39;).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, 臉書留言板可能會被遮蔽.
程式碼的位置要稍做修改.


Author Summary
How To Add Facebook Comment Box To Blogger
Subject : How To Add Facebook Comment Box To Blogger
Author : - Dream Talker Updated at: 1:07 PM
Votes : 100% - 5.0 - based on 2015
如何將臉書留言板外掛加裝到部落格裡,及增加管理留言的管理頁面的使用方法.
5 Stars - Reviews
留言提示 - Comment Tips
◆ 如果您有任何想法或意見,歡迎參與留言。
◆ Disqus匿名留言,信箱及個人資訊不會公開顯示。
◆ 請多使用社群帳號留言,可簡化流程並訂閱回復。
◆ 『私密留言』請使用Google+分享按鍵,留言須使用『@Mark X』在訊息中,以免遺漏通知。
◆ G+ 訊息中指名分享對象的參考文件: 『 說明
  • Disqus
  • Blogger
  • Facebook
Anonymous left your nick please
  1. Anonymous10:55 PM

    請教facebook id是應用程式那個嗎?我在應用程式那邊找不到回應紀錄.
    thank you.

    ReplyDelete
  2. To @Anonymous :

    應用程式的是 APP ID.
    Facebook ID 就是平常登入的臉書頁面.
    首頁旁邊-個人檔案的網址上,可以看到你的帳號代碼.
    那就是 Facebook ID.

    ♦ Step 5 正確完成才能在應用程式頁面裡顯示留言.
    Good luck.

    ReplyDelete
  3. Anonymous11:29 PM

    To @Dream Talker :我複製到首頁網址去.現已成功,謝囉.

    ReplyDelete
  4. 柚子9:40 PM

    謝謝你的詳細教學,看了這麼多個部落閣終於弄上去。有個很大的問題,黑色背景會看不到字。請問有辦法解決嗎?thank you,柚子

    ReplyDelete
  5. To @柚子 : You are welcome!
    把程式碼修改如下:

    <fb:comments colorscheme='dark' expr:href='data:post.url' numposts='5' publish_feed='true' width='500'>
    </fb:comments>

    詳見本文處增修內容.

    ReplyDelete
  6. 阿里桑8:57 AM

    多謝教學,應該早點看到這一篇臉書留言板教學.
    看過其他網站的示範都語焉不詳,不然就是沒有管理功能的簡化版.
    終於不會遺漏在網站裡的臉書留言.
    為何沒有出現在google搜尋結果呢?

    ReplyDelete
  7. To @阿里桑 :
    謝謝你的來訪 :)
    blogger的文章會出現在搜尋結果中, 不過排得很後面, 通常不會被看到.
    而且我也不是部落格技巧專文或網路資訊的部落客, 自然訪客流量較少.
    可以參考以下兩篇:
    http://xox520.blogspot.com/2011/05/blogger-nagging.html
    http://xox520.blogspot.com/2011/06/seo-for-blogger.html

    ReplyDelete
  8. 阿里桑1:08 AM

    To @Mark X : 多謝!!剛好有需要.
    請問,你的blogger留言板是哪種模組? 站內搜尋似乎沒有看到教學.

    ReplyDelete
  9. To @阿里桑 :
    您是問 "站內搜尋引擎" 的設置, 還是部落格留言板?
    站內文章搜尋框的製作方法:
    http://xox520.blogspot.com/2011/06/google-crystal-google-search-box.html

    這裡的Blogger留言板是我改寫過的, 沒有在公開的Blogger模版裡.
    嗯... 不知道有沒有其他部落客有寫教學? 有一些地方要更動, 不是每種模版CSS都適用, 所以就懶得寫了. 真抱歉...

    ReplyDelete
  10. Anonymous3:28 PM

    To @Dream Talker :有兩個問題請教.使用A程式碼的臉書留言板,部落格是深色底.以下這段是直接加到A程式碼的下方嗎?
    fb:comments colorscheme='dark' expr:href='data:post.url' numposts='5' publish_feed='true' width='500'...
    程式碼似乎不能顯示在留言.

    黑底的facebook留言板是適用黑底部落格,還是留言板是黑色的?文字顏色呢?
    謝謝

    ReplyDelete
  11. To @Anonymous :
    Hi there,
    抱歉! Blogger的留言板不支援程式碼, 我再想想如何改進.
    將 colorscheme='dark' 加入A程式碼即可, 如下:

    <div id='fb-root'/><script src='http://connect.facebook.net/en_US/all.js#appId=APP ID&amp;xfbml=1'/><fb:comments expr:href='data:post.url' num_posts='x' width='500' colorscheme='dark'/>

    ReplyDelete
  12. To @Anonymous :
    忘記回覆另一個問題...
    黑底是表示Facebook留言板的底色是黑的(深色的? 有點忘記明度如何)
    文字是Facebook標準牙白色.

    ReplyDelete
  13. Anonymous6:40 AM

    To @Mark X : thank you~
    我跟樓上一樣想問你的留言板怎麼改? 想試試看可否裝上.

    ReplyDelete
  14. To @Anonymous :
    你也可以申請 Disqus 的留言板外掛.
    其實是我不太想把部落格變成教學部落格, 只想為自己寫日誌.
    我再找時間寫改造留言板的方式.

    ReplyDelete
  15. To @Anonymous :
    Thank you, Steve
    My blog is not commercial purpose, but I would consider that.

    ReplyDelete
  16. Anonymous5:31 PM

    This is an excellent post.

    ReplyDelete
  17. To @阿里桑 :
    Blogger更新了留言模組, 現在有串連式留言版.
    在設定裡(Setting)---其他(Other), 將留言的資訊回饋改成"全部", 始用嵌入式才可以.

    ReplyDelete
  18. HI!好久不見.
    請問為甚麼我的臉書讚按鈕外掛每次按讚時都要跳到--確認?不能直接+1?
    像你的like按鈕,send按鈕不用再確認一次.
    ps:我有申請facebook ID

    ReplyDelete
    Replies
    1. 我看你的網站原始碼, 沒看到Step 5的meta標籤. 只在Step 6的程式碼裡加入App ID是不夠的. (不知道你的CSS怎麼改?)
      這樣資料不能正確透過Javascript SDK傳回你的臉書. 意思是你的留言或按讚雖能記數上去, 只要換個網域或轉址, 這些資料就全沒了...
      趕快補上吧!

      Delete