The document discusses building Facebook apps using PHP. It provides an overview of different types of Facebook apps including canvas apps, page tabs, and mobile web. It then covers key concepts for building Facebook apps like the Open Graph and Facebook's Graph API. The document includes code examples for common tasks like posting status updates, uploading photos, and checking if a user likes a page. It also provides guidance on configuring apps and integrating them with the Facebook platform.

1. Building Facebook Apps
using PHP
Trinh Van Thanh
Facebook App Leader
Japan Division
SETA International Vietnam
1 We Know Business, We Know Technology, We Are Global

2. ABOUT ME ABOUT US
 TRINH VAN THANH  Software Outsourcing
 Facebook App Development Leader  150 developers in
 @SETA International LLC since 2010 Hanoi, VN
 A Facebook Lover. Facebook 24/7   Market: US, Japan
 1000 hours developing Facebook Apps  2nd Join PHP Day as
 20 Facebook Apps built Sponsor and Presentor
 Top 3 Facebook App in Japan  http://www.seta-
 Contact: thanhtv6075@setacinq.com.vn international.co.jp/
 Gmail: tvthanhdl@gmail.com
 Facebook:
http://www.facebook.com/tvthanhdl
2 We Know Business, We Know Technology, We Are Global

3. AGENDA
 WHY FACEBOOK
 BUILDING FACEBOOK APPS USING PHP
 DEMO
3 We Know Business, We Know Technology, We Are Global

4. WHY FACEBOOK
4 We Know Business, We Know Technology, We Are Global

5. FACEBOOK IS HUGE ECO
Source: The perfect Startup, Fabemovel
5 We Know Business, We Know Technology, We Are Global

6. PERFECT SCALING –VERY STABLE PLATFORM (NOW)
Source: The perfect Startup, Fabemovel
6 We Know Business, We Know Technology, We Are Global

7. Social media on Facebook
The Viral Loop
Source: The perfect Startup, Fabemovel
7 We Know Business, We Know Technology, We Are Global

8. Facebook’s platform is built on three main tools
Source: The perfect Startup, Fabemovel
8 We Know Business, We Know Technology, We Are Global

9. BUILDING FACEBOOK
APPS BY PHP
9 We Know Business, We Know Technology, We Are Global

10. Facebook apps?
• Apps on Facebook.com
– Canvas app
– Page tab
– Mobile web
10 We Know Business, We Know Technology, We Are Global

11. Canvas Apps
• It is just the “home” page of the application where the
app is described to those who might want to use it.
• Example: http://apps.facebook.com/monipla/
11 We Know Business, We Know Technology, We Are Global

12. Canvas Apps
760px(default)
Advertising
CPM and CPC
12 We Know Business, We Know Technology, We Are Global

13. Page Tab
• Facebook page: are a heavily used feature of Facebook. Major
brands, celebrities, etc. use Facebook Pages as their "social
home" on the web. One of the most interesting features of Apps
on Facebook.com is the ability for your app to be used within the
context of a Facebook Page.
Example:
- YouTube
- Nhật Ký
- SETA:CINQ Vietnam, Ltd
- PHPDay2012
- Pargolfonline
- …
• Page tab are apps on Facebook Page.
13 We Know Business, We Know Technology, We Are Global

14. Page Tab
810px(max)
advertising
14 We Know Business, We Know Technology, We Are Global

15. Page Tab
520px(default)
15 We Know Business, We Know Technology, We Are Global

16. Mobile Web
Source: socialbakers
16 We Know Business, We Know Technology, We Are Global

17. Mobile Web
• Mobile web apps are built using web
technologies including HTML5, Javascript and
CSS. You can build once and deploy
everywhere, including on iPhone, iPad and
Android.
- Hummerbinbyun
17 We Know Business, We Know Technology, We Are Global

18. Mobile Web
18 We Know Business, We Know Technology, We Are Global

19. Open Graph
• Social network
• Social media
• Open graph 1.0 -> Like action only
• Open graph 2.0 -> customize actions
19 We Know Business, We Know Technology, We Are Global

20. Open Graph 1.0
20 We Know Business, We Know Technology, We Are Global

21. Open Graph 2.0
21 We Know Business, We Know Technology, We Are Global

22. Build apps use PHP SDK with Graph API
(Becoming a Facebook Developer)
• Requires
• Resources
• How to build facebook app
22 We Know Business, We Know Technology, We Are Global

23. Requires
• PHP (Support PHP, JS, IOS, Android SDK)
• JS
• HTML (HTML5 with mobile web)
• CSS (CSS3 with mobile web)
• MySQL (optional)
23 We Know Business, We Know Technology, We Are Global

24. Resources
• Tools - https://developers.facebook.com/tools/
• Bugs - https://developers.facebook.com/bugs
• Developer Application -
https://developers.facebook.com/apps
• Developer Blog - https://developers.facebook.com/blog/
• Developer Roadmap -
https://developers.facebook.com/roadmap/
• Document - https://developers.facebook.com/docs/
• PHP SDK - https://github.com/facebook/facebook-php-sdk
24 We Know Business, We Know Technology, We Are Global

25. Create a Facebook App
(Create)
• Start by visiting the Developer App. If you haven't created an
application before you will be prompted to add the Developer
Application.
25 We Know Business, We Know Technology, We Are Global

26. Create a Facebook App
(Configuring Canvas apps)
Enable auth on
domain & subdomain
Only app developer
will be able to use
app
Required if check
permission
Default: 760px
Fluid: 100%
26 We Know Business, We Know Technology, We Are Global

27. Code example
(use PHP SDK)
• Installing and Initializing
27 We Know Business, We Know Technology, We Are Global

28. Code example
(Graph API)
• Use static: Facebook::api(/* polymorphic */);
• Use object: $facebook->api(/* polymorphic */);
• /* polymorphic */:= {$path, $method, $params}
28 We Know Business, We Know Technology, We Are Global

29. Code example
(Graph API)
29 We Know Business, We Know Technology, We Are Global

30. Code example
(Graph API)
• Function fbRedirect():
30 We Know Business, We Know Technology, We Are Global

31. Code example
(Post Status)
• Permission: publish_stream
$facebook->api('/me/feed', 'POST',
array(
'link' => 'www.yourdomain.com',
'message' => 'Posting with the PHP SDK! on
http://yourdomain.com'
));
31 We Know Business, We Know Technology, We Are Global

32. Code example
(Post Photo)
• Permissions: publish_stream, photo_upload
//Required set to upload photo
$facebook->setFileUploadSupport( true );
$photo = 'path-to-photo'; //required in host login to apps
$message = 'Photo upload via the PHP SDK! on
http://yourdomain.com';
$facebook->api('/me/photos', 'POST', array(
'source' => '@' . $photo,
'message' => $message,
));
32 We Know Business, We Know Technology, We Are Global

33. Code example
(count LIKE of an url)
$link = 'LINK_TO_COUNT';
$likes = $facebook->api(array(
'query' => 'SELECT share_count, like_count, comment_count,
total_count FROM link_stat WHERE url IN("' . $link . '")',
'method' => 'fql.query')
);
33 We Know Business, We Know Technology, We Are Global

34. Create a Facebook App
(Configuring Page tab)
• You can find these settings in the "Basic" section of your app's
settings in the Developer App under 'Select how your app
integrates with Facebook'. Click 'Page Tab' to expand the Page Tab
settings, and the Page Tab fields will appear
The user-facing title
of your Page app
URL to load content
to page tab
Icon of page tab
34 We Know Business, We Know Technology, We Are Global

35. Create a Facebook App
(Adding an App to Page)
• The Add Page Tab Dialog prompts the user to add an app to a
Facebook Page that the user admins. This does not require any
extended permissions.
• Request URL: https://www.facebook.com/dialog/pagetab?
app_id=YOUR_APP_ID &display=popup&next=YOUR_URL
35 We Know Business, We Know Technology, We Are Global

36. Code example
(Page tab: check LIKE page)
$signedRequest = $facebook->getSignedRequest();
$isLiked = $signedRequest["page"]["liked"];
if( $isLiked ){
//load visible contents to page tab
}else{
//load invisible contents to page tab
//Show message “click like button to app”
}
36 We Know Business, We Know Technology, We Are Global

37. Combined with JS SDK
(loading js)
• Add to body:
37 We Know Business, We Know Technology, We Are Global

38. Combined with JS SDK
(loading js)
• FB.Canvas.setAutoGrow(timeout);
• FB.Canvas.setSize();
• FB.Canvas.scrollTo();
38 We Know Business, We Know Technology, We Are Global

39. Facebook for Websites
(social plugins)
• Like
• Share
• Comment
• http://developers.facebook.com/docs/plugins
39 We Know Business, We Know Technology, We Are Global

40. DEMO
40 We Know Business, We Know Technology, We Are Global

41. DISCUSSION
41 We Know Business, We Know Technology, We Are Global

42. THANK YOU
Please contact me to receive sample code
http://www.facebook.com/setacinq
42 We Know Business, We Know Technology, We Are Global