マーカーネット株式会社

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

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

関連記事

困った時のPHOTOSOHP。 写真に逆光を入れる方法。

こんにちは。web制作初心者のKです。 まだまだ修行中の身であるため、「テクニックをご紹介!」なんて、 大変おこがましいのですが、 お仕事をしていて、「もう少し写真に力強さが欲しいな~」なんて時に 私 …

Phalcon PHPフレームワーク試しました

Phalcon PHPフレームワーク試しました

Phalcon(http://phalconphp.com/ja/)フレームワークは、PHPエクステンションとして利用する非常に高速なフレームワークとのことです。 動作確認までの手順です。 1. Ph …

レスポンシブにも対応!行ごとのブロック要素の高さを自動で合わせる方法。

レスポンシブにも対応!行ごとのブロック要素の高さを自動で合わせる方法。

ブロック要素の高さを揃えるJavaScriptはいくつかあります。 その中でも行ごとの高さを変えたい場合に便利な「fixHeight.js」をご紹介します。 「fixHeight.js」の設置方法 ま …

WEBサイトの配色に迷った時の必見サイト!をご紹介。

WEBサイトの配色に迷った時の必見サイト!をご紹介。 http://www.markernet.co.jp/blog/2015/08/10/post-5960/ Facebook

【デザイナーをお助け!】○○に特化したフリー素材サイト5選

【デザイナーをお助け!】○○に特化したフリー素材サイト5選

なるべく早く作ってほしい!! 今週末までに提出お願い!! ・・・・・・ヤバイ、時間がない。 こんな急ぎの依頼が来たときに、デザイナーさんの手助けをしてくれる素材サイト。 今回は、特定のジャンルに特化し …