SlideShare une entreprise Scribd logo
Facebook App Development
An introduction by Cristiano Betta
About me
Senior Web Developer
@ Nudge London
About me
Freelance Web
Developer
About me
Hobby Photographer
About me
Geek
Why Facebook Apps?
Bring existing apps into Facebook
Why Facebook Apps?
Harvest social relationships
Why Facebook Apps?	
Campaign on Facebook
Why Facebook Apps?	
Bring a brand into Facebook
Why Facebook Apps
Launch brand within Facebook
Facebook API
Facebook API
FBML/XFBML
Facebook API
FBML/XFBML
 Subset of HTML/XML, with some extra (powerful)
 Facebook tags
Facebook API
FBML/XFBML
 Subset of HTML/XML, with some extra (powerful)
 Facebook tags
 <fb:name uid="12345" capitalize="true" />
Facebook API
FBML/XFBML
 Subset of HTML/XML, with some extra (powerful)
 Facebook tags
 <fb:name uid="12345" capitalize="true" />
FQL
Facebook API
FBML/XFBML
 Subset of HTML/XML, with some extra (powerful)
 Facebook tags
 <fb:name uid="12345" capitalize="true" />
FQL
 Ideal for querying extra data server side
Facebook API
FBML/XFBML
 Subset of HTML/XML, with some extra (powerful)
 Facebook tags
 <fb:name uid="12345" capitalize="true" />
FQL
 Ideal for querying extra data server side
 SELECT name, pic FROM user WHERE uid=12345
Facebook API
FBML/XFBML
 Subset of HTML/XML, with some extra (powerful)
 Facebook tags
 <fb:name uid="12345" capitalize="true" />
FQL
 Ideal for querying extra data server side
 SELECT name, pic FROM user WHERE uid=12345
FBJS
What’s in a FB app?
Application Directory
What’s in a FB app?
About Page
What’s in a FB app?
Profile
What’s in a FB app?
Applications menu
What’s in a FB app?
Bookmarks
What’s in a FB app?
Applications Tab
What’s in a FB app?
Boxes Tab
What’s in a FB app?
Profile Info Section
What’s in a FB app?
Publisher
What’s in a FB app?
News Feed
What’s in a FB app?
    And much more.....
Integration Points
 Canvas pages
  Canvas
  Tab
  Attachment
Integration Points
 Asynchronous FBML
  Profile box
  Info tab box
  Boxes Tab
Canvas   Facebook in Browser

                Application Canvas



         Facebook Server




         Application Server
Canvas                      Facebook in Browser

                                   Application Canvas
1 - Browser makes request


                            Facebook Server




                            Application Server
Canvas                      Facebook in Browser

                                   Application Canvas
1 - Browser makes request


                            Facebook Server




                            Application Server
Canvas                           Facebook in Browser

                                        Application Canvas
1 - Browser makes request
2 - FB server calls web server
                                 Facebook Server




                                 Application Server
Canvas                           Facebook in Browser

                                        Application Canvas
1 - Browser makes request
2 - FB server calls web server
                                 Facebook Server




                                 Application Server
Canvas                            Facebook in Browser

                                         Application Canvas
1 - Browser makes request
2 - FB server calls web server
3 - App Calls FB API (optional)   Facebook Server




                                  Application Server
Canvas                            Facebook in Browser

                                         Application Canvas
1 - Browser makes request
2 - FB server calls web server
3 - App Calls FB API (optional)   Facebook Server




                                  Application Server
Canvas                            Facebook in Browser

                                         Application Canvas
1 - Browser makes request
2 - FB server calls web server
3 - App Calls FB API (optional)   Facebook Server

4 - App returns FBML




                                  Application Server
Canvas                            Facebook in Browser

                                         Application Canvas
1 - Browser makes request
2 - FB server calls web server
3 - App Calls FB API (optional)   Facebook Server

4 - App returns FBML




                                  Application Server
Canvas                            Facebook in Browser

                                         Application Canvas
1 - Browser makes request
2 - FB server calls web server
3 - App Calls FB API (optional)   Facebook Server

4 - App returns FBML
5 - Facebook renders FBML
to HTML



                                  Application Server
Canvas                            Facebook in Browser

                                         Application Canvas
1 - Browser makes request
2 - FB server calls web server
3 - App Calls FB API (optional)   Facebook Server

4 - App returns FBML
5 - Facebook renders FBML
to HTML



                                  Application Server
Profile	   Facebook in Browser

                      Profile Box



          Facebook Server




          Application Server
Profile	                         Facebook in Browser

                                            Profile Box
0 - Application provides FBML


                                Facebook Server




                                Application Server
Profile	                         Facebook in Browser

                                            Profile Box
0 - Application provides FBML


                                Facebook Server




                                Application Server
Profile	                         Facebook in Browser

                                            Profile Box
0 - Application provides FBML
1 - Browser makes request
                                Facebook Server




                                Application Server
Profile	                         Facebook in Browser

                                            Profile Box
0 - Application provides FBML
1 - Browser makes request
                                Facebook Server




                                Application Server
Profile	                         Facebook in Browser

                                            Profile Box
0 - Application provides FBML
1 - Browser makes request
2 - Facebook server renders     Facebook Server
profile FBML to HTML




                                Application Server
Profile	                         Facebook in Browser

                                            Profile Box
0 - Application provides FBML
1 - Browser makes request
2 - Facebook server renders     Facebook Server
profile FBML to HTML




                                Application Server
Authentication
Authentication
Without Authorization
Without Authorization

 fb_sig_added
 fb_sig_api_key
 fb_sig_friends
 fb_sig_time
 fb_sig_user/fb_sig_canvas_user
Without Authorization
Without Authorization
 fb_sig_in_canvas
 fb_sig_in_profile_tab
 fb_sig_profile_user
 fb_sig_profile_session_key
 fb_sig_page_id
 fb_sig_page_added
When authorized
When authorized

fb_sig_session_key
fb_sig_expires
fb_sig_profile_update_time
fb_sig_ext_perms
Security?
Security? fb_sig!
How to get started
http://www.facebook.com/developers
How to get started
Create a new app and get API key, Secret, and
more....
How to get started
Setup your application canvas with API key
How to get started
Read the wiki for reference on FBML, FBJS, API,
etc - http://wiki.developers.facebook.com/
How to get started
Make sure to get the libraries
How to get started
Write a hello world, and see what happens
More about me
cristianobetta.com
More about me
nudgelondon.com/cristiano
Questions...?

Contenu connexe

Similaire à Facebook App Development

Facebook Development in 5 Minutes
Facebook Development in 5 MinutesFacebook Development in 5 Minutes
Facebook Development in 5 MinutesJesse Stay
 
Building an interactive timeline from facebook photos
Building an interactive timeline from facebook photosBuilding an interactive timeline from facebook photos
Building an interactive timeline from facebook photosRakesh Rajan
 
Facebook 3rd Party Api
Facebook 3rd Party ApiFacebook 3rd Party Api
Facebook 3rd Party ApiYoss Cohen
 
페이스북 소셜 앱 개발 가이드 2011
페이스북 소셜 앱 개발 가이드 2011페이스북 소셜 앱 개발 가이드 2011
페이스북 소셜 앱 개발 가이드 2011Sukjoon Kim
 
Iskandar Najmuddin
Iskandar NajmuddinIskandar Najmuddin
Iskandar NajmuddiniPlatform
 
Charlie Cheever Facebook Developer Garage Uganda
Charlie Cheever Facebook Developer Garage UgandaCharlie Cheever Facebook Developer Garage Uganda
Charlie Cheever Facebook Developer Garage UgandaLeila Janah
 
Peepcode facebook-2-rails on facebook
Peepcode facebook-2-rails on facebookPeepcode facebook-2-rails on facebook
Peepcode facebook-2-rails on facebooksushilprajapati
 

Similaire à Facebook App Development (9)

Creating a Facebook App
Creating a Facebook AppCreating a Facebook App
Creating a Facebook App
 
Facebook Development in 5 Minutes
Facebook Development in 5 MinutesFacebook Development in 5 Minutes
Facebook Development in 5 Minutes
 
Facebook Dorkbot
Facebook DorkbotFacebook Dorkbot
Facebook Dorkbot
 
Building an interactive timeline from facebook photos
Building an interactive timeline from facebook photosBuilding an interactive timeline from facebook photos
Building an interactive timeline from facebook photos
 
Facebook 3rd Party Api
Facebook 3rd Party ApiFacebook 3rd Party Api
Facebook 3rd Party Api
 
페이스북 소셜 앱 개발 가이드 2011
페이스북 소셜 앱 개발 가이드 2011페이스북 소셜 앱 개발 가이드 2011
페이스북 소셜 앱 개발 가이드 2011
 
Iskandar Najmuddin
Iskandar NajmuddinIskandar Najmuddin
Iskandar Najmuddin
 
Charlie Cheever Facebook Developer Garage Uganda
Charlie Cheever Facebook Developer Garage UgandaCharlie Cheever Facebook Developer Garage Uganda
Charlie Cheever Facebook Developer Garage Uganda
 
Peepcode facebook-2-rails on facebook
Peepcode facebook-2-rails on facebookPeepcode facebook-2-rails on facebook
Peepcode facebook-2-rails on facebook
 

Dernier

Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...CzechDreamin
 
Strategic AI Integration in Engineering Teams
Strategic AI Integration in Engineering TeamsStrategic AI Integration in Engineering Teams
Strategic AI Integration in Engineering TeamsUXDXConf
 
How Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdf
How Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdfHow Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdf
How Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdfFIDO Alliance
 
Top 10 Symfony Development Companies 2024
Top 10 Symfony Development Companies 2024Top 10 Symfony Development Companies 2024
Top 10 Symfony Development Companies 2024TopCSSGallery
 
IESVE for Early Stage Design and Planning
IESVE for Early Stage Design and PlanningIESVE for Early Stage Design and Planning
IESVE for Early Stage Design and PlanningIES VE
 
Structuring Teams and Portfolios for Success
Structuring Teams and Portfolios for SuccessStructuring Teams and Portfolios for Success
Structuring Teams and Portfolios for SuccessUXDXConf
 
Syngulon - Selection technology May 2024.pdf
Syngulon - Selection technology May 2024.pdfSyngulon - Selection technology May 2024.pdf
Syngulon - Selection technology May 2024.pdfSyngulon
 
UiPath Test Automation using UiPath Test Suite series, part 2
UiPath Test Automation using UiPath Test Suite series, part 2UiPath Test Automation using UiPath Test Suite series, part 2
UiPath Test Automation using UiPath Test Suite series, part 2DianaGray10
 
ECS 2024 Teams Premium - Pretty Secure
ECS 2024   Teams Premium - Pretty SecureECS 2024   Teams Premium - Pretty Secure
ECS 2024 Teams Premium - Pretty SecureFemke de Vroome
 
Custom Approval Process: A New Perspective, Pavel Hrbacek & Anindya Halder
Custom Approval Process: A New Perspective, Pavel Hrbacek & Anindya HalderCustom Approval Process: A New Perspective, Pavel Hrbacek & Anindya Halder
Custom Approval Process: A New Perspective, Pavel Hrbacek & Anindya HalderCzechDreamin
 
Agentic RAG What it is its types applications and implementation.pdf
Agentic RAG What it is its types applications and implementation.pdfAgentic RAG What it is its types applications and implementation.pdf
Agentic RAG What it is its types applications and implementation.pdfChristopherTHyatt
 
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdfIntroduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdfFIDO Alliance
 
Extensible Python: Robustness through Addition - PyCon 2024
Extensible Python: Robustness through Addition - PyCon 2024Extensible Python: Robustness through Addition - PyCon 2024
Extensible Python: Robustness through Addition - PyCon 2024Patrick Viafore
 
Intro in Product Management - Коротко про професію продакт менеджера
Intro in Product Management - Коротко про професію продакт менеджераIntro in Product Management - Коротко про професію продакт менеджера
Intro in Product Management - Коротко про професію продакт менеджераMark Opanasiuk
 
Buy Epson EcoTank L3210 Colour Printer Online.pdf
Buy Epson EcoTank L3210 Colour Printer Online.pdfBuy Epson EcoTank L3210 Colour Printer Online.pdf
Buy Epson EcoTank L3210 Colour Printer Online.pdfEasyPrinterHelp
 
Connecting the Dots in Product Design at KAYAK
Connecting the Dots in Product Design at KAYAKConnecting the Dots in Product Design at KAYAK
Connecting the Dots in Product Design at KAYAKUXDXConf
 
Integrating Telephony Systems with Salesforce: Insights and Considerations, B...
Integrating Telephony Systems with Salesforce: Insights and Considerations, B...Integrating Telephony Systems with Salesforce: Insights and Considerations, B...
Integrating Telephony Systems with Salesforce: Insights and Considerations, B...CzechDreamin
 
Demystifying gRPC in .Net by John Staveley
Demystifying gRPC in .Net by John StaveleyDemystifying gRPC in .Net by John Staveley
Demystifying gRPC in .Net by John StaveleyJohn Staveley
 
Salesforce Adoption – Metrics, Methods, and Motivation, Antone Kom
Salesforce Adoption – Metrics, Methods, and Motivation, Antone KomSalesforce Adoption – Metrics, Methods, and Motivation, Antone Kom
Salesforce Adoption – Metrics, Methods, and Motivation, Antone KomCzechDreamin
 
Speed Wins: From Kafka to APIs in Minutes
Speed Wins: From Kafka to APIs in MinutesSpeed Wins: From Kafka to APIs in Minutes
Speed Wins: From Kafka to APIs in Minutesconfluent
 

Dernier (20)

Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...
 
Strategic AI Integration in Engineering Teams
Strategic AI Integration in Engineering TeamsStrategic AI Integration in Engineering Teams
Strategic AI Integration in Engineering Teams
 
How Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdf
How Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdfHow Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdf
How Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdf
 
Top 10 Symfony Development Companies 2024
Top 10 Symfony Development Companies 2024Top 10 Symfony Development Companies 2024
Top 10 Symfony Development Companies 2024
 
IESVE for Early Stage Design and Planning
IESVE for Early Stage Design and PlanningIESVE for Early Stage Design and Planning
IESVE for Early Stage Design and Planning
 
Structuring Teams and Portfolios for Success
Structuring Teams and Portfolios for SuccessStructuring Teams and Portfolios for Success
Structuring Teams and Portfolios for Success
 
Syngulon - Selection technology May 2024.pdf
Syngulon - Selection technology May 2024.pdfSyngulon - Selection technology May 2024.pdf
Syngulon - Selection technology May 2024.pdf
 
UiPath Test Automation using UiPath Test Suite series, part 2
UiPath Test Automation using UiPath Test Suite series, part 2UiPath Test Automation using UiPath Test Suite series, part 2
UiPath Test Automation using UiPath Test Suite series, part 2
 
ECS 2024 Teams Premium - Pretty Secure
ECS 2024   Teams Premium - Pretty SecureECS 2024   Teams Premium - Pretty Secure
ECS 2024 Teams Premium - Pretty Secure
 
Custom Approval Process: A New Perspective, Pavel Hrbacek & Anindya Halder
Custom Approval Process: A New Perspective, Pavel Hrbacek & Anindya HalderCustom Approval Process: A New Perspective, Pavel Hrbacek & Anindya Halder
Custom Approval Process: A New Perspective, Pavel Hrbacek & Anindya Halder
 
Agentic RAG What it is its types applications and implementation.pdf
Agentic RAG What it is its types applications and implementation.pdfAgentic RAG What it is its types applications and implementation.pdf
Agentic RAG What it is its types applications and implementation.pdf
 
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdfIntroduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf
 
Extensible Python: Robustness through Addition - PyCon 2024
Extensible Python: Robustness through Addition - PyCon 2024Extensible Python: Robustness through Addition - PyCon 2024
Extensible Python: Robustness through Addition - PyCon 2024
 
Intro in Product Management - Коротко про професію продакт менеджера
Intro in Product Management - Коротко про професію продакт менеджераIntro in Product Management - Коротко про професію продакт менеджера
Intro in Product Management - Коротко про професію продакт менеджера
 
Buy Epson EcoTank L3210 Colour Printer Online.pdf
Buy Epson EcoTank L3210 Colour Printer Online.pdfBuy Epson EcoTank L3210 Colour Printer Online.pdf
Buy Epson EcoTank L3210 Colour Printer Online.pdf
 
Connecting the Dots in Product Design at KAYAK
Connecting the Dots in Product Design at KAYAKConnecting the Dots in Product Design at KAYAK
Connecting the Dots in Product Design at KAYAK
 
Integrating Telephony Systems with Salesforce: Insights and Considerations, B...
Integrating Telephony Systems with Salesforce: Insights and Considerations, B...Integrating Telephony Systems with Salesforce: Insights and Considerations, B...
Integrating Telephony Systems with Salesforce: Insights and Considerations, B...
 
Demystifying gRPC in .Net by John Staveley
Demystifying gRPC in .Net by John StaveleyDemystifying gRPC in .Net by John Staveley
Demystifying gRPC in .Net by John Staveley
 
Salesforce Adoption – Metrics, Methods, and Motivation, Antone Kom
Salesforce Adoption – Metrics, Methods, and Motivation, Antone KomSalesforce Adoption – Metrics, Methods, and Motivation, Antone Kom
Salesforce Adoption – Metrics, Methods, and Motivation, Antone Kom
 
Speed Wins: From Kafka to APIs in Minutes
Speed Wins: From Kafka to APIs in MinutesSpeed Wins: From Kafka to APIs in Minutes
Speed Wins: From Kafka to APIs in Minutes
 

Facebook App Development