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

Upload Photos to User's Facebook Profile via Graph API and Change Facebook Profile Picture

有不少活動都會引導使用者上傳圖片並設定為封面或是檔案頭像，例如 遮打革命 Umbrella Revolution - Support Campaign | Twibbon。

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

遮打革命 Umbrella Revolution - Support Campaign | Twibbon

再來看看活動流程~

流程解析

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

程式碼說明

在clicke "Clik Me to Upload & Set Profile Image" 按鈕後，先將圖片上傳至使用者Facebook之此APP的相簿(此為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

以上流程需要的權限為：

  • publish_stream：上傳圖片
  • user_photos：操作使用者的相簿與圖片

參考資料

由於部落格搬家了，因此在新落格也放了一份，未來若有增刪會在這裡更新-使用 Graph API 上傳圖片到 Facebook 相簿、並設定為使用者大頭照。

留言

張貼留言