Facebookページのfeed情報を取得してhtmlに表示したい。

Question

友達の結婚式にみんながそれぞれ投稿した写真を取得してそれを簡単に表示できないかといろいろ調べていました。
始めはinstagramのハッシュタグで抽出できたらと思ってたのですが、仕様が変わって申請しなくてはだめとのことで諦めて、結婚式のfacebookページを作り、そこに投稿された画像をリアルタイムで表示できたらなと思っています。

html,cssしかわからない初心者ですが、よろしければどなたかご教授ください。

テスト用のfacebookページのトークンなどは取得してあります。

宜しくお願い致します。

Answer 1

アクセストークンを取得済みということであれば、以下の実装例を参考にしてみてください！

（昔つくったやつです。）
new facebook get feed v2.3

実装例が以下です。（RWD対応）
http://murakiseikotsuin.com/
http://murakiseikotsuin.com/gallery/

考え方は同じですよ～。

Comments

[TomohiroSagawa]

わざわざコードペンのリンクまでありがとうございます。
実装例見ました！イメージ通りです！
こちらのようなのを作りたいのですが、さっぱりです。。。
むずかしいですね＞＜

[takumaro_web]

>html,cssしかわからない
すみません。
jsonから情報を取得し、phpかjsで表示させるのでそちらの知識がないとハードルが高いかもしれません。。

[takumaro_web]

facebookページとアクセストークンは取得済みでしょうか？
（個人的にそこがめんどくさかった記憶があったので...）

[TomohiroSagawa]

遅くなり申し訳ございません。。
facebookページとアクセストークンは取得しました！
jsonとかはほ知識０です。。

そこの知識がないと難しいですかね？(´・ω・｀)

[takumaro_web]

▼実装例
http://codepen.io/takumaro-web/pen/EjNqVz

codepenでも実装例を用意しました！

jsの記述の
$.getJSON('https://graph.facebook.com/v2.3/[写真ページのID]/photos/?access_token=[アクセストークン], function(json){

に変更して画像が表示されるか試してみてください！

jsonの知識は多少は必要ですが、取得の部分だけなので
あとは見せ方になる部分の実装だけになります。（こちらはCSSとJSとHTML次第）

アルバムのID取得方法は、
facebookページ → 【写真】 → 【アルバム】 → 【タイムラインの写真】のURL
https://www.facebook.com/media/set/?set=a.xxxxxxxxxxxxxxxx【16桁の数字】
がアルバムIDになります！

テストで画像をタイムラインにアップすれば、閲覧できるかと思います！
挑戦してみてください～。

[MasakiIshida]

takumaro_web　さま　はじめまして。Facebookアルバムを自社ページへ連動させたくてキーワード検索でここにたどり着きました。このソースは利用させて頂いてもよろしいでしょうか？ テストで組み込んでみたのですが、アルバムの情報が、一番古い写真から掲載されるようになりましたが、プログラムが良く分かっていないので、「ランダム表示」もしくは「最新野画像から数えて件数分表示」ということは可能なのでしょうか？

[takumaro_web]

MasakiIshida さん
ソースは自由に使って頂いて結構です。
「ランダム表示」も「最新野画像から数えて件数分表示」もできると思いますよ。

[YouheiTonaki]

個人アカウントのFEED情報も可能でしょうか？