用 Facebook API 伸手拿粉絲頁的文章

薑薑說想從 FB 粉絲頁撈文章，讓野薑設計的粉專貼文，能夠同步呈現在官網上，說是有這些好處：

可以讓 FB文章不會 po 完文了以後就沒有下文
可以讓網站跟 FB po 文有連結

實作後如下圖：

FB 提供一個叫 graph api (圖形化介面) 的端口，因為隱私關係，可以搭配每個粉絲團或是個人為節點的 access-token 來拿資料。

所以使用 graph api 拿到的資料前提是「跟你有關」。

graph-api 起手式

先至 FB developer / My app 新增一個 app，因為我們這邊跟粉絲頁有關，所以會跟自己的粉絲串

因為之前在做 fb social share 時需要 App ID 所以已經先申請好了

然後就可以去 fb 提供的 graph-api explorer 去測試我們要的 api 格式

graph-api explorer 使用教學文件

因為沒有 token 所以一個 api 都沒辦法 submit 取得

在右邊選擇要測試的 facebook app，理應就是剛剛在 My app 創立的 app，或是原本已經存在的 app 因為我是粉絲頁，所以選擇 User or Page → Get Page Accsee Token

然後就有一連串的認證，最後會回來這頁面，就可以看到 access token 已經有了

測試 graph-api_explorer

簡單用一個測試

GET /me

可以看到剛剛 user or page 如果這邊是選 user token 的話，response 就會是自己不會是粉絲頁

因為薑薑這次主要是想拿 po 過的文章，所以這次重點著重在 page post

Page Post

field

原先拿到的 data 其實非常簡單，但如果還想要其他欄位怎麼辦？其實可以在 field 定義

GET <a href="https://graph.facebook.com/me/published_posts?fields=id,created_time,message,permalink_url,shares%EF%BC%86access_token=[your_access_token" data-href="https://graph.facebook.com/me/published_posts?fields=id,created_time,message,permalink_url,shares%EF%BC%86access_token=[your_access_token" class="markup--anchor markup--pre-anchor" rel="nofollow noopener noopener" target="_blank">https://graph.facebook.com/me/published_posts?fields=id,created_time,message,permalink_url,shares＆access_token=[your_access_token</a>]

嗯嗯，看起來吐出來的 data 是我們想要的呢

其中 shares 的 key 會是有分享才會出現

likes & comments

那如果想拿到該文章的 like 跟 comment 數呢？

Page Post Likes

Page Post Comments

GET <a href="https://graph.facebook.com/me/published_posts?fields=likes.summary%28true%29,comments.summary%28true%29%EF%BC%86access_token=[your_access_token" data-href="https://graph.facebook.com/me/published_posts?fields=likes.summary(true),comments.summary(true)%EF%BC%86access_token=[your_access_token" class="markup--anchor markup--pre-anchor" rel="nofollow noopener noopener" target="_blank">https://graph.facebook.com/me/published_posts?fields=likes.summary(true),comments.summary(true)＆access_token=[your_access_token</a>]

因為 likes 裡面的 data 會一個一個列出來，因為我們只需要總數，所以也可以加上 .limit(0) 讓 data 回傳是空陣列

GET <a href="https://graph.facebook.com/me/published_posts?fields=likes.limit%280%29.summary%28true%29,comments.limit%280%29.summary%28true%29%EF%BC%86access_token=[your_access_token" data-href="https://graph.facebook.com/me/published_posts?fields=likes.limit(0).summary(true),comments.limit(0).summary(true)%EF%BC%86access_token=[your_access_token" class="markup--anchor markup--pre-anchor" rel="nofollow noopener noopener" target="_blank">https://graph.facebook.com/me/published_posts?fields=likes.limit(0).summary(true),comments.limit(0).summary(true)＆access_token=[your_access_token</a>]

最後是如果文章有照片，要怎麼拿到呢？ full_picture (string) Full size picture from attachment

GET <a href="https://graph.facebook.com/me/published_posts?fields=full_picture%EF%BC%86access_token=[your_access_token" data-href="https://graph.facebook.com/me/published_posts?fields=full_picture%EF%BC%86access_token=[your_access_token" class="markup--anchor markup--pre-anchor" rel="nofollow noopener noopener" target="_blank">https://graph.facebook.com/me/published_posts?fields=full_picture＆access_token=[your_access_token</a>]

ok 會拿到的是一張照片的 link

照片在 edges 上還有一個參數 picture picture (string) The picture scraped from any link included with the post.

GET <a href="https://graph.facebook.com/me/published_posts?fields=picture%EF%BC%86access_token=[your_access_token" data-href="https://graph.facebook.com/me/published_posts?fields=picture%EF%BC%86access_token=[your_access_token" class="markup--anchor markup--pre-anchor" rel="nofollow noopener noopener" target="_blank">https://graph.facebook.com/me/published_posts?fields=picture＆access_token=[your_access_token</a>]

回傳一樣是 link ，但就是拿到比較小的照片，看起來很似合作預先載入？！