Facebook APIの仕様が変わったようで、
以下方法では一部変更が必要です。
改めて記事を書き直します。
以下の記事にまとめられているようなので、参考にさせていただきます。

Facebook API を利用するには、すべてにアクセストークンが必須になったようです。アクセストークン取得

SNSが流行ってから、ホームページの役割って何だろうと考えることがあります。

いろんな見方があると思いますが、情報発信などの運用は各種SNS・ブログ。
それらをプロフ的にまとめるハブ的なのがホームページになっていくという話もちらほら

そんなこんなでSNSの活用法は日々研究しないといけない訳で、
今回はFacebookのアルバム写真をホームページ上で表示させるというものをやってみました。

デモサイト

スタバのFacebookページの写真を取得し、表示させてます。
最新の15枚を取得するようにしています。

画像をクリックすると、Facebookページに遷移します。

あとレスポンシブ対応してみました。

やり方を調べるといろいろと方法出てきましたが、
大きいサイズで表示させようとすると画像が引き延ばされてしまうものや、
レスポンシブになってないものなど（てめぇでやれよってことだと思いますが…)
しっくりくるのがなかったので、納得いくものを作ってみました

画像が引き延ばされてしまった記述

200×200pxぐらいで画像を表示させたかったのですが、
最初に見つけた方法だと100×100pxで取得してしまうようで、
それ以上の大きさで無理矢理表示させると画像が引き延ばされてしまいました。

それがこちらの記述

jQuery

$(function(){
	/* 数字の部分はアルバムのIDに変更 */
	var url = "https://graph.facebook.com/124846870926206/photos?limit=25"
	$(function(){
   		 $.getJSON(url,function(json){
        		var items = [ ];
        		$.each(json.data,function(i,fb){
            items.push(' <li><a href="' + fb.link + '" target="_blank"><img src="' + fb.picture + '" title="' + fb.name + '" width="100" height="100" /></li></a> ');
                        });
        $('<ul/>', {html: items.join('')}).appendTo('#gallery');
		});
	});	
});

小さいサイズでもいい場合はコレでもいいです。

HTMLは表示させたいところに#galleryがついたものを書くだけ

<div id="gallery"></div>

簡単！

アルバムのIDについて

アルバムの写真を取得するにはアルバムのIDが必要です。

上記記述例で言えば

/* 数字の部分はアルバムのIDに変更 */
var url = "https://graph.facebook.com/124846870926206/photos?limit=25"

「124846870926206」という数字の部分。

このID、どこで分かるかというと、
まず取得したいアルバムページを表示させます。

アルバムページを表示させてURLを見ると、、、例えばスタバのタイムラインで投稿された写真アルバムは、

https://www.facebook.com/media/set/?set=a.124846870926206.25468.117110761699817&type;=3

となっています。

これの「a.」の後から次の「.」までの間の数字、これを使います。

表示させたいアルバムの数字を確認してみてください

大きいサイズで表示できた記述例

先ほどの記述は表示できましたが、思ったようなものではありませんでした。

他に探した結果、上手く出来たのがこちら

HTML

<ul id="gallery"></ul>

htmlは変わらず表示したいところにid指定するだけ、これだけ

cssも書いておきます。

css

li {
	list-style: none;
}
ul#gallary li {
	float: left;
	margin-right: 1.4%;
	margin-bottom: 1.4%;
}
ul#gallary li:nth-child(5n) {
	margin-right: 0;
}

この辺は好きなレイアウトに。参考までに

そして、jQuery

jQuery

$(function() {
	$.getJSON('http://graph.facebook.com/124846870926206/photos/', function(json){
        var getPhotoCnt = 15; //取得する写真数を指定
        var photoList = '';
        for (i=0;i<getPhotoCnt;i++) {
            var j = 0
            var repFlg = 0;
            var fbPhoto = '';
            var imgCnt = json.data[i].images.length;
           // レスポンシブ
            var wW = $(window).width();
            if (wW > 768) {
                var size = wW * 0.16;
            } else if (768 >= wW) {
                var size = wW * 0.85;
            }
            while (j < imgCnt) {
                if (repFlg) {
                    if (json.data[i].images[j].width > 200) {
                        fbPhoto = '<li><a href="' + json.data[i].link + '" target="_blank"><img src="' + json.data[i].images[j].source + '" width="' + size + '" height="' + size + '" alt=""></a></li>';
                        j = imgCnt;
                    } else {
                        j++;
                    }
                } else {
                    if (json.data[i].images[j].height > 200) {
                        fbPhoto = '<li><a href="' + json.data[i].link + '" target="_blank"><img src="' + json.data[i].images[j].source + '" width="' + size + '" height="' + size + '" alt=""></a></li>';
                        j = imgCnt;
                    } else {
                        j++;
                    }
                    if ((j == imgCnt) && (fbPhoto == ''))  {
                        repFlg = 1;
                        j = 0;
                    }
                }
            }
            if (fbPhoto == '') {
                fbPhoto = '<li><a href="' + json.link + '" target="_blank"><img src="' + json.data[i].images[0].source + '" width="' + wW * 0.2 + '" height="' + wW * 0.2 + '" alt=""></a>';
            }
            photoList += fbPhoto;
        }
        $('#gallery').append(photoList);
    });
    // レスポンシブ
    $(window).resize(function(){
        var wW = $(window).width();
        if(wW > 768){
            $('#gallery').find("img").css('height',wW * 0.16 +'px');
            $('#gallery').find("img").css('width',wW * 0.16 +'px');
        } else if (768 >= wW) {
            $('#gallery').find("img").css('height',wW * 0.85 +'px');
            $('#gallery').find("img").css('width',wW * 0.85 +'px');
        }
    });
});

これで、画像大きくしても綺麗に表示されます。

レスポンシブはCSSでやろうと思いましたが、
正方形にしようとすると無理そうなので諦めてjQueryでやってます。

ホームページとSNSの連携方法でこういうのもありかなと思います。

もしかしたら、ローカル環境では動作しないかもです。

記事一覧へ