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