SlideShare una empresa de Scribd logo
1 de 68
Descargar para leer sin conexión
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...?

Más contenido relacionado

Similar a 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
 

Similar a 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
 

Último

ERP Contender Series: Acumatica vs. Sage Intacct
ERP Contender Series: Acumatica vs. Sage IntacctERP Contender Series: Acumatica vs. Sage Intacct
ERP Contender Series: Acumatica vs. Sage IntacctBrainSell Technologies
 
How we scaled to 80K users by doing nothing!.pdf
How we scaled to 80K users by doing nothing!.pdfHow we scaled to 80K users by doing nothing!.pdf
How we scaled to 80K users by doing nothing!.pdfSrushith Repakula
 
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...FIDO Alliance
 
Oauth 2.0 Introduction and Flows with MuleSoft
Oauth 2.0 Introduction and Flows with MuleSoftOauth 2.0 Introduction and Flows with MuleSoft
Oauth 2.0 Introduction and Flows with MuleSoftshyamraj55
 
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
 
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
 
AI presentation and introduction - Retrieval Augmented Generation RAG 101
AI presentation and introduction - Retrieval Augmented Generation RAG 101AI presentation and introduction - Retrieval Augmented Generation RAG 101
AI presentation and introduction - Retrieval Augmented Generation RAG 101vincent683379
 
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
 
Enterprise Knowledge Graphs - Data Summit 2024
Enterprise Knowledge Graphs - Data Summit 2024Enterprise Knowledge Graphs - Data Summit 2024
Enterprise Knowledge Graphs - Data Summit 2024Enterprise Knowledge
 
Continuing Bonds Through AI: A Hermeneutic Reflection on Thanabots
Continuing Bonds Through AI: A Hermeneutic Reflection on ThanabotsContinuing Bonds Through AI: A Hermeneutic Reflection on Thanabots
Continuing Bonds Through AI: A Hermeneutic Reflection on ThanabotsLeah Henrickson
 
Powerful Start- the Key to Project Success, Barbara Laskowska
Powerful Start- the Key to Project Success, Barbara LaskowskaPowerful Start- the Key to Project Success, Barbara Laskowska
Powerful Start- the Key to Project Success, Barbara LaskowskaCzechDreamin
 
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
 
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
 
WSO2CONMay2024OpenSourceConferenceDebrief.pptx
WSO2CONMay2024OpenSourceConferenceDebrief.pptxWSO2CONMay2024OpenSourceConferenceDebrief.pptx
WSO2CONMay2024OpenSourceConferenceDebrief.pptxJennifer Lim
 
TopCryptoSupers 12thReport OrionX May2024
TopCryptoSupers 12thReport OrionX May2024TopCryptoSupers 12thReport OrionX May2024
TopCryptoSupers 12thReport OrionX May2024Stephen Perrenod
 
WebAssembly is Key to Better LLM Performance
WebAssembly is Key to Better LLM PerformanceWebAssembly is Key to Better LLM Performance
WebAssembly is Key to Better LLM PerformanceSamy Fodil
 
Long journey of Ruby Standard library at RubyKaigi 2024
Long journey of Ruby Standard library at RubyKaigi 2024Long journey of Ruby Standard library at RubyKaigi 2024
Long journey of Ruby Standard library at RubyKaigi 2024Hiroshi SHIBATA
 
1111 ChatGPT Prompts PDF Free Download - Prompts for ChatGPT
1111 ChatGPT Prompts PDF Free Download - Prompts for ChatGPT1111 ChatGPT Prompts PDF Free Download - Prompts for ChatGPT
1111 ChatGPT Prompts PDF Free Download - Prompts for ChatGPTiSEO AI
 

Último (20)

ERP Contender Series: Acumatica vs. Sage Intacct
ERP Contender Series: Acumatica vs. Sage IntacctERP Contender Series: Acumatica vs. Sage Intacct
ERP Contender Series: Acumatica vs. Sage Intacct
 
How we scaled to 80K users by doing nothing!.pdf
How we scaled to 80K users by doing nothing!.pdfHow we scaled to 80K users by doing nothing!.pdf
How we scaled to 80K users by doing nothing!.pdf
 
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...
 
Oauth 2.0 Introduction and Flows with MuleSoft
Oauth 2.0 Introduction and Flows with MuleSoftOauth 2.0 Introduction and Flows with MuleSoft
Oauth 2.0 Introduction and Flows with MuleSoft
 
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...
 
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
 
AI presentation and introduction - Retrieval Augmented Generation RAG 101
AI presentation and introduction - Retrieval Augmented Generation RAG 101AI presentation and introduction - Retrieval Augmented Generation RAG 101
AI presentation and introduction - Retrieval Augmented Generation RAG 101
 
ECS 2024 Teams Premium - Pretty Secure
ECS 2024   Teams Premium - Pretty SecureECS 2024   Teams Premium - Pretty Secure
ECS 2024 Teams Premium - Pretty Secure
 
Overview of Hyperledger Foundation
Overview of Hyperledger FoundationOverview of Hyperledger Foundation
Overview of Hyperledger Foundation
 
Enterprise Knowledge Graphs - Data Summit 2024
Enterprise Knowledge Graphs - Data Summit 2024Enterprise Knowledge Graphs - Data Summit 2024
Enterprise Knowledge Graphs - Data Summit 2024
 
Continuing Bonds Through AI: A Hermeneutic Reflection on Thanabots
Continuing Bonds Through AI: A Hermeneutic Reflection on ThanabotsContinuing Bonds Through AI: A Hermeneutic Reflection on Thanabots
Continuing Bonds Through AI: A Hermeneutic Reflection on Thanabots
 
Powerful Start- the Key to Project Success, Barbara Laskowska
Powerful Start- the Key to Project Success, Barbara LaskowskaPowerful Start- the Key to Project Success, Barbara Laskowska
Powerful Start- the Key to Project Success, Barbara Laskowska
 
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
 
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
 
WSO2CONMay2024OpenSourceConferenceDebrief.pptx
WSO2CONMay2024OpenSourceConferenceDebrief.pptxWSO2CONMay2024OpenSourceConferenceDebrief.pptx
WSO2CONMay2024OpenSourceConferenceDebrief.pptx
 
TopCryptoSupers 12thReport OrionX May2024
TopCryptoSupers 12thReport OrionX May2024TopCryptoSupers 12thReport OrionX May2024
TopCryptoSupers 12thReport OrionX May2024
 
WebAssembly is Key to Better LLM Performance
WebAssembly is Key to Better LLM PerformanceWebAssembly is Key to Better LLM Performance
WebAssembly is Key to Better LLM Performance
 
Long journey of Ruby Standard library at RubyKaigi 2024
Long journey of Ruby Standard library at RubyKaigi 2024Long journey of Ruby Standard library at RubyKaigi 2024
Long journey of Ruby Standard library at RubyKaigi 2024
 
1111 ChatGPT Prompts PDF Free Download - Prompts for ChatGPT
1111 ChatGPT Prompts PDF Free Download - Prompts for ChatGPT1111 ChatGPT Prompts PDF Free Download - Prompts for ChatGPT
1111 ChatGPT Prompts PDF Free Download - Prompts for ChatGPT
 

Facebook App Development