マーカーネット株式会社

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

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

関連記事

【これから始めるWEB制作】adobe?フォトショ??イラレ???adobe製品の中身を解剖!~とりあえず覚えておきたい8ソフトの特徴その1~

【これから始めるWEB制作】adobe?フォトショ??イラレ???adobe製品の中身を解剖!~とりあえず覚えておきたい8ソフトの特徴その1~

皆様こんばんは。 今春に新卒で入社しました、ひよっこWEB制作者のMです。 お腹と背中に貼るカイロを装備し、なんとか寒さをしのいでおります。 先日誕生日を迎え、ついにハタチと言えなくなってしまいました …

【コーダーには常識!?】あなたのコーディングをチェック!

【コーダーには常識!?】あなたのコーディングをチェック!

コーディングをしたけど、エラーや間違いがないか不安に感じたりしませんか? リンク切れやソースの間違いなどを一つ一つ調べていくのは大変です。 そこで、コーディングエラー、リンク切れなどを調べてくれるお勧 …

クオリティの高い“フリー写真素材サイト”まとめ編!

皆さん! こんばんは!! 株式会社マーカーネットでwebデザインを修行をしている新人デザイナーKです。 今回、私が皆さんにご紹介したいのはweb制作は欠かせない「素材」についてです。正確には、クオリテ …

リンク切れを自動的にチェックしてくれるワードプレスのプラグイン

リンク切れを自動的にチェックしてくれるワードプレスのプラグイン

リンクチェックしていますか? マニュアルでチェックするとたいへんですよね。 WordPressには自動で定期的にリンク切れをチェックしてくれる 便利なプラグインがございます。 その名もズバリ、「Bro …

中国でWEBサイトマーケティング考えてる方への 両国の大きな違い②

一般的にWEBサイトを展開する場合、最初に考えることの一つにドメインの問題があります。 中国でも.comなどの一般的なドメインは.cnよりも簡単に取得可能ですが、その先にICP登録という問題があります …