使用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 相簿、並設定為使用者大頭照

留言