QR Code Business Card

Facebookページのフィード(JSON)を取得してWebサイトに表示する

Facebookページのフィード(JSON)を取得してWebサイトに表示する
 Facebookページの投稿フィードはJSON形式です。これを取得してウェブサイトにお知らせとして表示する方法をご紹介します。ウェブサイトとFacebookページの両方を運営するときに便利です。


Facebookページのフィードを取得する


Facebookページのフィードを取得する

フィードURL


https://graph.facebook.com/【FacebookページID】/feed?access_token=【アクセストークン】

 FacebookページのフィードURLはこのようになります。xml形式で取得できた以前とは違い、JOSN形式になりますので注意が必要です。Facebook Developersでアクセストークンを取得する必要があります。順番に説明します。



FacebookページID


FacebookページID

 FacebookページIDは、メニューより「基本データ」→「ページ情報」→「FacebookページID」で確認できます。



アクセストークン


Facebook Developers

Facebook Developers

 アクセストークンを取得します。Facebookにログインした状態で、Facebook Developersにアクセスして下さい。



Add a New App - Facebook Developers

上メニュー「My Apps」→「Add a New App」を選択。



Add a New App - Facebook Developers

 「ウェブサイト」を選択。



Skip and Create App ID - Facebook Developers

すでに登録しているアプリがある方は、右上の「Skip and Create App ID」を選択して下さい。初めての方はたぶん次の入力画面が開くと思います。



Create a New App ID - Facebook Developers

 「Display Name」(日本語OK)と「カテゴリ」を入力して「Create App ID」を選択して下さい。

 次はセキュリティチェックです。滝の写真を全部選択して下さい。



Facebookアプリの登録完了

 これでFacebookアプリの登録完了しました。



Access Token Tool - Facebook Developers

 次にアクセストークンを確認しましょう。上メニュー「Tool & Support」→「Access Token Tool」を選択。



Access Token - Facebook Developers

アクセストークンが表示されます。これをフィードURLに使用します。



Facebookページのフィードを表示する


Facebookページのフィードを表示する

フィードの内容




 フィードのURLは、このような内容です。これを読み込んでタグで整形して表示します。



html




 フィードURLを読み込んでパースしました。日時がISO8601形式なので、一般的な2015年10月03日06:51という形に変換するのに少しだけ工夫が必要です。



生成されるhtml




 リストタグの形状に整形していますので、CSSで簡単に装飾できます。



まとめ


 FacebookのPage Pluginを使わずに、投稿内容をお知らせとしてテキストでウェブサイト上に表示するメリットは思ったよりずっと大きいと思います。

 Page Pluginから、テキストのお知らせに変われば、Googleのクローラーが認識しやすくなりますので、頻繁に更新していることをGoogleに対してよりアピールできます。

 またPage Pluginはデザインに合わないことが多々ありましたが、テキストならCSSで自由にできます。

 それとこれが一番問題だったのかもしれませんが、Page Pluginは読み込みがとても遅く、これを外せるならページの表示速度ももっと速くなるでしょう。

 もしFacebookの投稿をウェブサイトに表示したい場合は、いろいろメリットがありますので、ぜひアクセストークンを取得してフィードを使う方法を試してみて下さい。

SNSでもご購読できます。

コメントを残す

*

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)