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.
Presentation on how to chat with PDF using ChatGPT code interpreter
Build Facebook Apps using PHP
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
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