Green: 使用Facebook JavaScript SDK 來處理點 "讚" 的動作

Hi all，今天臨時被問了Facebook's Social Plugins一個需求，就是當User點擊網頁上面的Like Button的時候，可不可以順便發文到自己的塗鴉牆上，圖文的內容我們可以自己依照我們想造呈現方式去設定(使用SDK來發佈)；這篇文章將會結合到一些 Open Graph protocal的內容，如果對於如何使用 Facebook JavaScript SDK的人，可以先參考我之前寫的使用 Javascript Facebook SDK with Graphic API。

對不起，昨天發布這篇文章，最後發現內容有一些地方必須要被更正，其中以點讚後再去登入的動作會被瀏覽器擋住的問題最大，原因是因為，登入的動作不是使用者自己去動作的，因此我會在文章的內容上做一些修改。目前已修正內容

一開始我們先介紹不會使用到API部分的地方，也就是不需要建立取得一個APP_ID(這邊這樣的說法可能會讓人有點混淆，之後我們會配合程式碼來加以解釋)，那麼首先我們先建立一個Like Button，設定好相關的內容

點下Get Code複製XFBML部分的程式碼貼到頁面上

接著到同一個頁面下方的 Step 2 Get Open Graph Tags 地方同樣填入相關的資訊並複製下來貼到html上。

上面兩個動作完成後，您的程式碼應該會類似下面

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
    <meta property="og:title" content="Facebook Event Test"/>
    <meta property="og:type" content="author" />
    <meta property="og:url" content="http://1001.webgene.tw/green/facebook/event/"/>
    <meta property="og:image" content="http://1001.webgene.tw/green/facebook/event/fb_event.png"/>
    <meta property="og:site_name" content="http://greenchiou.blogspot.com/" />
    <meta property="fb:admins" content="[YOU_FACEBOOK_ID]" />
    <meta property="og:description" content="Test Share Video to Facebook"/>
    <title>Facebook Event Html Title</title>
    <script src="http://connect.facebook.net/zh_TW/all.js#xfbml=1"></script>
</head>
<body>
    <div id="fb-root"></div>
    <fb:like href="http://1001.webgene.tw/green/facebook/event/" show_faces="true" width="450" font=""></fb:like>
</body>
</html>

上面highlight的部分你會注意到載入的js後面帶了#xfbml=1的參數，如果沒有帶入這個參數，你的Link Button將無法正確成現在你的html上，要特別的注意；接著，我們加入Like Button被點擊like跟unlike的事件Listener，html修改如下：

<body>
    

    <fb:like href="http://1001.webgene.tw/green/facebook/event/" show_faces="true" width="450" font=""></fb:like>
</body>

然後測試點擊Like Button，讓Like Button處在Like跟unLike的情況會分別跳出alert "like"/"unlike"。

接下來我們使用API的方式來修改讓他符合我們所想要達到的需求：
~~先修html改載入js的部分，將後面的#xfbml=1拿掉~~ 這邊多次測試後，會有一個怪異的問題，所以請大家在這邊注意一下還是維持原樣js後面帶有#xfbml=1

接著修改js的部分

window.fbAsyncInit = function() {
    FB.init({appId: "162485500442847", status: true, cookie: true, xfbml: true});
    FB.Event.subscribe('edge.create', function(response) {
        document.getElementById('result').innerHTML = response;
        alert("like");
    });
    FB.Event.subscribe('edge.remove', function(response) {
         document.getElementById('result').innerHTML = response;
        alert("unlike");
    });
};

因為我們使用了FB.init來初始化我們的Facebook App，裡面有一個xfbml: true的參數，將這參數設為true，我們就可以將js載入的部分修改成上面的樣子，也不會影響到我們使用xfbml的social plugins的Like Button。接著我們加入一個發佈訊息的function，並且在點擊Like Button的並呈現Like時候，~~判斷是否以登入跟是否取得premission，如果以登入並且已取得權限，則~~彈出對話框來發佈訊息。

因為登入的動作未經使用者自行點擊，最造成被瀏覽器阻擋的問題，為了避免病解決這樣的問題，我們將修改、增加我們的原始碼。
首先，在html的部分除了原本的Like Button 外，我們也加上一個Login Button，並且個字包在一個div底下，並預設成看不見的狀況。

並且加上登入成功後的事件偵聽

FB.Event.subscribe('auth.login',function(response){
 document.getElementById('like').style.display="block";
 document.getElementById('login').style.display="none";
});

接著在進到頁面的時候，先抓取是否有登入的狀況；並判斷有登入的話是不是有相關的permisson，如果沒有的話，就顯示登入。

FB.getLoginStatus(function(response) {
 if (response.session) {
  //特別注意傳回來的 perms 是 string 不是array 
  if(response.perms.indexOf("publish_stream") >= 0 )
  {
   document.getElementById('like').style.display="block";
  }
  else document.getElementById('login').style.display="block";
 } else {
  document.getElementById('login').style.display="block";
 }
});

接著修改 FB.Event.subscribe 的部分

FB.Event.subscribe('edge.create', function(response) {
    document.getElementById('result').innerHTML = response;
    post_feed();
});

4/22 14:58 修改

加入function post_feed()

function post_feed()
{
    FB.ui({
        method: 'feed',
        name: 'Facebook Event Html Title',
        link: 'http://1001.webgene.tw/green/facebook/event/',
        picture: 'http://1001.webgene.tw/green/facebook/event/fb_event.png',
        caption: 'Green Test Facebook Event ',
        description: 'Greens Facebook Event Test',
        message: 'Facebook Event is easy!'
    },
    function(response) {
        if (response && response.post_id) {
            alert('Post was published.');
        } else {
            alert('Post was not published.');
        }}
    );
}

最後再進行測試，測試的結果可以參考下圖

除了上面介紹的2個事件之外，FB還提供了9個事件可以被偵聽，這11個事件中有4個是專門給xfbml使用的，詳細的資訊可以參考 FB.Event.subscribe 的內容，就不一一列舉說明了。

這篇文章就介紹到這邊了，希望對大家有幫助，如果有錯誤或者建議，也請大家不要吝嗇，謝謝大家。

參考網址：
Facebook Developers FB.Event.subscribe
Facebook Developers Social Plugins Like Button
範例網址：
Demo

相關文章：
Facebook 使用 Open Graph protocal 輕鬆分享影片
使用 Javascript Facebook SDK with Graphic API

Green

2011年4月21日

使用Facebook JavaScript SDK 來處理點 "讚" 的動作

1 則留言: