Post on 01-Sep-2014
description
transcript
Facebook Developer GarageKampala
Charlie CheeverPlatform Engineering, Facebook
Review: A Web Apppretty simple
A Facebook App - What do you Get?
• Authentication for free. Less code for you to write, less work for users to login, a realer concept of identity
• Data about the people who use your app
• names, profile pictures, interests, favorite books, favorite movies
• ... and friends
• Messaging (notifications, requests) -> Distribution
• Convenient widgets. Friend selector, mp3 player, etc.
• You can show ads on your application and keep all those revenues
Some Examples of What’s Being Done with the Facebook Platform
TechCrunch(technology blog)
TechCrunch
TechCrunch
iLike(social music)
Flixster(social movies)
Prolific(games!)
Facebook Platform Technology
•API
•FBML
Facebook API
• Read data from Facebook
• about users, ex. names, profile pictures, favorite books, favorite movies, etc.
• other data like photos, groups, events, etc.
• almost all the data that’s available on Facebook
• Messaging - sending e-mails to users, sending Facebook requests, sending Facebook notifications
• Publishing news feed stories
FBML
• Basically HTML with a few extras
• Sanitary - Safe for Facebook to display anywhere
• Makes it easy to efficiently embed social data
• Provides convenient widgets like friend selectors
How Facebook Apps Work
• Facebook Connect Applications
• FBML Canvas Applications
• IFrame Canvas Applications
• Big Question: How do we efficiently involve a third party when a user loads a webpage?
FBML Canvas Apps
FBML Canvas Apps
IFrame Canvas Apps
IFrame Canvas Apps Using XFBML
IFrame Canvas Apps
Facebook Connect Apps
UserYour Server
1. initial request from user
4. regular response from your server
2. server-side API call to Facebook (optional)
3. server-side API response (optional)
5. JS API Call to Facebook
6. JS API response from Facebook
Facebook Connect Apps
Getting Your Feet WetSome Simple Examples
• http://apps.facebook.com/devgaragekampala/
• A Facebook app that I’ve set up that will let you test out snippets of code and get some experience with the API and FBML
Examples
• http://apps.facebook.com/devgaragekampala/
• Hello, Uganda!
• Hello, Mark Zuckerberg
• Hello friends!
• Pick a friend
• Someone Else’s Code
Setting Up A Real App
• We’ll use a free hosting service called AppJet in this example but you can use any kind of hosting.
• AppJet is a free, web-based hosting service
• Great for prototyping websites with Javascript
• Has built-in Facebook support
Your program
Preview
First Program
Remember this name.
Now we have a real
website
http://www.facebook.com/developers
Remember this Canvas URL
Congratulations! You now have a Facebook application.
Write these keys down
import("facebook");fb.init();print("Hello Kampala!");
Add the following to your app.
Type in your Canvas url
Paste in your API Key and Secret
Clicking Publish will take your
application live
Web Resources
• FB Developers Wiki: http://wiki.developers.facebook.com/
• API Test Console: http://developers.facebook.com/tools.php?api
• FBML Test Console: http://developers.facebook.com/tools.php?fbml
• AppJet (free, easy hosting): http://www.appjet.com/
• FB Developer App (for setting up an app): http://www.facebook.com/developers/
• Facebook Developer Site: http://developers.facebook.com/