E=CM^2: FaceBook API for JavaScript

Facebook JavaScript 事件清單：

xfbml.render (FB.XFBML.parse() completes 事件)

當呼叫FB.XFBML.parse() 方法完成時觸發。無request資料。

   // FB.XFBML.parse() completes 事件
      FB.Event.subscribe('xfbml.render', function(response) {
        document.getElementById('action').innerHTML += "xfbml.render Event : FB.XFBML.parse() completes 事件！<br/>";
        ShowTaoble(response);
      });

auth.authResponseChange (身份驗證改變事件)

當用戶身份驗證改變時觸發

   // 身份驗證改變事件
      FB.Event.subscribe('auth.authResponseChange', function(response) {
        document.getElementById('action').innerHTML += "auth.authResponseChange Event : 身份驗證改變事件！<br/>";
        ShowTaoble(response);
      });

auth.statusChange (登入狀穌改變事件)

當用戶登入或登出狀穌改變時觸發。

   // 登入狀態改變事件
      FB.Event.subscribe('auth.statusChange', function(response) {
        document.getElementById('action').innerHTML += "auth.statusChange Event : 登入狀態改變事件！<br/>";
        ShowTaoble(response);
      });

auth.login (使用者登入事件)

當使用者登入時觸發。

   // 登入事件觸發
   FB.Event.subscribe('auth.login', function(response) {
    FB.api('/me', function(response){
     document.getElementById('action').innerHTML += "auth.login Event : 登入事件觸發<br/>";
     ShowTaoble(response);
    });
   });

auth.logout (使用者登出事件)

當使用者登出時觸發。request資料：{ status:""}

   // 登出事件觸發
      FB.Event.subscribe('auth.logout', function(response) {
        document.getElementById('action').innerHTML += "auth.logout Event : 登出事件觸發！<br/>";
        ShowTaoble(response);
      });

auth.prompt (未登入按讚事件)

如果使用者讚按或分享等按鈕，處於未登入的狀態，跳出登入視窗後。resquest資料： {"url"}

   // prompt
      FB.Event.subscribe('auth.prompt', function(response) {
        document.getElementById('action').innerHTML += "auth.prompt Event : 不詳！<br/>";
        ShowTaoble(response);
      });

edge.create (按讚事件)

當用戶按讚時觸發 (限 fb:like)。request資料：{"url"}

   // 按讚事件
      FB.Event.subscribe('edge.create', function(response) {
        document.getElementById('action').innerHTML += "edge.create Event : 按讚事件！<br/>";
        ShowTaoble(response);
      });

edge.remove (取消按讚事件)：

當用戶取發按讚時觸發 (限 fb:like)。resquest資料： {"url"}

   // 取消按讚事件
      FB.Event.subscribe('edge.remove', function(response) {
        document.getElementById('action').innerHTML += "edge.remove Event : 取消按讚事件！<br/>";
        ShowTaoble(response);
      });

message.send (訊息發佈事件)：

當用戶使用傳送按鈕(send button)發送訊息，按下發送按鈕時觸發。resquest資料： {"url"}

   // 訊息發佈事件觸發
      FB.Event.subscribe('message.send', function(response) {
        document.getElementById('action').innerHTML += "message.send Event : 訊息發佈事件觸發！<br/>";
        ShowTaoble(response);
      });

comment.create (留言新增事件)：

當用戶新增一個評論時觸發 (限 fb:comments)。resquest資料： { href : "", commentID : "" }

   // 留言新增事件
      FB.Event.subscribe('comment.create', function(response) {
        document.getElementById('action').innerHTML += "comment.create Event : 留言新增事件！<br/>";
        ShowTaoble(response);
      });

comment.remove (留言刪除事件)：

留言刪除事件觸發 (限 fb:comments)。request資料 : { href : "", commentID : "" }

   // 留言刪除事件
      FB.Event.subscribe('comment.remove', function(response) {
        document.getElementById('action').innerHTML += "comment.remove Event : 留言刪除事件觸發！<br/>";
        ShowTaoble(response);
      });

實作範例

1.設定Facebook JavaScript SDK (可參考)

2.建事事件監聽

<script>

$(window).bind('fbAsyncInit', function() {

    // 登入事件觸發
    FB.Event.subscribe('auth.login', function(response) {
      FB.api('/me', function(response){
        document.getElementById('action').innerHTML += "auth.login Event : 登入事件觸發<br/>";
        ShowTaoble(response);
      });
    });
     
    // 登出事件觸發
    FB.Event.subscribe('auth.logout', function(response) {
      document.getElementById('action').innerHTML += "auth.logout Event : 登出事件觸發！<br/>";
      ShowTaoble(response);
    });
    
    // 身份驗證改變事件
    FB.Event.subscribe('auth.authResponseChange', function(response) {
      document.getElementById('action').innerHTML += "auth.authResponseChange Event : 身份驗證改變事件！<br/>";
      ShowTaoble(response);
    });
    
    // 登入狀態改變事件
    FB.Event.subscribe('auth.statusChange', function(response) {
      document.getElementById('action').innerHTML += "auth.statusChange Event : 登入狀態改變事件！<br/>";
      ShowTaoble(response);
    });
    
     // prompt
    FB.Event.subscribe('auth.prompt', function(response) {
      document.getElementById('action').innerHTML += "auth.prompt Event : 不詳！<br/>";
      ShowTaoble(response);
    });
    
    // FB.XFBML.parse() completes 事件
    FB.Event.subscribe('xfbml.render', function(response) {
      document.getElementById('action').innerHTML += "xfbml.render Event : FB.XFBML.parse() completes 事件！<br/>";
      ShowTaoble(response);
    });
    
    // 按讚事件
    FB.Event.subscribe('edge.create', function(response) {
      document.getElementById('action').innerHTML += "edge.create Event : 按讚事件！<br/>";
      ShowTaoble(response);
    });
    
    // 取消按讚事件
    FB.Event.subscribe('edge.remove', function(response) {
      document.getElementById('action').innerHTML += "edge.remove Event : 取消按讚事件！<br/>";
      ShowTaoble(response);
    });
    
    // 留言新增事件
    FB.Event.subscribe('comment.create', function(response) {
      document.getElementById('action').innerHTML += "comment.create Event : 留言新增事件！<br/>";
      ShowTaoble(response);
    });
    
    // 留言刪除事件觸發
    FB.Event.subscribe('comment.remove', function(response) {
      document.getElementById('action').innerHTML += "comment.remove Event : 留言刪除事件觸發！<br/>";
      ShowTaoble(response);
    });
    
    // 訊息發佈事件觸發
    FB.Event.subscribe('message.send', function(response) {
      document.getElementById('action').innerHTML += "message.send Event : 訊息發佈事件觸發！<br/>";
      ShowTaoble(response);
    });
    
});

</script>

3.建立物件

FB:Login Button (可參考)
| |

 // Facebok Social Plugins
 // XFBML 
 <fb:login-button show-faces="false" width="200"></fb:login-button>
 
 // HTML 5
 <div class="fb-login-button" data-show-faces="false" data-width="200"> </div>

FB:like (可參考)

 // Facebok Social Plugins
 // XFBML 
 <fb:like href="http://winrex-ecm2.blogspot.tw/2012/10/facebook-api-for-javascript-fbevent.html" send="false" layout="button_count" width="100" show_faces="true"></fb:like>
 
 // HTML 5
 <div class="fb-like" data-href="http://winrex-ecm2.blogspot.tw/2012/10/facebook-api-for-javascript-fbevent.html" data-send="true" data-width="450" data-show-faces="false"> </div>

FB:send (可參考)

(可參考)

 // Facebok Social Plugins
 // XFBML 
 <fb:send href="http://winrex-ecm2.blogspot.tw/2012/10/facebook-api-for-javascript-fbevent.html"> </fb:send> 
 
 // HTML 5
 <div class="fb-send" data-href="http://winrex-ecm2.blogspot.tw/2012/10/facebook-api-for-javascript-fbevent.html"> </div>
 
 // FB.ui api
 function sendUi(){
    FB.ui({
           method: 'send',
           name: 'Send ui test!!!',
           link: 'http://winrex-ecm2.blogspot.tw/2012/10/facebook-api-for-javascript-fbevent.html',
     });
   }

FB:comments (可參考)

 // Facebok Social Plugins
 // XFBML 
 <div class="fb-comments" data-href="http://winrex-ecm2.blogspot.tw/2012/10/facebook-api-for-javascript-fbevent.html" data-num-posts="1" data-width="470"> </div>
 
 // HTML 5
 <div class="fb-comments" data-href="http://winrex-ecm2.blogspot.tw/2012/10/facebook-api-for-javascript-fbevent.html" data-num-posts="1" data-width="470"> </div>

| | |

事件訊息( ↓ 順序方向 ↓ )：

response :

結論，除 auth.login、 auth.logout、 auth.authResponseChange、 auth.statusChange 外，其它的事件都需使用 Facebok Social Plugins 才能觸動。
另需取消事件可使用 FB.Event.unsubscribe( ) (如： FB.Event.unsubscribe('edge.create', handleResponse); ) 設置同設定事件，只是沒有回傳參數。

參考資料：

開發人員網站

E=CM^2

網頁

2012-10-26

FaceBook API for JavaScript - FB.Event

實作範例

參考資料：