How To Add Facebook Comment Box To Blogger

20   Comments

相信許多 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&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. Unknown6:36 AM

    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. Unknown10:22 PM

    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. Unknown11:38 AM

    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. Unknown2:08 PM

    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. Unknown6:21 PM

    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. Unknown6:25 PM

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

    ReplyDelete
  13. Anonymous6:40 AM

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

    ReplyDelete
  14. Unknown1:59 AM

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

    ReplyDelete
  15. Unknown8:01 AM

    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. Unknown1:35 PM

    To @Anonymous :
    Thank you :)

    ReplyDelete
  18. Unknown8:28 AM

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

    ReplyDelete
  19. AK11:00 PM

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

    ReplyDelete
    Replies
    1. Unknown5:27 PM

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

      Delete

SUBSCRIBE TO POST COMMENTS
Subscribe to:Post Comments( Atom )