NTU CCSP 2012Fall - Facebook

Transcript

2. Facebook App • Web App • Mobile Web App • iOS App • Android App • Page App
3. Facebook App • Web App • Mobile Web App • iOS App • Android App • Page App
4. Facebook Technology • Social Plugin • Graph API • Open Graph • Ads API • Chat API • Payment API
5. Facebook Technology • Social Plugin • Graph API • Open Graph • Ads API • Chat API • Payment API
6. 建立APP
7. 前往 https://developers.facebook.com/apps
8. 建立APP
9. 建立APP
10. 選擇Node.js
11. FB很希望大家練習debug 請改成上述這樣 然後git commit and push
12. 看成果
13. 從頭開始
14. FB JS SDK INIT 非同步載入的好處就是快 但要注意FB關鍵字的使用要在 loading完成之後 把FB載入完成後會呼叫 fbAsyncInit 的全域函數 window.location = window.location; 重新整理的小技巧
15. FB.ui 只比social plugin複雜一點的整合方式 功能比social plugin強 缺點是不能hook https://developers.facebook.com/docs/reference/javascript/FB.ui/ https://developers.facebook.com/docs/reference/dialogs/
16. FB JS SDK 登入 登入教學 https://developers.facebook.com/docs/howtos/login/getting-started/
17. 透過FB.getLoginStatus 來做自動登入
18. Graph API Facebook的RESTful API 透過HTTP/HTTPS來存取Facebook的資料 採用OAuth2認證機制 OpenSocial的分散 vs Facebook Graph API的集中 API文件 https://developers.facebook.com/docs/reference/api/ 測試工具 https://developers.facebook.com/tools/explorer
19. FB.api 讀取 FB.api(端點, 參數, callback); 寫入 FB.api(端點, ‘post’, 參數, callback);
20. 權限設計 分成四種 User and Friend Permissions: Access various elements of a user's timeline, such as their birthday, events they're attending or their interests. Extended Permissions: Access most of the publishing permissions and more sensitive info like the user's news feed. Open Graph Permissions: Access Open Graph APIs, including publishing actions and global actions. Page Permissions: Act on behalf of any Facebook Pages the user administrates. 要讀取feed或發佈到feed需要 publish_stream 和 read_stream
21. 增加登出
22. 修改web.js
23. 修改index.ejs
24. 修改FB.login
25. FB.api 讀取 FB.api(端點, 參數, callback); 寫入 FB.api(端點, ‘post’, 參數, callback);
26. 進階班
27. faceplate https://github.com/heroku/faceplate Express.js的facebook middleware
28. 完全facebook登入指南 Client-side flow Server-side flow https://developers.facebook.com/docs/concepts/login/login-architecture/
29. OpenGraph