Facebookページのフィードを画像付きで取得する方法【API ver.5】

仕事で時々「Facebookページの投稿内容を表示させたい」という要望をもらうことがあるので、表示方法をメモしておきます。

準備しておくこと

• Facebookのデベロッパー登録（Facebookアプリを作成するのに必要）
• フィード取得したいFacebookページの権限（受託等で企業サイトのfbページフィードを作る場合は『アナリスト」』の権限でいいのでもらってください）

取得するFacebookページ用のアプリを作成する

facebook for deveroper サイトでアプリを作成します。
https://developers.facebook.com/

サイト右上の「マイアプリ」の「アプリの作成」から作成していきます。

GraphAPI（グラフAPI）アクセストークンを取得する

フィードを取得するのに必要なアクセストークンを取得します。
普通に作成すると有効期限付きアクセストークンになってしまうので、無期限のアクセストークンを作成する必要があります。

アプリの作成から、無期限のアクセストークン取得は以下のサイトがとてもわかりやすいので割愛します。
https://illbenet.jp/view/96

jQueryでフィードを取得、表示

index.html

<ul id="feed"></ul>

function.js

jQuery(function($){
    //fbフィード
    $.ajax({
        type: 'GET',
        url: 'https://graph.facebook.com/v5.0/＜ページID＞/feed?fields=id,message,full_picture,created_time&access_token=＜アクセストークン＞',
        dataType: 'json',
        success: function(json) {
            // 成功処理
            var display_cnt = 3; //表示件数
            var container = '';
            var id;
            var url;
            var time;
            for (var i=0; i<=(display_cnt-1); i++) {
                var obj = json.data[i];
                console.log(JSON.stringify(obj));
                //リンク先を取得
                id = obj.id;
                url = 'https://www.facebook.com/'+id.replace(/_/g,"/posts/");
                var pic = obj.full_picture;
                //時間を作成
                time = obj.created_time;
                time = time.substring(0,10);
                time = time.replace(/-/g,".");

                container += '<li><a target="_blank" href="'+url+'"><figure><img src="'+pic+'" /></figure><span class="date">'+time+'</span><span class="title">'+obj.message+'</span></a></li>';
            }
            $('#feed').append(container);
        },
        error: function() {
            // 失敗処理
        }
    });
});

画像付きでフィードを表示する場合、fields=id,message,full_picture,created_time という感じで full_pictureを含める必要があります。