マーカーネット株式会社

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

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

関連記事

ボタンを押すだけ!? 【Photoshop】 フリー  レイヤースタイル ゴールド(金色)系 厳選素材まとめ!

ボタンを押すだけ!? 【Photoshop】 フリー  レイヤースタイル ゴールド(金色)系 厳選素材まとめ!

こんにちは。 今回はクリックするだけでゴールド&メタリックな質感のデザインが作れてしまうPhotoshopのレイヤースタイル素材と活用方法についてご紹介いたします。 このフレームを・・・ たっ …

海外で人気のあるPHPのyiiフレームワークを使用してみました。

海外で人気のあるPHPのyiiフレームワークを使用してみました。

海外では、人気のあるPHPのyiiフレームワーク使用してみました。 1. yiiをhttp://www.yiiframework.com/ダウンロードしまして、 ソースコードを任意のwebの公開ディレ …

【Illustrator】写真を簡単にモノクロベクター画像にする方法

【Illustrator】写真を簡単にモノクロベクター画像にする方法

みなさまこんにちは、新人Aです。 今日は、写真をIllustratorでモノクロにしてイラストっぽくベクター画像を仕上げたいと思います! 【1.Illustratorにベクター化したい画像を配置します …

【CSS3】簡単なドロップシャドウや光彩(グロー)の付け方!

【CSS3】簡単なドロップシャドウや光彩(グロー)の付け方!

デザインを格好よくするためにシャドウを付けたりしますよね。 しかし、サイズが異なるたびに画像を背景に指定したりしなければならないのは大変です。 しかも、シャドウの幅の分だけはみ出ているということもあり …

<WordPress>カスタムフィールドテンプレートのテキストエディター(TinyMCE Advanced)で プラグインの設定通り反映されないとき

知ってそうで知らないCSS3の便利な使い方【その2:属性セレクタ編】

前回構造疑似クラスについて便利な使い方をご紹介しましたが、 (知ってそうで知らないCSS3の便利な使い方【その1:構造疑似クラス編】) 今回はCSS3の属性セレクタをご紹介します。 E[foo] fo …