jQueryを利用して、
facebookの指定のアルバムから写真の一覧を取得する方法を紹介します。
※ まず、facebookからアルバム一覧します。
var name = “markernet”; // フェースブックページの名前を指定します。
jQuery.ajax({
type: ‘GET’,
url: ‘https://graph.facebook.com/’ + name + ‘?fields=albums’, // ← ①
dataType: ‘jsonp’,
success: function(json){ // ← ②
jQuery.each(json.albums.data, function(i, album) { // ← ③
if (album.name == “Timeline Photos”) { // ← ④
get_photos(album); // ← ⑤
}
});
}
});
① https://graph.facebook.com/フェースブックページの名前?fields=albums
リクエストを送信しまして、アルバム一覧を取得します。
② リクエストに成功しますと、
json.albums.data
にアルバム一覧(配列)のデータが返ります。
③ アルバム一覧から各アルバムのオブジェクトを取得します。
アルバムのオブジェクトには、以下のデータなどが設定されています。
album.id：アルバムid
album.name：アルバムの名前
album.count：アルバムの写真の数
④ 今回はアルバムの中から「タイムライン」
(タイムラインのアルバム名は「Timeline Photos」です。)の写真を取得してします。
⑤ 写真一覧を取得するため、アルバムオブジェクトを引数にget_photos()関数を呼びます。
get_photos()関数の中身は下記です。
※ 次にアルバムの中の写真一覧を取得します。
function get_photos(album) {
jQuery.ajax({
type: ‘GET’,
url: ‘https://graph.facebook.com/’ + album.id + ‘/photos?fields=source,link’, // ← ⑥
dataType: ‘jsonp’,
success: function(json){ // ⑦
jQuery.each(json.data, function(i, photo) { // ← ⑧
console.log(photo.sourse); // ⑨
console.log(photo.link); // ⑩
});
}
});
}
⑥ アルバムidを指定して写真一覧を取得します。
⑦ リクエストに成功しますと、json.dataに写真一覧の配列が返ります。
⑧ 各写真オブジェクトを取得します。
⑨ 写真のURLが表示されます。
⑩ 写真のページのURLが表示されます。
以上で写真の一覧を取得が完了し、
自分のサイトで写真を利用することなどが可能になります。
