使用 Graph API 上傳圖片到 Facebook 相簿、並設定為使用者大頭照

有不少活動都會引導使用者上傳圖片並設定為封面或是檔案頭像,例如「遮打革命」。

預覽圖

先來看看遮打革命 Umbrella Revolution 的分享美圖。

遮打革命 Umbrella Revolution

流程解析

再來看看活動流程。

遮打革命 Umbrella Revolution-活動流程

  1. 上傳圖片到 App 專屬資料夾,上傳成功後會回傳 photo id
  2. 取得 photo id 與相關訊息,引導使用者切圖、自行設定為 profile image

程式碼說明

在點擊「Clik Me to Upload & Set Profile Image」按鈕後,先將圖片上傳至以此應用程式命名的相簿(此為 Lydia)。 上傳成功後,會回傳 photo id。我們由此 photo 取得編輯圖片的網址,並在網址後面加上設定為 profile image 的參數「&makeprofile=1」。 這樣我們就可以看到上傳圖片後,被轉址到 Facebook 網站,將此照片切裁、設定 profile image 的頁面。

dBtnUplodSetCover.click(function(e) {
  e.preventDefault();

  FB.login(
    function(response) {
      if (response.authResponse) {
        var access_token = FB.getAuthResponse()['accessToken'];
        var linkTemp = '';
        userID = FB.getAuthResponse()['userID'];

        //上傳圖片,在此API後必須加上access token才能運作
        FB.api(
          '/me/photos?access_token=' + access_token,
          'post',
          {
            url: IMAGE_SRC, //上傳圖片的網址
            access_token: access_token,
          },
          function(resp) {
            if (!resp || resp.error) {
              console.log('Error occured: ' + JSON.stringify(resp.error));
            } else {
              //上傳成功
              //取得photo id,準備進一步取得設定photo的網址
              var photoID = resp.id;

              FB.api('/' + photoID, function(res) {
                //makeprofile: 設定為profile image的參數
                //取得照片網址後,將其append到編輯網址之後
                linkTemp = res.link + '&makeprofile=1';

                //轉址到Facebook網站,此照片切裁、設定profile image的頁面
                location.replace(linkTemp);
              });
            }
          },
        );
      } else {
        console.log('User cancelled login or did not fully authorize.');
      }
    },
    { scope: 'publish_stream, user_photos' },
  );
});

Demo

範例結果展示如下。

Upload & Set Profile Image

Permission

以上流程需要的權限為:

參考資料


Facebook Graph API