H APPY  F ACEBOOK  D EVELOPER
O UTLINE <ul><ul><li>Self-Introduction  </li></ul></ul><ul><ul><li>History and Trends </li></ul></ul><ul><ul><li>The Resou...
SELF-INTRODUCTION <ul><ul><li>Eric Chuang / ddsakura </li></ul></ul>
INTRODUCTION <ul><li>Facebook </li></ul>
H ISTORY   AND  S TATICS 2004/2    Mark Zuckerberg launch Facebook
H ISTORY   AND  S TATICS 2007/10  Facebook reaches over  50 million active users 2004/2    Mark Zuckerberg launch Facebook
H ISTORY   AND  S TATICS 2008/8    Facebook reaches over 100 million active users 2007/10  Facebook reaches over  50 milli...
H ISTORY   AND  S TATICS 2009/9    Facebook reaches over 300 million active users 2009/2    Facebook reaches over 200 mill...
H ISTORY   AND  S TATICS 2010/2    Facebook reaches over 400 million active users 2009/12  Facebook reaches over 350 milli...
H ISTORY   AND  S TATICS 全球有 四億多 會員,台灣則有 650 萬
H ISTORY   AND  S TATICS 有 50% 的會員,每天會造訪 Facebook
H ISTORY   AND  S TATICS 所有會員每個月花超過 5000 億 分鐘在 Facebook 上
H ISTORY   AND  S TATICS Facebook 上有 1.6 億 個物件與會員進行互動
H ISTORY   AND  S TATICS Facebook 有超過 70 種語系 版本
H ISTORY   AND  S TATICS 有約 70% 的 Facebook 會員來自美國以外
H ISTORY   AND  S TATICS 有超過 100 萬 個網站和 Facebook 整合
H ISTORY   AND  S TATICS Facebook 有超過 55 萬 個 Apps
H ISTORY   AND  S TATICS 每月有 70% 的會員用使用 Apps
H ISTORY   AND  S TATICS 有超過 100 萬 的會員透過手機連到 Facebook
H ISTORY   AND  S TATICS
Sony Pictures has released the first trailer for the upcoming movie, “The Social Network”, which is loosely based (sensati...
The Interface of Facebook
The Interface of Facebook
The Interface of Facebook
The Interface of Facebook
THE RESOURCE WE NEED TO KNOW <ul><ul><li>Facebook </li></ul></ul>
T HE  R ESOURCE  W E   NEED   TO   KNOW <ul><ul><li>Facebook Developer Wiki  </li></ul></ul><ul><ul><ul><li>http://wiki.de...
W HAT   LANGUAGES  W E   USE   IN   THIS   OFFERING   <ul><ul><li>Javascript </li></ul></ul><ul><ul><li>PHP </li></ul></ul...
W HAT   LANGUAGES  W E   USE   IN   THIS   OFFERING   <ul><ul><li>But We Don’t discuss the skill for JavaScript, PHP, Obje...
Big Event <ul><ul><li>f8 developer conference on April 21, 2010. </li></ul></ul>
W HAT  F ACEBOOK  P ROVIDES  N OW <ul><ul><li>Facebook for Website </li></ul></ul><ul><ul><li>Apps on Facebook.com </li></...
A DD  F ACEBOOK   TO   MY   WEBSITE <ul><ul><li>Facebook </li></ul></ul>
A DD  F ACEBOOK   TO   MY   WEBSITE <ul><ul><li>Social Plugins </li></ul></ul><ul><ul><li>Single Sign-on </li></ul></ul><u...
SOCIAL PLUGINS <ul><ul><li>Facebook </li></ul></ul>
S OCIAL  P LUGINS
S OCIAL  P LUGINS <ul><ul><li>The easiest way to get started with Facebook Platform.  </li></ul></ul><ul><ul><li>We Can Us...
Demo
SINGLE SIGN-ON <ul><ul><li>Facebook </li></ul></ul>
Single Sign-on <ul><ul><li>Oauth 2.0 protocol </li></ul></ul><ul><ul><ul><li>http://tools.ietf.org/html/draft-ietf-oauth-v...
Single Sign-on How to and Flow <ul><ul><li>Register Our App </li></ul></ul><ul><ul><ul><li>http://tools.ietf.org/html/draf...
Extended Permission <ul><ul><li>Register Our App </li></ul></ul><ul><ul><ul><li>http://tools.ietf.org/html/draft-ietf-oaut...
GRAPH API <ul><ul><li>Facebook </li></ul></ul>
Register Apps <ul><ul><li>http://www.facebook.com/?ref=logo#!/developers/apps.php </li></ul></ul>
Graph API (1) - get data <ul><ul><li>https://graph.facebook.com/ID </li></ul></ul>
Graph API (2) - get data <ul><ul><li>https://graph.facebook.com/ID/CONNECTION_TYPE </li></ul></ul>
Graph API (3) - selection, Introspection <ul><ul><li>https://graph.facebook.com/ID?fields=A,B,C... </li></ul></ul><ul><ul>...
Graph API (4) POST <ul><ul><li>We can publish to the Facebook graph by issuing HTTP POST requests to the appropriate conne...
Graph API (5) Delete <ul><ul><li>We can delete objects in the graph by issuing HTTP DELETE requests to the object </li></u...
Graph API (6) Search <ul><ul><li>We can search over all public objects </li></ul></ul><ul><ul><ul><li>https://graph.facebo...
Graph API (7) Tool <ul><ul><li>Graph API reference </li></ul></ul><ul><ul><ul><li>http://developers.facebook.com/docs/refe...
Graph API (8) Tools <ul><ul><li>CURL </li></ul></ul><ul><ul><li>Javascript </li></ul></ul>
OPEN GRAPH PROTOCOL <ul><ul><li>Facebook </li></ul></ul>
Introduction
Introduction – from insidefacebook.com
Getting Start
<ul><li>http://developers.facebook.com/tools/lint/ </li></ul>Tool: URL Linter
Administering our page
Location Meta Data
Analytics <ul><ul><li>http://www.facebook.com/insights/ </li></ul></ul>
ShowCase
JAVASCRIPT SDK <ul><ul><li>Facebook </li></ul></ul>
JavaScript SDK(1) <ul><li>The JavaScript SDK enables you to access all of the features of the Graph API via JavaScript </l...
JavaScript SDK(2) <ul><li>Core Methods </li></ul><ul><li>Event Handling </li></ul><ul><li>XFBML Methods </li></ul><ul><li>...
JavaScript SDK(3) – Core Methods <ul><li>FB.api </li></ul><ul><ul><li>Make a API call </li></ul></ul><ul><li><script> FB.a...
JavaScript SDK(4) – Core Methods <ul><li>FB.getLoginStatus </li></ul><ul><ul><li>Find out the current status from the serv...
JavaScript SDK(5) – Core Methods <ul><li>FB.login </li></ul><ul><ul><li>Login/Authorize/Permissions. </li></ul></ul><ul><l...
JavaScript SDK(6) – Core Methods <ul><li>FB.logout </li></ul><ul><ul><li>Logout the user in the background. </li></ul></ul...
JavaScript SDK(7) – Core Methods <ul><li>FB.ui </li></ul><ul><ul><li>Method for triggering UI interaction with Facebook as...
JavaScript SDK(8) – Event Handling <ul><li>FB.Event.subscribe </li></ul><ul><ul><li>Subscribe to a given event name, invok...
JavaScript SDK(9) – Event Handling <ul><li>FB.Event.unsubscribe </li></ul><ul><ul><li>Removing a subscriber is basically t...
JavaScript SDK(10) – Data Access <ul><li>FB.Data.query </li></ul><ul><ul><li>Removing a subscriber is basically the same a...
JavaScript SDK(11) - Canvas Methods <ul><li>FB.Canvas.setAutoResize </li></ul><ul><ul><li>Starts or stops a timer which re...
APPS ON FACEBOOK.COM <ul><ul><li>Facebook </li></ul></ul>
A PPS   ON  F ACEBOOK . COM
ARCHITECTURE <ul><ul><li>Facebook </li></ul></ul>
W HAT  F ACEBOOK  P ROVIDES  N OW <ul><ul><li>FBML Canvas Applications Information Flow </li></ul></ul>
W HAT  F ACEBOOK  P ROVIDES  N OW <ul><ul><li>Websites and IFrame Canvas Applications Information Flow </li></ul></ul>
Register facebook application
Register facebook application -  基本資料
Register facebook application –  驗證 參數 說明 Installable to? 什麼可以使用應用程式,共有兩種選擇,分別是個人檔案和粉絲專頁。 Post-Authorize Callback URL 當使用者...
Register facebook application – 個人檔案 參數 說明 標籤名稱 顯示在個人檔案頁籤的名稱。 標籤網址 當點選頁籤時所載入的網址。 Post-Remove Callback URL 當使用者移除應用程式後,呼叫的網址。
Register facebook application – 個人檔案
Register facebook application – 個人檔案 參數 說明 發佈文字 位於朋友的個人檔案頁面中發佈器所顯示之標題文字。 發佈回呼網址 當在朋友的個人檔案發佈資訊時所呼叫的網址。 自我發佈文字 位於使用者本人的個人檔案頁...
Register facebook application –  畫布 參數 說明 畫布頁面網址 設定將應用程式的畫布網址,基本上,這算是應用程式的首頁網址。只要沒有其他應用程式指定的字串,我們可以將該字串設定為畫布網址。 Canvas Cal...
Authentication Canvas applications use cookies to get user authentication information. The cookie includes a signature for...
Integration Points <ul><ul><li>Stream publishing </li></ul></ul><ul><ul><li>Requests </li></ul></ul><ul><ul><li>Bookmarks ...
Stram publishing
Request Using FBML tags you can render request forms and friend selectors.
Bookmark, Counters, Game Dashboard, Profile Tab <fb:bookmark></fb:bookmark>
FACEBOOK QUERY LANGUAGE <ul><ul><li>Facebook </li></ul></ul>
FQL(1) <ul><ul><li>Facebook Query Language  </li></ul></ul><ul><ul><li>Enables we to use a SQL-style interface to query th...
FQL(2) – Testing Tool <ul><ul><li>http://developers.facebook.com/docs/reference/rest/fql.query </li></ul></ul>
FQL(3) –   支援基本的運算字 參數 說明 + 加法 - 減法 * 乘法 / 除法 > 大於 < 小於 >= 大於等於 <= 小於等於 = 等於 AND 及 OR 或 NOT 不是
FQL(4) –  支援的函式 參數 說明 now() 取得現在的時間。 rand() 產生亂數。 strlen(string) 計算字串長度。 concat(string, ...) 合併本函式中的所有字串。 substr(string, s...
FQL(5) – Table :  link_stat <ul><ul><li>Query this table to return detailed information from your Facebook Share implement...
FQL(6) – Table :  friend <ul><ul><li>Query this table to determine whether two users are linked together as friends. </li>...
FQL(7) – Tables <ul><ul><li>stream </li></ul></ul><ul><ul><ul><li>SELECT actor_id, message FROM stream WHERE source_id = <...
FBML <ul><ul><li>Facebook </li></ul></ul>
FBML(1) <ul><ul><li>FBML enables you to build Facebook applications that deeply integrate into a user's Facebook experienc...
FBML(2) <ul><li>Tools </li></ul><ul><li>User/Groups </li></ul><ul><li>Notifications and Requests </li></ul><ul><li>Platfor...
FBML(3) <fb: 語法名稱 參數一 =&quot; 參數值 &quot;  參數二 =&quot; 參數值 &quot;  ‧‧‧ > 傳入內容 </fb: 語法名稱 >
FBML(4)
FBML(5) <ul><li>http://developers.facebook.com/docs/reference/fbml/ </li></ul><ul><li>http://developers.facebook.com/tools...
FBML(6) <fb:bookmark></fb:bookmark> <fb:comments xid=&quot;titans_comments&quot; canpost=&quot;true&quot; candelete=&quot;...
OLD REST API <ul><ul><li>The old REST API is the previous version of the Graph API.  </li></ul></ul><ul><ul><li>If we are ...
M OBILE   APPS <ul><ul><li>iPhone SDK </li></ul></ul><ul><ul><li>Android SDK </li></ul></ul>
M OBILE   APPS - iPhone
Upcoming SlideShare
Loading in …5
×

Happy facebook developer

8,186 views

Published on

Facebook APIs

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
8,186
On SlideShare
0
From Embeds
0
Number of Embeds
17
Actions
Shares
0
Downloads
83
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide
  • Facebook 的創辦人是 馬克 · 扎克伯格 ( Mark Zuckerberg ),他是 哈佛大學 的學生,之前畢業於 阿茲利高中 (英語: Ardsley High School )。 Facebook 的名字是來自傳統的紙質「花名冊」,通常美國的大學和預科學校把這種印有學校社區所有成員的「花名冊」發放給新入學或入職的學生和教職 員,協助大家認識學校內其他成員。最初, Facebook 的註冊僅限於 哈佛學院 的學生,在隨後的兩個月內,註冊擴展至 波士頓 地區的其他高校(如 麻省理工學院 )以及 史丹福大學 、 紐約大學 、 西北大學 和所有的 長春藤名校 。第二年,很多其他學校也被邀請加入。最終,在全球範圍內有 一個大學後綴電子郵箱的人(如 .edu, .ac.uk 等)都可以註冊。之後,在 Facebook 中也可以建立起高中和公司的社會化網路。而從 2006 年 9 月 11 日起,任何用戶輸入有效電子郵件位 址都可申請。用戶可以選擇加入一個或以上網路,例如中學的、公司的、或地區。 [6]
  • Happy facebook developer

    1. 1. H APPY F ACEBOOK D EVELOPER
    2. 2. O UTLINE <ul><ul><li>Self-Introduction </li></ul></ul><ul><ul><li>History and Trends </li></ul></ul><ul><ul><li>The Resource we need to know </li></ul></ul><ul><ul><li>What Facebook Provide Now </li></ul></ul><ul><ul><li>What languages We use in this offering </li></ul></ul><ul><ul><li>Add Facebook to my site </li></ul></ul><ul><ul><li>Apps on Facebook.com </li></ul></ul><ul><ul><li>Mobile apps </li></ul></ul>
    3. 3. SELF-INTRODUCTION <ul><ul><li>Eric Chuang / ddsakura </li></ul></ul>
    4. 4. INTRODUCTION <ul><li>Facebook </li></ul>
    5. 5. H ISTORY AND S TATICS 2004/2    Mark Zuckerberg launch Facebook
    6. 6. H ISTORY AND S TATICS 2007/10  Facebook reaches over  50 million active users 2004/2    Mark Zuckerberg launch Facebook
    7. 7. H ISTORY AND S TATICS 2008/8    Facebook reaches over 100 million active users 2007/10  Facebook reaches over  50 million active users 2004/2    Mark Zuckerberg launch Facebook
    8. 8. H ISTORY AND S TATICS 2009/9    Facebook reaches over 300 million active users 2009/2    Facebook reaches over 200 million active users 2008/8    Facebook reaches over 100 million active users 2007/10  Facebook reaches over  50 million active users 2004/2    Mark Zuckerberg launch Facebook
    9. 9. H ISTORY AND S TATICS 2010/2    Facebook reaches over 400 million active users 2009/12  Facebook reaches over 350 million active users 2009/9    Facebook reaches over 300 million active users 2009/2    Facebook reaches over 200 million active users 2008/8    Facebook reaches over 100 million active users 2007/10  Facebook reaches over  50 million active users 2004/2    Mark Zuckerberg launch Facebook
    10. 10. H ISTORY AND S TATICS 全球有 四億多 會員,台灣則有 650 萬
    11. 11. H ISTORY AND S TATICS 有 50% 的會員,每天會造訪 Facebook
    12. 12. H ISTORY AND S TATICS 所有會員每個月花超過 5000 億 分鐘在 Facebook 上
    13. 13. H ISTORY AND S TATICS Facebook 上有 1.6 億 個物件與會員進行互動
    14. 14. H ISTORY AND S TATICS Facebook 有超過 70 種語系 版本
    15. 15. H ISTORY AND S TATICS 有約 70% 的 Facebook 會員來自美國以外
    16. 16. H ISTORY AND S TATICS 有超過 100 萬 個網站和 Facebook 整合
    17. 17. H ISTORY AND S TATICS Facebook 有超過 55 萬 個 Apps
    18. 18. H ISTORY AND S TATICS 每月有 70% 的會員用使用 Apps
    19. 19. H ISTORY AND S TATICS 有超過 100 萬 的會員透過手機連到 Facebook
    20. 20. H ISTORY AND S TATICS
    21. 21. Sony Pictures has released the first trailer for the upcoming movie, “The Social Network”, which is loosely based (sensationalized) on the history of Facebook http://www.thesocialnetwork-movie.com/ http://www.youtube.com/watch?v=mWoUgftTj3Y
    22. 22. The Interface of Facebook
    23. 23. The Interface of Facebook
    24. 24. The Interface of Facebook
    25. 25. The Interface of Facebook
    26. 26. THE RESOURCE WE NEED TO KNOW <ul><ul><li>Facebook </li></ul></ul>
    27. 27. T HE R ESOURCE W E NEED TO KNOW <ul><ul><li>Facebook Developer Wiki  </li></ul></ul><ul><ul><ul><li>http://wiki.developers.facebook.com/index.php/Main_Page </li></ul></ul></ul><ul><ul><li>Facebook developers Site  </li></ul></ul><ul><ul><ul><li>http://developers.facebook.com/  </li></ul></ul></ul><ul><ul><li>Developer Blog </li></ul></ul><ul><ul><ul><li>http://developers.facebook.com/blog/  </li></ul></ul></ul><ul><ul><li>All Facebook </li></ul></ul><ul><ul><ul><li>http://www.allfacebook.com/ </li></ul></ul></ul><ul><ul><li>Inside Facebook </li></ul></ul><ul><ul><ul><li>http://www.insidefacebook.com/ </li></ul></ul></ul><ul><ul><li>http://www.facebook.com/developers/ </li></ul></ul><ul><ul><li>Tools </li></ul></ul><ul><ul><ul><li>Firefox Firebug </li></ul></ul></ul><ul><ul><ul><li>http://developers.facebook.com/tools/ </li></ul></ul></ul>
    28. 28. W HAT LANGUAGES W E USE IN THIS OFFERING <ul><ul><li>Javascript </li></ul></ul><ul><ul><li>PHP </li></ul></ul><ul><ul><li>And we will also take a look at Facebook iPhone API </li></ul></ul>
    29. 29. W HAT LANGUAGES W E USE IN THIS OFFERING <ul><ul><li>But We Don’t discuss the skill for JavaScript, PHP, Objective-C, etc. </li></ul></ul>
    30. 30. Big Event <ul><ul><li>f8 developer conference on April 21, 2010. </li></ul></ul>
    31. 31. W HAT F ACEBOOK P ROVIDES N OW <ul><ul><li>Facebook for Website </li></ul></ul><ul><ul><li>Apps on Facebook.com </li></ul></ul><ul><ul><li>Mobile Apps </li></ul></ul>
    32. 32. A DD F ACEBOOK TO MY WEBSITE <ul><ul><li>Facebook </li></ul></ul>
    33. 33. A DD F ACEBOOK TO MY WEBSITE <ul><ul><li>Social Plugins </li></ul></ul><ul><ul><li>Single Sign-on </li></ul></ul><ul><ul><li>Graph API </li></ul></ul><ul><ul><li>Open Graph Protocol </li></ul></ul><ul><ul><li>Analytics </li></ul></ul><ul><ul><li>Platform showcase </li></ul></ul>
    34. 34. SOCIAL PLUGINS <ul><ul><li>Facebook </li></ul></ul>
    35. 35. S OCIAL P LUGINS
    36. 36. S OCIAL P LUGINS <ul><ul><li>The easiest way to get started with Facebook Platform. </li></ul></ul><ul><ul><li>We Can Use iframe or XFBML method  </li></ul></ul><ul><ul><li>Sample Code (iframe) </li></ul></ul><ul><ul><li><iframe src=&quot;http://www.facebook.com/widgets/like.php?href= http://example.com &quot; scrolling=&quot;no&quot; frameborder=&quot;0&quot; style=&quot;border:none; width:450px; height:80px&quot;></iframe> </li></ul></ul>
    37. 37. Demo
    38. 38. SINGLE SIGN-ON <ul><ul><li>Facebook </li></ul></ul>
    39. 39. Single Sign-on <ul><ul><li>Oauth 2.0 protocol </li></ul></ul><ul><ul><ul><li>http://tools.ietf.org/html/draft-ietf-oauth-v2-08 </li></ul></ul></ul><ul><ul><ul><li>http://hueniverse.com/2010/05/introducing-oauth-2-0/ </li></ul></ul></ul><ul><ul><li>We Can get basically: </li></ul></ul><ul><ul><ul><li>All general information: like name, profile picture, gender and network. </li></ul></ul></ul><ul><ul><li>We can get more </li></ul></ul><ul><ul><ul><li>Ask extended Permisson </li></ul></ul></ul><ul><ul><ul><li>http://developers.facebook.com/docs/authentication/permissions </li></ul></ul></ul><ul><ul><li>JavaScript SDK is a simple way </li></ul></ul><div id=&quot;fb-root&quot;></div> <script src=&quot;http://connect.facebook.net/en_US/all.js&quot;></script> <script> FB.init({appId: ' your app id ', status: true, cookie: true, xfbml: true}); FB.Event.subscribe('auth.sessionChange', function(response) { if (response.session) { // A user has logged in, and a new cookie has been saved } else { // The user has logged out, and the cookie has been cleared } }); </script>
    40. 40. Single Sign-on How to and Flow <ul><ul><li>Register Our App </li></ul></ul><ul><ul><ul><li>http://tools.ietf.org/html/draft-ietf-oauth-v2-08 </li></ul></ul></ul><ul><ul><ul><li>http://hueniverse.com/2010/05/introducing-oauth-2-0/ </li></ul></ul></ul><ul><ul><li>Redirect the user to https://graph.facebook.com/oauth/authorize with client_id </li></ul></ul><ul><ul><li>After the user authorizes your application, Facebook redirects the user to the callback URL you specified with the access token in the URL fragment: </li></ul></ul><ul><ul><li>Use the access token returned by the request above to fetch data from the Graph API on behalf of the user. </li></ul></ul>
    41. 41. Extended Permission <ul><ul><li>Register Our App </li></ul></ul><ul><ul><ul><li>http://tools.ietf.org/html/draft-ietf-oauth-v2-08 </li></ul></ul></ul><ul><ul><ul><li>http://hueniverse.com/2010/05/introducing-oauth-2-0/ </li></ul></ul></ul><ul><ul><li>http://developers.facebook.com/docs/authentication/permissions </li></ul></ul>
    42. 42. GRAPH API <ul><ul><li>Facebook </li></ul></ul>
    43. 43. Register Apps <ul><ul><li>http://www.facebook.com/?ref=logo#!/developers/apps.php </li></ul></ul>
    44. 44. Graph API (1) - get data <ul><ul><li>https://graph.facebook.com/ID </li></ul></ul>
    45. 45. Graph API (2) - get data <ul><ul><li>https://graph.facebook.com/ID/CONNECTION_TYPE </li></ul></ul>
    46. 46. Graph API (3) - selection, Introspection <ul><ul><li>https://graph.facebook.com/ID?fields=A,B,C... </li></ul></ul><ul><ul><li>https://graph.facebook.com/?ids=XXX,YYY </li></ul></ul>
    47. 47. Graph API (4) POST <ul><ul><li>We can publish to the Facebook graph by issuing HTTP POST requests to the appropriate connection URLs </li></ul></ul>
    48. 48. Graph API (5) Delete <ul><ul><li>We can delete objects in the graph by issuing HTTP DELETE requests to the object </li></ul></ul><ul><ul><ul><li>DELETE https://graph.facebook.com/ID?access_token=... HTTP/1.1 </li></ul></ul></ul><ul><ul><ul><li>OR </li></ul></ul></ul><ul><ul><ul><li>https://graph.facebook.com/COMMENT_ID?method=delete </li></ul></ul></ul>
    49. 49. Graph API (6) Search <ul><ul><li>We can search over all public objects </li></ul></ul><ul><ul><ul><li>https://graph.facebook.com/search?q=QUERY&type=OBJECT_TYPE </li></ul></ul></ul><ul><ul><li>For Example All public posts: https://graph.facebook.com/search?q=watermelon&type=post People: </li></ul></ul><ul><ul><li>https://graph.facebook.com/search?q=mark&type=user Pages: </li></ul></ul><ul><ul><li>https://graph.facebook.com/search?q=platform&type=page Events: </li></ul></ul><ul><ul><li>https://graph.facebook.com/search?q=conference&type=event Groups: https://graph.facebook.com/search?q=programming&type=group </li></ul></ul>
    50. 50. Graph API (7) Tool <ul><ul><li>Graph API reference </li></ul></ul><ul><ul><ul><li>http://developers.facebook.com/docs/reference/api/ </li></ul></ul></ul>
    51. 51. Graph API (8) Tools <ul><ul><li>CURL </li></ul></ul><ul><ul><li>Javascript </li></ul></ul>
    52. 52. OPEN GRAPH PROTOCOL <ul><ul><li>Facebook </li></ul></ul>
    53. 53. Introduction
    54. 54. Introduction – from insidefacebook.com
    55. 55. Getting Start
    56. 56. <ul><li>http://developers.facebook.com/tools/lint/ </li></ul>Tool: URL Linter
    57. 57. Administering our page
    58. 58. Location Meta Data
    59. 59. Analytics <ul><ul><li>http://www.facebook.com/insights/ </li></ul></ul>
    60. 60. ShowCase
    61. 61. JAVASCRIPT SDK <ul><ul><li>Facebook </li></ul></ul>
    62. 62. JavaScript SDK(1) <ul><li>The JavaScript SDK enables you to access all of the features of the Graph API via JavaScript </li></ul><ul><li>The JavaScript SDK is also necessary to use the XFBML </li></ul><ul><li>Must register your application. </li></ul><ul><li>The SDK is open source and is available on </li></ul><ul><li>http://github.com/facebook/connect-js </li></ul>
    63. 63. JavaScript SDK(2) <ul><li>Core Methods </li></ul><ul><li>Event Handling </li></ul><ul><li>XFBML Methods </li></ul><ul><li>Data Access Utilities </li></ul><ul><li>Canvas Methods </li></ul>
    64. 64. JavaScript SDK(3) – Core Methods <ul><li>FB.api </li></ul><ul><ul><li>Make a API call </li></ul></ul><ul><li><script> FB.api('/me', function(response) {   console.log(response); }); </script> </li></ul>
    65. 65. JavaScript SDK(4) – Core Methods <ul><li>FB.getLoginStatus </li></ul><ul><ul><li>Find out the current status from the server, and get a session if the user is connected. </li></ul></ul><ul><li><script> FB.getLoginStatus(function(response) {   if (response.session) {     alert('Coneected');   } else {     alert('No Coneected');   } }); </script> </li></ul>
    66. 66. JavaScript SDK(5) – Core Methods <ul><li>FB.login </li></ul><ul><ul><li>Login/Authorize/Permissions. </li></ul></ul><ul><li><button id=&quot;fb-login&quot;>Login</button> <script> document.getElementById('fb-login').onclick = function() {   FB.login(function(response) {     Log.info('FB.login callback', response);     if (response.session) {       Log.info('User is logged in');     } else {       Log.info('User is logged out');     }   }); }; </script> </li></ul>
    67. 67. JavaScript SDK(6) – Core Methods <ul><li>FB.logout </li></ul><ul><ul><li>Logout the user in the background. </li></ul></ul><ul><li><button id=&quot;fb-logout&quot;>Logout</button> <script> document.getElementById('fb-logout').onclick = function() {   FB.logout(function(response) {     alert('logout!');   // user is now logged out   }); }; </script> </li></ul>
    68. 68. JavaScript SDK(7) – Core Methods <ul><li>FB.ui </li></ul><ul><ul><li>Method for triggering UI interaction with Facebook as IFrame dialogs or popups, like publishing to the stream, sharing links. </li></ul></ul><ul><li><script>  var share = {    method: 'stream.share',    u: 'http://www.cht.com.tw/'  };  FB.ui(share, function(response) { console.log(response); }); </script> </li></ul>
    69. 69. JavaScript SDK(8) – Event Handling <ul><li>FB.Event.subscribe </li></ul><ul><ul><li>Subscribe to a given event name, invoking your callback function whenever the event is fired. </li></ul></ul><ul><li><script> FB.Event.subscribe('auth.sessionChange', function(response) </li></ul><ul><li>{ // do something with response.session }); </script> </li></ul>
    70. 70. JavaScript SDK(9) – Event Handling <ul><li>FB.Event.unsubscribe </li></ul><ul><ul><li>Removing a subscriber is basically the same as adding one </li></ul></ul><ul><li><script> var onSessionChange = function(response) { // do something with response.session }; </li></ul><ul><li>FB.Event.subscribe('auth.sessionChange', onSessionChange); </li></ul><ul><li>FB.Event.unsubscribe('auth.sessionChange', onSessionChange); </script> </li></ul>
    71. 71. JavaScript SDK(10) – Data Access <ul><li>FB.Data.query </li></ul><ul><ul><li>Removing a subscriber is basically the same as adding one </li></ul></ul><ul><li>FB.Data.waitOn </li></ul><ul><ul><li>Wait until the results of all queries are ready </li></ul></ul><ul><li><script> var onSessionChange = function(response) { // do something with response.session }; </li></ul><ul><li>FB.Event.subscribe('auth.sessionChange', onSessionChange); </li></ul><ul><li>FB.Event.unsubscribe('auth.sessionChange', onSessionChange); </script> </li></ul>
    72. 72. JavaScript SDK(11) - Canvas Methods <ul><li>FB.Canvas.setAutoResize </li></ul><ul><ul><li>Starts or stops a timer which resizes your iframe every few milliseconds. </li></ul></ul><ul><li>FB.Canvas.setSize </li></ul><ul><ul><li>Tells Facebook to resize your iframe. </li></ul></ul>
    73. 73. APPS ON FACEBOOK.COM <ul><ul><li>Facebook </li></ul></ul>
    74. 74. A PPS ON F ACEBOOK . COM
    75. 75. ARCHITECTURE <ul><ul><li>Facebook </li></ul></ul>
    76. 76. W HAT F ACEBOOK P ROVIDES N OW <ul><ul><li>FBML Canvas Applications Information Flow </li></ul></ul>
    77. 77. W HAT F ACEBOOK P ROVIDES N OW <ul><ul><li>Websites and IFrame Canvas Applications Information Flow </li></ul></ul>
    78. 78. Register facebook application
    79. 79. Register facebook application - 基本資料
    80. 80. Register facebook application – 驗證 參數 說明 Installable to? 什麼可以使用應用程式,共有兩種選擇,分別是個人檔案和粉絲專頁。 Post-Authorize Callback URL 當使用者第一次新增應用程式後,呼叫的網址。 Post-Remove Callback URL 當使用者移除應用程式後,呼叫的網址。
    81. 81. Register facebook application – 個人檔案 參數 說明 標籤名稱 顯示在個人檔案頁籤的名稱。 標籤網址 當點選頁籤時所載入的網址。 Post-Remove Callback URL 當使用者移除應用程式後,呼叫的網址。
    82. 82. Register facebook application – 個人檔案
    83. 83. Register facebook application – 個人檔案 參數 說明 發佈文字 位於朋友的個人檔案頁面中發佈器所顯示之標題文字。 發佈回呼網址 當在朋友的個人檔案發佈資訊時所呼叫的網址。 自我發佈文字 位於使用者本人的個人檔案頁面中發佈器所顯示之標題文字。 自我發佈回呼網址 當在使用者本人的個人檔案發佈資訊時所呼叫的網址。
    84. 84. Register facebook application – 畫布 參數 說明 畫布頁面網址 設定將應用程式的畫布網址,基本上,這算是應用程式的首頁網址。只要沒有其他應用程式指定的字串,我們可以將該字串設定為畫布網址。 Canvas Callback URL 應用程式真正的網址。 Post-Authorize Redirect URL 當使用者第一次確認應用程式導向的頁面,預設值為畫布頁面網址。 呈現方法 可選則 FBML 或 Iframe 。 IFrame 大小 當選擇 IFrame 時可設定其大小。 畫布寬度 當選擇畫布時可設定其大小。
    85. 85. Authentication Canvas applications use cookies to get user authentication information. The cookie includes a signature for all the values as the argument sig.
    86. 86. Integration Points <ul><ul><li>Stream publishing </li></ul></ul><ul><ul><li>Requests </li></ul></ul><ul><ul><li>Bookmarks and Counters </li></ul></ul><ul><ul><li>Application and Games dashboards </li></ul></ul><ul><ul><li>Profile tabs </li></ul></ul>
    87. 87. Stram publishing
    88. 88. Request Using FBML tags you can render request forms and friend selectors.
    89. 89. Bookmark, Counters, Game Dashboard, Profile Tab <fb:bookmark></fb:bookmark>
    90. 90. FACEBOOK QUERY LANGUAGE <ul><ul><li>Facebook </li></ul></ul>
    91. 91. FQL(1) <ul><ul><li>Facebook Query Language </li></ul></ul><ul><ul><li>Enables we to use a SQL-style interface to query the data </li></ul></ul><ul><ul><li>https://api.facebook.com/method/fql.query?query=QUERY. </li></ul></ul><ul><ul><li>Table </li></ul></ul>
    92. 92. FQL(2) – Testing Tool <ul><ul><li>http://developers.facebook.com/docs/reference/rest/fql.query </li></ul></ul>
    93. 93. FQL(3) – 支援基本的運算字 參數 說明 + 加法 - 減法 * 乘法 / 除法 > 大於 < 小於 >= 大於等於 <= 小於等於 = 等於 AND 及 OR 或 NOT 不是
    94. 94. FQL(4) – 支援的函式 參數 說明 now() 取得現在的時間。 rand() 產生亂數。 strlen(string) 計算字串長度。 concat(string, ...) 合併本函式中的所有字串。 substr(string, start, length) 根據字串開始位置 start 和取得長度 length 兩個參數,取得 string 字串的部份文字。 strpos(haystack, needle) 搜尋 haystack 字串,找出該字串中第一次出現 needle 字串的位置,若找不到符合 needle 字串的文字,則回傳 -1 。 lower(string) 將字串轉換成小寫。 upper(string) 將字串轉換成大寫。
    95. 95. FQL(5) – Table : link_stat <ul><ul><li>Query this table to return detailed information from your Facebook Share implementation </li></ul></ul><ul><ul><li>SELECT share_count, like_count, comment_count, total_count,click_count FROM link_stat WHERE url=&quot;http://www.yahoo.com&quot; </li></ul></ul>
    96. 96. FQL(6) – Table : friend <ul><ul><li>Query this table to determine whether two users are linked together as friends. </li></ul></ul><ul><ul><li>確認 uid1 跟 uid2 是否為朋友,若雙方不是朋友,將會取得空字串。 </li></ul></ul><ul><ul><ul><li>select uid1,uid2 from friend where uid1=4 and uid2=5 </li></ul></ul></ul><ul><ul><li>取得 uid1 的朋友清單 </li></ul></ul><ul><ul><ul><li>select uid1,uid2 from friend where uid1= 登入者的 UID </li></ul></ul></ul>
    97. 97. FQL(7) – Tables <ul><ul><li>stream </li></ul></ul><ul><ul><ul><li>SELECT actor_id, message FROM stream WHERE source_id = <user id> limit 5 </li></ul></ul></ul><ul><ul><li>photo_tag </li></ul></ul><ul><ul><ul><li>SELECT pid FROM photo_tag WHERE subject=$uid </li></ul></ul></ul><ul><ul><li>photo </li></ul></ul><ul><ul><ul><li>SELECT src_big FROM photo WHERE pid IN ( </li></ul></ul></ul><ul><ul><ul><li>SELECT pid FROM photo_tag WHERE subject=$uid </li></ul></ul></ul><ul><ul><ul><li>) </li></ul></ul></ul>
    98. 98. FBML <ul><ul><li>Facebook </li></ul></ul>
    99. 99. FBML(1) <ul><ul><li>FBML enables you to build Facebook applications that deeply integrate into a user's Facebook experience. </li></ul></ul>
    100. 100. FBML(2) <ul><li>Tools </li></ul><ul><li>User/Groups </li></ul><ul><li>Notifications and Requests </li></ul><ul><li>Platform Internationalization </li></ul><ul><li>Status Messages </li></ul><ul><li>Page Navigation </li></ul><ul><li>Wall </li></ul><ul><li>Visibility on Profile </li></ul><ul><li>Profile-specific </li></ul><ul><li>Misc </li></ul><ul><li>Editor Display </li></ul><ul><li>Embedded Media </li></ul><ul><li>Dialog </li></ul><ul><li>Additional Permissions </li></ul><ul><li>Social Widgets </li></ul><ul><li>Message Attachments </li></ul><ul><li>Forms </li></ul>
    101. 101. FBML(3) <fb: 語法名稱 參數一 =&quot; 參數值 &quot; 參數二 =&quot; 參數值 &quot; ‧‧‧ > 傳入內容 </fb: 語法名稱 >
    102. 102. FBML(4)
    103. 103. FBML(5) <ul><li>http://developers.facebook.com/docs/reference/fbml/ </li></ul><ul><li>http://developers.facebook.com/tools/console/ </li></ul>
    104. 104. FBML(6) <fb:bookmark></fb:bookmark> <fb:comments xid=&quot;titans_comments&quot; canpost=&quot;true&quot; candelete=&quot;false&quot; returnurl=&quot;http://apps.facebook.com/myapp/titans/&quot;></fb:comments>
    105. 105. OLD REST API <ul><ul><li>The old REST API is the previous version of the Graph API. </li></ul></ul><ul><ul><li>If we are new to the Facebook Platform, Facebook recommend you use our new Graph API instead. </li></ul></ul><ul><ul><li>Administrative Methods </li></ul></ul><ul><ul><li>Login/Auth Methods </li></ul></ul><ul><ul><li>Data Retrieval Methods </li></ul></ul><ul><ul><li>Publishing Methods </li></ul></ul><ul><ul><li>Facebook Connect Methods </li></ul></ul><ul><ul><li>Mobile Methods </li></ul></ul><ul><ul><li>Dashboard API Methods </li></ul></ul><ul><ul><li>Events API Methods </li></ul></ul><ul><ul><li>Custom Tags API Methods </li></ul></ul><ul><ul><li>https://api.facebook.com/method/xxxx?access_token= </li></ul></ul>
    106. 106. M OBILE APPS <ul><ul><li>iPhone SDK </li></ul></ul><ul><ul><li>Android SDK </li></ul></ul>
    107. 107. M OBILE APPS - iPhone

    ×