目標
今回は、Facebookページのタイムラインに投稿された画像を取得して、
一覧に並べてみたいと思います。
これと同じように並べてみたいと思います。
APIを確認する
FacebookのAPIですが、以下のように取得出来ます。
■アルバム一覧のjsonデータ
http://graph.facebook.com/【facebookページID】/albums/
■各アルバムのjsonデータ
http://graph.facebook.com/【アルバムID】/photos/
ということなので、対象のアルバムの一覧を開きIDを確認します。
■ACTZEROのfacebookページ
https://www.facebook.com/media/set/?set=a.212832018728508.57404.178238615521182&type=3
青字になっている箇所がIDになります。
IDが判明したので取得するjsonは以下のURLになります。
JavaScriptを記述
■jsonを読み込む方法はいくつかありますが、今回は$.getJSON関数を使用します。
$.getJSON(‘【jsonのURL】’, function(json){
…
});
■それぞれの画像にはいつくかのサイズが用意されているのですが、
今回は、200*200の画像を並べる予定なので、画像の横幅が201～400で、高さが201以上の画像を取得することにします。
そして、取得する画像はhtmlの＜img＞タグではなく背景として表示させることで縦横比を変更せず範囲内に収まるように表示させるにします。
勿論収まり切らない部分は切れてしまいますが、facebookと同じ仕様なのでここでは気にしない事にします。
if ((json.data[i].images[j].width > 200) && (json.data[i].images[j].width < 400) && (json.data[i].images[j].height > 200)) {
fbPhoto = ‘＜p style=”background:url(‘ + json.data[i].images[j].source + ‘) center center no-repeat;”＞＜/p＞’;
}
実際はこの条件で取得できない場合があったら、再度ループさせて条件を緩めて取得するように処理します。
CSSを記述
p {
margin-right: 5px;
border: 1px solid #ccc;
float: left;
width: 200px;
height: 200px;
background-size: cover !important;
}
「background-size: cover;」を指定することにより背景画像が領域を覆い切らなかった場合、背景画像を拡大させることができます。
これはCSS3のプロパティなので、昔のIEとかでは効かなくなります。
サンプル
実際に上記を踏まえてサンプルを以下に用意しました。
いかがでしょうか？
目標としたページとほぼ同じように表示することが出来ました！
各画像のサイズ選択や表示方法の改善の余地はもう少しありそうですが、
だいたい良い感じに出来たのでこれでよしとします(｀・ω・´)
