Facebook

Facebook Social Plugin

只要使用者有登入 Facebook 就能有讚按鈕、分享按鈕。

Facebook Graph API 與 FQL

Facebook Object（文章、使用者、照片......等）的 API。

Facebook 登入

使用者允許此應用程式後，可以得到使用者的 Access

token，之後可用 Graph API 以使用者的身份做事情。

Facebook AppFacebook 使用者把權限交付給某 Facebook App，

此 App 以使用者的身分做事情。

Social Plugin : Like Butto最簡單、最常見的整合方式：讚按鈕。

Like Button

可設定要按讚的網址（URL to Like）、寬度與一些外觀。

可透過 iframe 或 HTML5 + Facebook JS SDK 引入，或直接用一個連結來做。

Graph API / FQL

Graph API Reference

• 能讀取或發佈各種資源；每項資源裡有 fields

（欄位）和 edges（巢狀資源）。

FQL

• 將 Graph API 裡的「物件」當成資料庫的「資料表」來操作，可以拿到比較多資源、下比較複雜的指令。

用 ajax 存取 Graph API

Graph API ExplorerGraph API Explorer

試試 454607821247176可以拿得到什麼資源與欄位。

Page 物件有很多 edge。

454607821247176/posts --塗鴉牆文章

454607821247176/feed --「Recent Posts by Others」

用 Facebook 帳號登入

• 使用有名的複雜登入標準 Ouath2。

• 登入過程會導到 facebook.com 登入與授權。

• 登入後，Facebook 把 Access token 傳給我們的網站

Token

令牌

令牌是我國古代軍事所用的一種物品......通常由軍隊的最高長官發出，交給下屬軍官，用於在執行任務時，證明已經或了最高長官的指令或授權......類似於今天的介紹信、授權證明書或執法證件。

--百度百科

已獲授權的證明。

Access Token

裡頭有 App、目前的 Facebook 使用者是誰、允許的權限項目、登入時間等資訊（所以會 expire）。

Login Permissions Reference

Graph API 裡的 field 與 connection 都有相對應的權限。

Javascript SDK

Javascript SDK Reference

• FB.init(...) 放在特殊 function fbAsyncInit中進行設定

• FB.login(...) 處理登入與授權。

• FB.api(...) 幫我們用 ajax呼叫 Graph API。

Facebook 粉絲專業大回顧

• 實作一個可以讓使用者看到自己按過的粉絲專頁列表

• 範例:

• http://homepage.ntu.edu.tw/~d02922022/HTML5/Exc/FB-API-example-gh-pages/

• Graph API explorer 連結：https://developers.facebook.com/tools/explorer/

• 由於這次的作業用到 Facebook Javascript SDK，需要把網頁上傳到合法網域才能執行。

Facebook 粉絲專業大回顧

• 一：申請 Facebook developer 帳號。

• 請到 http://developers.facebook.com申請一個開發者帳號。

• 二：建立 Facebook App，取得 App ID

• 請在 http://developers.facebook.com點「Apps」、Create

New App：

• 選好一個 App name 之後，其他什麼都不用動，按Continue

• 此後應該會導到一個頁面，上面有 App ID / API key。等等會用到這個 key。

• 參考設定步驟

• 1. 在 https://developers.facebook.com/apps點「Create

New App」

• 並且選擇網站

2. 如下填寫

3. 在 App 編輯畫面，設定如下。（「Website」區塊是用「Add Platform」加進來的。）

Display Name：對外顯示的名字。App Domains：App 所使用的網站的網域（<帳號>.github.io）不含「http(s)://」。Website：按「+ Add Platform」選Website，在 Site URL 填進使用此 app 的網站網址（http://<帳號>.github.io）。另外，請在 Status & Review 頁面，將「Do you want ... public?」的開關調成「Yes」

三：按下按鈕時呼叫 FB.login

• 程式中已經設定好了 fbAsyncInit，請在 FB.init裡頭的 appId填入自己的 facebook App ID.

• Facebook Graph API 要透過「登入」，拿到正確的 access token ，才能進行一些私人的動作，如讀取此使用者的社團列表。

• Facebook 複雜的登入機制在 Javascript SDK 中已經包裝成了一個簡單易用的 function：FB.login。記得加上 scope 權限「user_likes」，才不會在下一步遇到問題。

• 註：在這個作業中我們省略了登入前的判斷流程，故您可能會發現 Javascript控制台會回報「The user has already connected」的錯誤；但此錯誤並不會影響執行。

四：呼叫 Facebook Graph API 拿使用者的基礎訊息

• 使用 FB.api呼叫 Graph API 「 /me/」相關資訊，請參考

• https://developers.facebook.com/docs/reference/api/user/

• FB.api('/me?fields=name,picture’,function(response){

• // response 會儲存我們要的資訊

• })

• 同時調整html 讓 #user 從隱藏動態轉為顯示出來

五：呼叫 Facebook Graph API 拿使用者按讚的專案

• 使用 FB.api呼叫 Graph API 「 /me/likes」，拿到所有 pages。再進一步搜尋 page 的資訊

• 請參考：https://developers.facebook.com/docs/graph-

api/reference/v2.2/page

• 並且更新loadPagesInfo() 把資料插入到 html 中。

六：加上更多專頁的按鈕

• 使用 getJSON讀取下一段資料進來。

Footer 加上 Facebook Like Button

• 使用 iframe 版本或HTML5版本都可。

• https://developers.facebook.com/docs/plugins/like-

button?locale=zh_TW