2011年4月21日

使用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

1 則留言:

  1. 在這邊感謝小P跟愛德蒙幫忙注意到BUG的出現

    回覆刪除