Post on 29-Nov-2014
description
We Know Business, We Know Technology, We Are Global
Building Facebook Appsusing PHP
Trinh Van ThanhFacebook App Leader
Japan DivisionSETA International Vietnam
1
We Know Business, We Know Technology, We Are Global
TRINH VAN THANH Facebook App Development Leader @SETA International LLC since 2010 A Facebook Lover. Facebook 24/7 1000 hours developing Facebook Apps 20 Facebook Apps built Top 3 Facebook App in Japan Contact: thanhtv6075@setacinq.com.vn Gmail: tvthanhdl@gmail.com Facebook:
http://www.facebook.com/tvthanhdl
Software Outsourcing 150 developers in
Hanoi, VN Market: US, Japan 2nd Join PHP Day as
Sponsor and Presentor http://www.seta-
international.co.jp/
ABOUT ME ABOUT US
2
We Know Business, We Know Technology, We Are Global
WHY FACEBOOK
BUILDING FACEBOOK APPS USING PHP
DEMO
AGENDA
3
We Know Business, We Know Technology, We Are Global
WHY FACEBOOK4
We Know Business, We Know Technology, We Are Global
FACEBOOK IS HUGE ECO
Source: The perfect Startup, Fabemovel
5
We Know Business, We Know Technology, We Are Global
PERFECT SCALING –VERY STABLE PLATFORM (NOW)
Source: The perfect Startup, Fabemovel
6
We Know Business, We Know Technology, We Are Global
The Viral Loop
Social media on Facebook
Source: The perfect Startup, Fabemovel
7
We Know Business, We Know Technology, We Are Global
Facebook’s platform is built on three main tools
Source: The perfect Startup, Fabemovel
8
We Know Business, We Know Technology, We Are Global
BUILDING FACEBOOK APPS BY PHP9
We Know Business, We Know Technology, We Are Global
• Apps on Facebook.com– Canvas app– Page tab– Mobile web
Facebook apps?
10
We Know Business, We Know Technology, We Are Global
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
760px(default)
Canvas Apps
AdvertisingCPM and CPC
12
We Know Business, We Know Technology, We Are Global
• 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.
Page Tab
13
We Know Business, We Know Technology, We Are Global
810px(max)
advertising
Page Tab
14
We Know Business, We Know Technology, We Are Global
520px(default)
Page Tab
15
We Know Business, We Know Technology, We Are Global
Mobile Web
Source: socialbakers
16
We Know Business, We Know Technology, We Are Global
• 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
Mobile Web
17
We Know Business, We Know Technology, We Are Global
Mobile Web
18
We Know Business, We Know Technology, We Are Global
• Social network• Social media
• Open graph 1.0 -> Like action only• Open graph 2.0 -> customize actions
Open Graph
19
We Know Business, We Know Technology, We Are Global
Open Graph 1.0
20
We Know Business, We Know Technology, We Are Global
Open Graph 2.0
21
We Know Business, We Know Technology, We Are Global
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
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
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
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
Create a Facebook App(Configuring Canvas apps)
Default: 760pxFluid: 100%
Required if check permission
Enable auth on domain & subdomain
Only app developer will be able to use
app
26
We Know Business, We Know Technology, We Are Global
Code example(use PHP SDK)
• Installing and Initializing
27
We Know Business, We Know Technology, We Are Global
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
Code example(Graph API)
29
We Know Business, We Know Technology, We Are Global
Code example(Graph API)
• Function fbRedirect():
30
We Know Business, We Know Technology, We Are Global
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
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
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
• 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
Create a Facebook App(Configuring Page tab)
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
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
$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”
}
Code example(Page tab: check LIKE page)
36
We Know Business, We Know Technology, We Are Global
Combined with JS SDK(loading js)
• Add to body:
37
We Know Business, We Know Technology, We Are Global
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
Facebook for Websites(social plugins)
• Like• Share• Comment
• http://developers.facebook.com/docs/plugins
39
We Know Business, We Know Technology, We Are Global
DEMO40
We Know Business, We Know Technology, We Are Global
DISCUSSION
41
We Know Business, We Know Technology, We Are Global
THANK YOU
http://www.facebook.com/setacinq
42
Please contact me to receive sample code