Facebook Graph API - Taggable Friends

Facebook Graph API - Taggable Friends

由於 IKEA 做了一個好玩的活動網站「來 IKEA 睡一晚」,其中含有邀請朋友並標記、分享到 Facebook 上,因此也做了一個範例來玩玩。

遊戲流程

來 IKEA 睡一晚的遊戲流程如下。

Step 1

選擇好友。

來 IKEA 睡一晚

Step 2

分享並標記好友。

來 IKEA 睡一晚

Step 3

在 FB 上看到分享的 PO 文。

來 IKEA 睡一晚

功能限制

「Taggable Friends」這個功能是有限制的…

範例

自己做的簡單範例 Demo。

Facebook  Graph API - Taggable Friends

程式碼解說

//取得朋友清單
FB.api('/me/taggable_friends', function(res) {
  if (res && !res.error) {
    var friendsData = res.data;

    $.each(friendsData, function(index, value) {
      //取得分享ID
      //Append到畫面上供使用者勾選
    });
  }
});

//按下分享按鈕
dShare.click(function(e) {
  e.preventDefault();

  //將所有的朋友小區塊蒐集起來
  var dFriends = dFriendList.find('.friend');

  //把選擇到的朋友ID丟入此Array
  var friendArr = [];

  //檢查每一個朋友小區塊是否被勾選,如果被勾選就將此朋友的ID放到Array裡面
  dFriends.each(function(index, value) {
    var dObj = $(value).find('.checkbox');

    if (dObj.attr('checked')) {
      friendArr.push(dObj.data('id'));
    }
  });

  //將被勾選的朋友陣列轉成逗點分隔的字串
  friendString = friendArr.join(',');

  FB.login(
    function() {
      var params = {};
      params['name'] = 'Facebook Graph API & Demo Example - Taggable Friends';
      params['caption'] = 'Facebook Graph API & Demo Example - Taggable Friends';
      params['description'] = 'Taggable Friends';
      params['message'] =
        'Graph API是Facebook所推出的一種技術標準,它的核心概念是「物件與連結」。為什麼稱為「Graph API」呢?因為整個Facebook就是透過這些物件與連結建立而成的Social Graph。Facebook所提供存取的介面,就稱為「Graph API」。';
      params['link'] = 'http://bit.ly/1qtutRh';
      params['picture'] =
        'https://lh4.googleusercontent.com/-nw381RE73SY/U5KlRrevDFI/AAAAAAAACMQ/FJnuqzQfnMA/w764-h509-no/twenty_800.jpg';

      //被Tag的朋友字串
      params['tags'] = friendString;

      //一定要有地點欄位,否則會出錯
      params['place'] = '647158178704039'; //https://www.facebook.com/pages/Search-Engine-Optimization-Social-Media/647158178704039

      //PO文,記得要取得publish_actions權限
      FB.api('/me/feed', 'post', params, function(response) {
        if (!response || response.error) {
          alert('Error occured');
        } else {
          alert('Post ID: ' + response.id);
        }
      });
    },
    { scope: 'publish_actions' },
  );
});

結果

Facebook Graph API - Taggable Friends


這篇文章的原始位置在這裡-Facebook Graph API - Taggable Friends

由於部落格搬遷至此,因此在這裡放了一份,以便閱讀;部份文章片段也做了些許修改,以期提供更好的內容。

Facebook Graph API