マーカーネット株式会社

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

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

関連記事

phpフレームワークlaravel4でデータベースを操作してみました。

phpフレームワークlaravel4でデータベースを操作してみました。

phpのフレームワークlaravel4でデータベースの操作をためしました。 laravel4では、「Eloquent ORM」が含まれており、簡単にデータベースの操作が可能です。 1. 今回ブログの記 …

【グラフィック V.S. Webデザイン】グラフィック制作とWeb制作の違い-3-

約3週間に1回の登場になりますが、デザイナーのOです。 前回に続けて、Webとグラフィック制作との違いについて、続いて紹介していきたいと思います。 今回は最終回となりますので、最後まで読んでいただけれ …

【2014年のWEBデザイン!】流行するカラー&廃りそうなスタイル

【2014年のWEBデザイン!】流行するカラー&廃りそうなスタイル

2013年も気が付けば残り1週間。早いものですね~(しみじみ) WEBの業界は流行り廃りが激しいもので、 デザインに限って見ても、この1年間でもさまざまな動きがありましたね。 2014年、WEBデザイ …

背景に動画を取り入れたWEBデザイン

背景に動画を取り入れたWEBデザイン

動画を取り入れたWEBサイト。 大分主流となってきて、見かける頻度も一段と増えました。 動画 = 重い という概念もどこへやら。。 最近のWEB動画はとても軽い。 背景として動画を入れ、飽きさせること …

【Illustrator】アーガイル模様の作り方

みなさまこんにちは、新人Aです。 今日はまたIllustratorを使って、パターンのお話を。 以前は七宝柄、タータンチェックときて・・・今日はアーガイル柄を作りたいと思います。 アーガイル柄といえば …