E=CM^2: Facebook JavaScript SDK

Graph API - Photo

讀取使用者相簿需取得 user_photos 、 friend_photos 權限。讀取相簿的照片需有 user_photos 、 friends_photos 權限及 access_token 。發佈照片需有 publish_stream 及 access token 。

Read

取得使用者相簿：

 function getAlbums(){
  FB.api('/me/albums', {limit:50}, function(response){
   ...
  });
 }

response 資料內容：

data.id : albums id
data.name : 相簿名稱
data.description : 相簿簡介
data.location : 位置
data.cover_photo : 封面照片 /picture_ID/picture?access_token
data.privacy : 隱私設定
data.count : 張數
data.type : normal
data.likes : 按讚資料
data.comments : 評論資料

取得相簿內照片：

 function getPhoto( albumId ){
  FB.api('/' + albumId + '/photos', {limit:50}, function(response){
   ...
  });
 }

response 資料內容：

data.id : 照片 id
data.from : 發佈者資料
data.picture : 縮圖照片位址
data.source : 原照片位址
data.width : 寬度
data.height : 高度
data.images : 各尺寸的照片
data.place : 地點
data.tags : 標示朋友
data.likes : 按讚資料
data.comments : 評論資料

Post

新增相簿：

FB.getLoginStatus(function(response) {
  if (response.status != 'connected') { loginNow(); return; }
  FB.api("/me/albums", 'post', pareams, function(response){
    ...
  });
});

response 資料內容： Alums Id.

URL 新增相片：將已於網路上的圖片上傳至 Facebook 。

function AddPhotoByURL(){
  if(albumsId=="") return;
  
  //message:string 圖片說明。
  //url:strig 圖片網址。 
  var params = {message:"", url:""}; 
  params.message = document.getElementById("UrlMessage").value;
  params.url = document.getElementById("urlSource").value;
  
  FB.getLoginStatus(function(response) {
    if (response.status != 'connected') { loginNow(); return; }
    FB.api('/'+ albumsId +'/photos', 'post', params, function (response){
      photoId = response.id;
      for( var key in data ){
        document.getElementById("photosIdView").innerHTML += key + " : " +  data[key] +"
";
      }
    });
  });
}

response 資料內容： Photos Id.
上傳本局圖片( multipart/form-data )：將本機端的圖片上傳至 Facebook 。

< form id="target" method="post" enctype="multipart/form-data" action="https://graph.facebook.com/Albums_Id/photos?access_token=...">
  請選取照片 : 
  <input name='Source' type='file'>
  照片簡介 : 
  <textarea id="Message" style="height:50px; width: 100%;"> message context.</textarea>
  <input id="photoUpload" type="submit" value="Upload Photo" />
</form>
 
// jQuery Form plugin API
$("form").ajaxForm({
  dataType:  'json', // 回傳資料格式
  beforeSend: function(){},
  uploadProgress: function(event, position, total, percentComplete){
    //進度管理
    document.getElementById("photosIdView").innerHTML = "<b>" + percentComplete + "% </b>";
  },
  complete: function(xhr){}, // 上傳結束
  success: function (data){  // 回傳結果
    document.getElementById("photosIdView").innerHTML = "";
    for( var key in data ){
      document.getElementById("photosIdView").innerHTML += key + " : " +  data[key] +"<br/>";
    }
    photoId = data.id;
  }
});

測試範例

View Photo

| albums Graph data | photo Graph data

Creat Alums

Alums name :
Alums message :

Alums description :

| |

Add Photos

upload by URL:
URL :
照片簡介 :

upload (multipart/form-data):

| |

E=CM^2

網頁

2012-11-12

Facebook JavaScript SDK - Graph API Photo

Graph API - Photo

Read

Post

測試範例

參考資料：