2012年11月16日 星期五

Blogger 嵌入 Facebook Comments 留言板功能教學


最近看了很多網誌和新聞網頁,下方都會有個 Facebook 的留言板,一時興起也想來弄一個。

用 Facebook 留言板的好處是,FB 帳號比較像實名制,善良的使用者也只有一個Facebook帳號,有名字和頭像,大家比較不敢胡亂留言,減少垃圾留言或機器人洗版的可能。而且留言者可以順便貼到塗鴉牆,等於間接提高文章的曝光度,而且他塗鴉牆朋友回覆他的留言時,原來的這邊的留言板也會同步在此顯示,我覺得這超棒的!等於我的網誌直接從 Web2.0 無痛升級成 Web3.0 了!而我認為社群的核心概念,就是建立在這種無私的分享與良性互動的討論上面。

用 Facebook 留言板的壞處是,畢竟是你介接別人的東西,萬一有一天 Facebook 不爽給你用或甚至倒了,所有留言就會歸零(別說不可能,我當初也以為 Facebook 可以永久快快樂樂使用下去,但直到有一天他無預警的停用我帳號後我才恍然大悟,免費的服務,他才是老大,朕賜你的,才是你的,朕沒給的,你不能要!)。再來就是沒有臉書帳號的人就無法留言(這問題倒是還好,這年頭可能家裡的小狗或陽台的盆栽都有 Facebook 帳號了),最後就是留言的管理問題,基本上你是沒有權限刪除任何一則留言的,就算設了後台管理介面頂多也只能隱藏留言(就跟陳懷生少校一樣,看不見可是他依舊存在),他本人和他的朋友還是都看的見,別問我為什麼,因為你是借用別人的,臉書才是老大,規則他說了算!

原本以為是很簡單設定的東西,但是到真正完全搞定還是花了不少功夫。原因在於研究一些網路上的教學文章,發現隨著 Facebook 不斷的小改版,很多文章都已經不合時宜了,所以才會多花點時間在 try&error,在此還是把我成功的步驟經驗分享一下吧。


在此分為兩種版本,一個是「超級簡易版」,一個是「後台管理版」。「超級簡易版」就是沒有管理功能的版本,把程式碼複製貼上就馬上能用了,適合跟這種有字天書的程式碼不是很熟的朋友。另一種「後台管理版」則設定複雜很多,但好處就是具有管理模式,可以把不想看到的留言給隱藏起來,眼不見為淨,適合喜歡掩耳盜鈴的朋友。


超級簡易版

1. 在 Blogger 後台的「版面配置」找一塊你想放留言板的地方「新增小工具」,類型選擇「HTML/JavaScript」,然後把下面程式碼複製貼上到內容區塊。

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/zh_TW/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

document.write('<div class="fb-comments" data-href="'+document.location+'" data-num-posts="5" data-width="470"></div>');
</script>


像這樣新增一個 HTML/JavaScript 的區塊
2. 按下「儲存」和「版面配置」頁的「儲存排列方式」,搞定!(註)


後台管理版

1. 取得應用程式 ID
首先要去 Facebook 開發人員網頁建立一個新的應用程式(可按我前往),按照網頁的步驟一個個過關斬將輸入完成,而 Website with Facebook Login 那邊記得順便填入你的網誌首頁的URL,總而言之,言而總之,最後就是要取得所謂的應用程式 ID (APP ID)就對了(若有申請好應該可按這裡找到)。


2. 取得帳號ID
再來就是要取得管理者也就是自己 Facebook帳號的 ID,方法如下:


Facebook查看個人首頁,如果網址是以下這種,那數字部分就是你的帳號ID
http://www.facebook.com/profile.php?id=數字

如果你的個人頁面網址是長的像以下這種
http://www.facebook.com/帳號名稱

代表你的個人首頁已經命名過了,那請將上面的「帳號名稱」代入以下的網址進入
https://graph.facebook.com/帳號名稱

進去後會看到「"id":"數字"」,那串數字就是你的帳號ID。


3. 在 Blogger 後台的「範本」->「編輯HTML」->「展開小裝置範本」打勾,開始艱辛的修改程式碼的步驟(變動前最好先將整份範本備份一下)。

(可按下Ctrl+F)搜尋 "<head>" (是""裡的字串不包括""),在這行下方新增一行貼上這兩行:(記得帳號ID和應用程式ID要置換成你剛剛取得的)

<meta property='fb:admins' content=' 你的帳號ID ' />
<meta property='fb:app_id' content=' 你的應用程式ID '/>



4. 搜尋 "<body" (是""裡的字串不包括""),在這行下方新增一行貼上以下的程式碼:

<div id='fb-root'/>
<script>
    window.fbAsyncInit = function() {
        FB.init({
            appId  : '你的應用程式 ID',
            status : true, // check login status
            cookie : true, // enable cookies to allow the server to access the session
            xfbml  : true  // parse XFBML
        });
        FB.Event.subscribe('xfbml.render', function(response) {
        });
        FB.Event.subscribe('auth.sessionChange', function(response) {
            // 當 Facebook session 改變時通知
        });
        FB.Event.subscribe('edge.create', function(response) {
            // 當有人按讚時通知
        });
        FB.Event.subscribe('comments.create', function(response) {
            // 當有新留言時通知
        });

    };
(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/zh_TW/all.js#appId=你的應用程式ID&amp;xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>


注意要把程式碼裡頭的兩個 "你的應用程式ID" 給置換掉,這個步驟的目的是初始化你的Facebook JavaScript SDK 還有註冊一些事件,當有人按讚和留言時,才會在你(管理者)的 Facebook 通知頁面通知你唷!

5. 最後一個步驟就是在想要放 Facebook留言板的地方放上程式碼,通常建議都放每篇文章結束後的下方,所以我們可以搜尋"<b:includable id='comments' var='post'>" (是""裡的字串不包括""),找到這個位置,在下面新增一行貼上這行:

<div class='fb-comments' expr:href='data:post.url' data-num-posts='5' data-width='650'/>

注意 data-num-posts 後面的數字代表你想要最多顯示幾則(若有更多則下方會出現「顯示更多...」), data-width 後面的數字則代表留言板的寬度,這兩個數字都是可以按照個人偏好自行改變調整的。

最後按下「儲存範本」,沒有錯誤的話就大功告成了!


那,如何知道有沒有成功呢?如果留言板出現如下圖那行「公開的回覆」、「管理模式」和齒輪的「設定」按鈕,就代表具備後台管理功能了!

比「超級簡易版」多出上面那行
而我們辛辛苦苦這麼多做這麼多步驟,無非就是為了可以管理呀(不然就用超級簡易版就好了)!按下「管理模式」切換到管理頁面就可以隱藏你不想出現的留言了,或者你也可以去專屬的後台網站去管理,網址是:https://developers.facebook.com/tools/comments

若你需要有人一回覆留言或按讚都要通知你的話,可以點右上角的齒輪「設定」去把你的臉書帳號設到版主那一欄,最後記得按下方的「儲存」即可。

如上圖藍色部分,如果前面的設定都OK的話這塊 Debugger 區是會抓的到正確的資料的,如果這塊有奇奇怪怪的錯誤資訊,代表你有哪個地方沒設對,可以去 Debugger網站抓一下 bug,網址是:https://developers.facebook.com/tools/debug 。如果這網址下面有任何紅色Error區,代表你有哪個環節有問題,請自行照上面的錯誤提示去修改囉!修改完再測一次,紅色區塊消除的話,代表設定成功囉!
這個Debug網頁可以協助判斷應用程式有無設定成功


以上的步驟和程式碼,我是參考最新官方網站的步驟去實做的,保證2012年底前有效,之後若臉書老大不爽又有變動,當然以官方為準囉!


註:如果使用「超級簡易版」用「新增小工具」排放的位置怎麼樣都不滿意,還是想放到每篇文章結尾的下方的話,還是可以的!只要多做「後台管理版」步驟5.的部分,搜尋"<b:includable id='comments' var='post'>" ,然後在下面把「超級簡易版」的程式碼複製貼上就可以了!



8 則留言:

  1. {div class='fb-comments' expr:href='data:post.url' data-num-posts='5' data-width='650'/}

    這個是不是有少幾碼啊?

    回覆刪除
    回覆
    1. 沒有唷,我剛再檢查過是沒問題的!主要是步驟4的程式碼一定要貼對,您再試試看!

      刪除
  2. 請問一下,我製作了留言板平台在個人網頁,但是只要是留言過的人(A),別人再去留言(B),不管AB是否為好友都會收到FB的通知"XXX和XXX也回應了XXX網站" 請問我能去控制這東西的產生嗎?? 謝謝

    回覆刪除
  3. 輕問依照您的方式,可是通知都還是沒辦法出現耶!

    回覆刪除
    回覆
    1. 沒錯!連我這個網誌的Facebook留言板也消失了....我發現Facebook又片面擅改API,導致這篇教學文章失效了,唉,不爽接他了!

      刪除
    2. 最近改很多,很煩XD。

      刪除

寫在參加309反核遊行之前

圖片出自:日本藝術家 奈良美智(Yoshitomo Nara) 的經典反核作品 一開始,先來聽首好聽的【 棉花糖 katncandix2 - 深黑的河 】 吧! 我一直以來都犯個毛病,就是有時會過於理性,相信「證據會說話」,換句話說就是愛當「認真魔人」,...