Facebookページの最新投稿一覧を自サイトに表示する方法

Facebookページの最新投稿一覧をGraph APIとJavaScriptで取得して、自サイト内に表示させる方法を紹介します。ページプラグイン(Page Plugin)を使わないためCSSで自由にレイアウト可能です。
(jQueryは1.12.4まで、Graph APIはv2.8まで動作確認済みです)

Facebook開発者として登録する

Graph APIを利用するためには、Facebook開発者としての登録が必要となります。まだお済みでない方はこのままお読みください。登録完了まではたったの3ステップです。

すでに登録がお済みの方は新しいアプリIDを作成するへ進んでください。

開発者向けFacebookページへアクセスする

こちらの開発者向けFacebookページへアクセスし、右上の青い「登録」ボタンをクリックします。Facebookアカウントにログインしていない場合は「ログイン」と表示されます。ログイン後、「登録」ボタンに変わります。

ログインから登録ボタンに変わる

「登録する」ボタンをクリックする

「Facebook開発者として登録」画面が表示されます。プライバシーポリシーの部分を「はい」に変更し、「登録する」ボタンをクリックします。

Facebook開発者の登録画面

登録完了

以下の画面が表示されれば無事登録完了です。次の手順のために、「完了」ボタンをクリックしておきます。

Facebook開発者の登録完了画面

 

新しいアプリIDを作成する

アプリID(App ID)を作成すると「アクセストークン(App Token)」が取得できます。

最初から読み進めている方は、おそらく以下の画面が表示されているはずです。画面右上にある「マイアプリ」をクリックします。

新しいアプリIDを作成する画面

もしも違う画面が表示されていたり、この手順から読み進めている方はすべてのアプリ – 開発者向けFacebookページへアクセスしてください(上記で「マイアプリ」をクリックした場合も同じ画面が表示されます)

「新しいアプリを作成」ボタンをクリックします。

アプリIDのダッシュボード画面

「新しいアプリIDを作成」画面が表示されます。アプリの表示名(日本語も可)・連絡先メールアドレスを入力し、カテゴリを選択したら「アプリIDを作成してください」ボタンをクリックします。

facebook-graphapi-json-2016-06

これでアプリIDが作成できました。次の手順のために「設定」をクリックしておきます。

FacebookアプリIDの管理画面

 

アプリIDの基本的な設定をする

次に下記3つの設定を行います。

アプリドメイン

Facebookページの投稿を埋め込むサイトのドメインを入力します。「http(s)://(www)」部分は不要です。

ネームスペース

半角英字で任意の名前を入力します。例では表示名+feedとしています。

サイトURL

画面下部の「+プラットフォームを追加」をクリック後に表示されます。一覧より「ウェブサイト」を選択してください。ここは「http(s)://(www)」部分を含めて入力します。

アプリIDの設定画面

プラットフォームを選択

アプリIDのURL設定

ちなみに、「アプリレビュー」の「テストを公開しますか?」の部分は、「はい」と「いいえ」どちらでも構いません。

番外編:設定画面の上部に警告文が出た時の対処方法

もしも「設定」画面の上部に次のような警告文が出てしまった場合は、

クライアントOAuthログインがオンになっていますが、有効なOAuthリダイレクトURIは設定されていません。

有効なOAuthは設定されていません

問題の原因である「クライアントOAuthログイン」をオフにする設定を行います。「製品を追加」をクリックし、さらに「Facebookログイン」の「スタート」ボタンをクリックします。

製品を追加-Facebookログイン

「クライアントOAuth設定」画面が表示されます。ひとまずはすべて「いいえ」に変更しておきます。

今回のように、使用目的がサイト内にFacebookページの投稿を埋め込むことだけであれば、すべてを「いいえ」にしても特に影響はありません。

FacebookクライアントOAuth設定画面

 

アクセストークンとFacebookページIDを確認する

サイト内へ埋め込む際に必要となる情報「アクセストークン」と「FacebookページID」を確認します。それぞれの確認方法は以下のとおりです。

アクセストークン(App Token)の確認方法

トークンツールにアクセス – 開発者向けFacebookページにアクセスします。

ご覧のとおり「アクセストークン」には「User Token」と「App Token」があります。今回使用するのは「App Token」の方です。最初の部分はアプリIDでそのあとに「|英数字の羅列」が続きます。コピーしてメモ帳などに貼り付けておいてください。

Facebbokトークンツール画面

FacebookページIDの確認方法

Facebookにログインしている状態で、Facebookページへアクセスします。

「基本データ」をクリックし、「ページ情報」画面を開きます。一番下まで行くと「FacebookページID」の項目があります。こちらも同様にコピーしてメモ帳などに貼り付けておいてください。

FacebookページのIDを確認する

FacebookページのURLからIDを調べられるサービス(Find my Facebook ID)もあります。

 

ソースコードを貼り付ける

Facebookページの投稿を表示させたいページ全てに以下のソースコードを貼り付けます。(こちらはウェブソクさんの記事に掲載されていたソースコードにほんの少しアレンジを加えたものです。素晴らしい記事をどうもありがとうございます)

おまけでCSSの調整例も載せておきます。どうぞご自由にお使いください。

アレンジしたこと

  • テキスト部分にリンクを挿入
  • 投稿日時から時間の部分を消去
  • 横幅いっぱいになったら「…」で省略させる

HTML・JavaScript

<head>内の好きな場所

<!-- Facebook用のOGPタグ -->
<meta property="fb:app_id" content="【アプリIDを貼り付ける】">

<!-- jQuery読み込み -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<body>内の表示させたい場所

<div id="topics"></div>

<body>の終了直前

<!-- 表示用JavaScript -->
<script>
    $(function() {
        $.ajax({
            type: "GET",
            url: "https://graph.facebook.com/【FacebookページIDを貼り付ける】/feed?fields=permalink_url,message,story,created_time&locale=ja_JP,id&access_token=【アクセストークン(App Token)を貼り付ける】",
            dataType: "json",
            success: function(json) {
                json = json.data;
                var num = json.length;
                var Feed = "<ul>\n";
                for (var i = 0; i < num; i++) {
                    var time = parseISO8601(json[i].created_time);
                    var text = json[i].message;
                    var story = json[i].story;
                    var link = json[i].permalink_url;
                    if (!story) {
                        Feed += '<a href="' + link + '" target="_blank"><li><small>' + time + '</small> ' + '<p class="text-overflow">' + text + '</p></li></a>\n';
                    } else {
                        Feed += '<a href="' + link + '" target="_blank"><li><small>' + time + '</small> ' + '<p class="text-overflow">' + story + '</p></li></a>\n';
                    }
                }
                Feed += '</ul>\n';
                $("#topics").append(Feed);
            }
        });
    });

    function parseISO8601(str) {
        var date = str.match(/(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2})/);
        return date = date[1] + "年" + date[2] + "月" + date[3] + "日";
    }
</script>

CSS

CSS

/* remの基準は16px(スマホ:14px) */
/* リストスタイルをリセットする */
#topics ul {
	padding: 0;
	list-style: none;
	margin-top: .7rem;
}

#topics a {
	padding-bottom: .5rem;
}

/* 各投稿をボーダーで区切る */
#topics p {
	border-bottom: 1px dotted #ccc;
	padding-bottom: .3rem;
}

/* 横幅いっぱいになったら「...」で省略 */
#topics .text-overflow {
	overflow: hidden;
	width: 100%;
	white-space: nowrap;
	text-overflow: ellipsis;
	-webkit-text-overflow: ellipsis;
	-o-text-overflow: ellipsis;
}

SCSS

#topics {
    ul {
        padding: 0;
        list-style: none;
        margin-top: .7rem;
    }
    a {
        padding-bottom: .5rem;
    }
    p {
        border-bottom: 1px dotted #ccc;
        padding-bottom: .3rem;
    }
    .text-overflow {
        overflow: hidden;
        width: 100%;
        white-space: nowrap; 
        text-overflow: ellipsis;
        -webkit-text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
    }
}

 

おわりに

お知らせ代わりとして活用すれば、毎回直接HTMLをいじる必要もなくなりますね。また、CMSの導入は予算的に厳しいがお客さん側で更新できるようにしたいといった場合にも重宝しそうです。

参考リンク:
graphAPIを使ってfacebookの投稿を読み込む方法 | 株式会社オーツー|スタッフブログ
Facebookページのフィード(JSON)を取得してWebサイトに表示する | ウェブソク
Facebookブランド素材の使用 – Facebook

コメント欄

  1. sc より:

    参考させて頂きましたが、画像を表示させるにはどうしたら良いでしょうか?

    1. gurunpa より:

      コメントありがとうございます!
      ① url: ”https・・・fields=の後ろからcreated_timeの間に full_picture, を追加
      ② var link = 〜の下の行に var img = json[i].full_picture; を追加
      ③ Feed+= の中のどこかに <img src=”‘ + img + ‘”> を追加
      ※CSSを指定する時は #topics img になります

この投稿はコメントできません。