Facebook Comments Plugin

注意:本篇內容基本上以Facebook的官方說明為主

Facebook的留言板其實是個很好用的玩意,
只要幾行Code就能有個簡單且具有社交功能的留言版。
那麼以下就說明怎麼使用。

第一步,請先到Facebook Developers申請一個App,
申請完以後再到這裡取得類似以下的HTML Code,
並且放到指定的地方就可以了。

<!-- 這段通常建議是放在 </body> 之前喔 -->
<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&appId={你的APP ID}";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<!-- 這段放在你想要放的地方 -->
<div class="fb-comments" data-href="{討論的頁面url}" data-num-posts="5" data-width="500"></div>

以上就是最簡單的方法。

以下則說一些比較進階的東西:

回呼函式:
基本上是監聽這兩個事件:

  • comment.create:新增一筆留言時,會回傳一個帶有 href(在哪裡留言)、commentID(留言的ID)、parentCommentID(回覆哪個留言) 的物件給回呼函式
  • comment.remove:移除留言時,會回傳一個帶有 href(在哪裡留言)、commentID(留言的ID) 的物件給回呼函式

詳細的用法可以參考 FB.Event.subscribe 這個方法喔~

怎麼知道留言版有多少留言:
通常是為了讓使用者知道有多少留言的話,
可以在頁面上擺上以下的xfbml

<fb:comments-count href={討論的頁面url}></fb:comments-count>

當然也可以用成這樣:
<fb:comments-count href={討論的頁面url}></fb:comments-count>則留言

這樣Facebook就會自動去抓那個數字並且放在html上。
當然啦,你也可以用Open Graph去抓資料,
但基本上並不建議(畢竟自己去寫抓資料的程式的時間大概又可以寫一個留言板了吧)。

嗯……基本上就是這些,
如果有需要的話,可以參考範例網站

除非特別註明,本頁內容採用以下授權方式: Creative Commons Attribution-NonCommercial-ShareAlike 3.0 License