building facebook apps (thanh tv@seta) in php day 2012

We Know Business, We Know Technology, We Are Global

Building Facebook Appsusing PHP

Trinh Van ThanhFacebook App Leader

Japan DivisionSETA International Vietnam

1


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: [email protected] Gmail: [email protected] 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


WHY FACEBOOK

BUILDING FACEBOOK APPS USING PHP

DEMO

AGENDA

3


WHY FACEBOOK4


FACEBOOK IS HUGE ECO

Source: The perfect Startup, Fabemovel

5


PERFECT SCALING –VERY STABLE PLATFORM (NOW)


6


The Viral Loop

Social media on Facebook


7


Facebook’s platform is built on three main tools


8


BUILDING FACEBOOK APPS BY PHP9


• Apps on Facebook.com– Canvas app– Page tab– Mobile web

Facebook apps?

10


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


760px(default)

Canvas Apps

AdvertisingCPM and CPC

12


• 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


810px(max)

advertising

Page Tab

14


520px(default)

Page Tab

15


Mobile Web

Source: socialbakers

16


• 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


Mobile Web

18


• Social network• Social media

• Open graph 1.0 -> Like action only• Open graph 2.0 -> customize actions

Open Graph

19


Open Graph 1.0

20


Open Graph 2.0

21


Build apps use PHP SDK with Graph API(Becoming a Facebook Developer)

• Requires• Resources• How to build facebook app

22


Requires

• PHP (Support PHP, JS, IOS, Android SDK)• JS• HTML (HTML5 with mobile web)• CSS (CSS3 with mobile web)• MySQL (optional)

23


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


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


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


Code example(use PHP SDK)

• Installing and Initializing

27


Code example(Graph API)

• Use static: Facebook::api(/* polymorphic */);• Use object: $facebook->api(/* polymorphic */);

• /* polymorphic */:= {$path, $method, $params}

28



29



• Function fbRedirect():

30


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


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


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


• 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


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


$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


Combined with JS SDK(loading js)

• Add to body:

37


Combined with JS SDK(loading js)

• FB.Canvas.setAutoGrow(timeout);• FB.Canvas.setSize();• FB.Canvas.scrollTo();

38


Facebook for Websites(social plugins)

• Like• Share• Comment

• http://developers.facebook.com/docs/plugins

39


DEMO40


DISCUSSION

41


THANK YOU

http://www.facebook.com/setacinq

42

Please contact me to receive sample code