マーカーネット株式会社

WEB制作ブログ WEBデザイン、HTMLコーディング、PHP、スマートフォン制作などWEB制作全般に役立つ情報を発信していきます。

javascript(jquery) WEB制作

jqueryを利用した、facebookのアルバムから写真一覧の取得について

投稿日:2014年12月17日 更新日:

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が表示されます。

以上で写真の一覧を取得が完了し、
自分のサイトで写真を利用することなどが可能になります。

-javascript(jquery), WEB制作

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

事前に調べよう!2015年ウェブデザイントレンド!

こんばんわ!新人のKです!今回は今後、ウェブデザインのトレンドについて少し説明させていただきと思います。 01.背景イメージORムービー入れ(Large, Beautiful Background I …

ワードプレスをブルートフォースアタックからまもるために必要なプラグイン

ワードプレスをブルートフォースアタックからまもるために必要なプラグイン

WordPressをインストールするとユーザー名「admin」が自動的に割り振られ 変更できないバージョンもございました。 ハッキングする側はパスワードを当てるだけでログインすることが可能になります。 …

角丸のコーディングは大変?CSS3で簡単に角丸を再現する方法!

角丸のコーディングは大変?CSS3で簡単に角丸を再現する方法!

今まで角丸のデザインにするには画像を背景に設定したりしていましたが、 幅や高さが変わるとそれに沿った画像を作成しなくてはならない場合があります。 それだと効率も悪く、修正もしづらいためコーディングが大 …

【Photoshop マジック】ビンテージ風の素材がさくさくカンタンに作れちゃう!

Webデザインのトレンド手法のひとつとして、「レトロ感」や「ヴィンテージ感」のあるwebデザインがよく見かけます。 素材がなくても、Phoshopを使えば普通の写真もステキな素材になります! ここで写 …

制作部隊に仕事を依頼するときに最低限必要な5つのこと。

制作部隊に仕事を依頼するときに最低限必要な5つのこと。 こんにちは。WEBデザイナーのKです。 本日はWEBデザイナーやプログラマーなど制作関係の方に、仕事を依頼するときに、 最低限抑えておかなければ …