Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Developer Garage Milan
Main Topic: Facebook Connect
April 23, 2009
James Leszczenski

 Software Engineer at
Facebook

 james@facebook.com
Agenda
▪ 1. Our Mission
▪ 2. Facebook Connect, An Overview
▪ 3. Getting Started
▪ 4. What’s Next?
▪ 5. Questions
Facebook’s Mission:
Give people the power to
share and make the world
more open and connected
Your Mission:
Create opportunities for
people to share and make the
world more open and connected
What are your goals?
1) Build Traffic
2) Create Deep Engagement
3) Profit Wildly
How can Facebook Connect help?
1) Build Traffic through social distribution
2) Create Deep Engagement with identity and so...
Agenda
▪ 1. Our Mission
▪ 2. Facebook Connect, An Overview
▪ 3. Getting Started
▪ 4. What’s Next?
▪ 5. Questions
Overview of Facebook Connect
Engaging with a new site is difficult
• Decide to register
• Click “sign up”
• Decide on the basics: Which
email will I us...
Facebook Connect
Increase registration, engagement and traffic on your site.
• Share their identity and log
in with 1 clic...
Facebook Connect makes it easy for your users
•Decide to register
•Click “Connect”
•Done
A Connected user brings all of th...
Users share content back to Facebook
Content from your site gets shared to Facebook. Traffic comes back to your site.
3. C...
Over 8,000 web sites
have adopted Facebook Connect
Connect is revolutionizing the web
“It is an ingenious stab at solving ...
Agenda
▪ 1. Our Mission
▪ 2. Facebook Connect, An Overview
▪ 3. Getting Started
▪ 4. What’s Next?
▪ 5. Questions
Getting Started
Objectives
▪ Main Objective: Integrate Facebook Connect into a web site
▪ 1. Register a new application with Facebook.
▪ 2...
Objectives
▪ Main Objective: Integrate Facebook Connect into a web site
▪ 1. Register a new application with Facebook.
▪ 2...
Setting Up your Application
▪ 1. Go to http://www.facebook.com/developers/
▪ 2. Click “Set Up New Application”
▪ 3. Choose...
Setting Up your Application (2)
▪ 1. Download a cross-domain receiver file
▪ Ex. http://www.somethingtoputhere.com/xd_recei...
Setting Up your Application (3)
▪ 5. Insert a few lines just before the </BODY> tag:
<script type="text/javascript" src="h...
Objectives
▪ Main Objective: Integrate Facebook Connect into a web site
▪ 1. Register a new application with Facebook.
▪ 2...
Login Status
▪ 1. Include a Facebook Connect login button:
▪ <p>
Click here to connect with Facebook:
<fb:login-button onl...
Login Status (2)
▪ 2. Create the facebook_onlogin() function in JavaScript:
<script>
function facebook_onlogin() {
alert(F...
Login Status (3)
▪ 3. Simpler: Detecting status upon page load:
<script type="text/javascript">
FB.init("YOUR_API_KEY_HERE...
Objectives
▪ Main Objective: Integrate Facebook Connect into a web site
▪ 1. Register a new application with Facebook.
▪ 2...
XFBML
▪ 1. Insert XFBML with facebook_onlogin():
function facebook_onlogin() {
fbuid = FB.Facebook.apiClient.get_session()...
XFBML (2)
▪ 2. What to do when the user logs out:
function facebook_onlogout() {
us = document.getElementById('user_sectio...
Objectives
▪ Main Objective: Integrate Facebook Connect into a web site
▪ 1. Register a new application with Facebook.
▪ 2...
Feed Forms
• User-editable comment
field
• Comment can be pre-
filled by application with
user content
• User comment will b...
Feed Forms (2)
• 1. Go to http://developers.facebook.com/
• 2. Click Tools in the top navigation.
• 3. Click the Feed Temp...
Feed Forms (3)
// Initialize feed form data
var body_general = null;
var user_message_prompt = "How was the restaurant?";
...
Objectives
▪ Main Objective: Integrate Facebook Connect into a web site
▪ 1. Register a new application with Facebook.
▪ 2...
Objectives
▪ Main Objective: Integrate Facebook Connect into a web site
▪ 1. Register a new application with Facebook.
▪ 2...
Agenda
▪ 1. Our Mission
▪ 2. Facebook Connect, An Overview
▪ 3. Getting Started
▪ 4. What’s Next?
▪ 5. Questions
What’s Next?
1) Integrate

 Check out our video tutorials: wiki.developers.facebook.com
2) Innovate
3) Iterate and Grow

 ...
Agenda
▪ 1. Our Mission
▪ 2. Facebook Connect, An Overview
▪ 3. Getting Started
▪ 4. What’s Next?
▪ 5. Questions
Resources
Documentation: wiki.developers.facebook.com
Help: forum.developers.facebook.com
James Leszczenski

 james@facebo...
Upcoming SlideShare
Loading in …5
×

Facebook Developer Garage Milan

6,089 views

Published on

Presentation by James Leszczenski at Facebook Developer Garage Milan, on 23 April 2009, hosted by Mikamai.

Published in: Technology, Business

Facebook Developer Garage Milan

  1. 1. Developer Garage Milan Main Topic: Facebook Connect April 23, 2009
  2. 2. James Leszczenski Software Engineer at Facebook james@facebook.com
  3. 3. Agenda ▪ 1. Our Mission ▪ 2. Facebook Connect, An Overview ▪ 3. Getting Started ▪ 4. What’s Next? ▪ 5. Questions
  4. 4. Facebook’s Mission: Give people the power to share and make the world more open and connected
  5. 5. Your Mission: Create opportunities for people to share and make the world more open and connected
  6. 6. What are your goals? 1) Build Traffic 2) Create Deep Engagement 3) Profit Wildly
  7. 7. How can Facebook Connect help? 1) Build Traffic through social distribution 2) Create Deep Engagement with identity and social context 3) Profit Wildly with more traffic and engagement
  8. 8. Agenda ▪ 1. Our Mission ▪ 2. Facebook Connect, An Overview ▪ 3. Getting Started ▪ 4. What’s Next? ▪ 5. Questions
  9. 9. Overview of Facebook Connect
  10. 10. Engaging with a new site is difficult • Decide to register • Click “sign up” • Decide on the basics: Which email will I use? The usual password? User name? • Add extra info: Birthday Name etc… • Enter a CAPTCHA • Confirm • Get sent to verify email page • Wait • Go back in your email, verify email • Go back to browser • And… Think of the steps users need to go through to sign up & engage with your content. … the end result is a website with no social data, no customization, and no friends  10
  11. 11. Facebook Connect Increase registration, engagement and traffic on your site. • Share their identity and log in with 1 click • Bring their friends to your site, increasing engagement • Generate more traffic by distributing your content to Facebook’s 200 million users Identity & Login Friends Distribution Facebook Connect allows your visitors to: 11
  12. 12. Facebook Connect makes it easy for your users •Decide to register •Click “Connect” •Done A Connected user brings all of their rich Facebook information and friends to your site in 1 click. … a website with your real-life identity, customized content and all your friends. 1. User’s real identity 12 2. Easy access to their friends and friend content
  13. 13. Users share content back to Facebook Content from your site gets shared to Facebook. Traffic comes back to your site. 3. Content from your site is easily distributed on Facebook, sending traffic back to your site. 13
  14. 14. Over 8,000 web sites have adopted Facebook Connect Connect is revolutionizing the web “It is an ingenious stab at solving several nagging problems at once. Web surfers like to socialize while they browse the internet, but many prefer to do so only with their friends rather than with perfect strangers.” - Dec 4, 2008 “Because Facebook Connect is not just a registration system, but also a marketing channel with a built-in audience of 130 million monthly active users, this program will crush competing registration systems.” - Nov 30, 2008 What sites are seeing: • Registrations 30-100% • User-generated content 15-60% • Each story published to FB generates 0.5 to 2 clicks back to the publishing site “Supporters of this idea say such programs will help with the emergence of a new ‘social Web,’ because chatter among friends will infiltrate even sites that have been entirely unsociable thus far.” - Nov 30, 2008 14
  15. 15. Agenda ▪ 1. Our Mission ▪ 2. Facebook Connect, An Overview ▪ 3. Getting Started ▪ 4. What’s Next? ▪ 5. Questions
  16. 16. Getting Started
  17. 17. Objectives ▪ Main Objective: Integrate Facebook Connect into a web site ▪ 1. Register a new application with Facebook. ▪ 2. Detect the login status of a user. ▪ 3. Use XFBML/API calls to show user information. ▪ 4. Publish actions to the Stream/News Feed. ▪ 5. More advanced features.
  18. 18. Objectives ▪ Main Objective: Integrate Facebook Connect into a web site ▪ 1. Register a new application with Facebook. ▪ 2. Detect the login status of a user. ▪ 3. Use XFBML/API calls to show user information. ▪ 4. Publish actions to the Stream/News Feed. ▪ 5. More advanced features.
  19. 19. Setting Up your Application ▪ 1. Go to http://www.facebook.com/developers/ ▪ 2. Click “Set Up New Application” ▪ 3. Choose an Application Name, agree to Terms of Service, submit. ▪ 4. Go to the ‘Connect’ tab and fill in ‘Connect URL’ and ‘Base Domain’ ▪ 5. Submit the form. You now have a new application!
  20. 20. Setting Up your Application (2) ▪ 1. Download a cross-domain receiver file ▪ Ex. http://www.somethingtoputhere.com/xd_receiver.htm ▪ 2. Upload xd_receiver.htm to your directory. ▪ 3. Open up the web page for development. ▪ 4. Change the <html> tag to: ▪ <html xmlns:fb="http://www.facebook.com/2008/fbml">
  21. 21. Setting Up your Application (3) ▪ 5. Insert a few lines just before the </BODY> tag: <script type="text/javascript" src="http:// static.ak.connect.facebook.com/js/api_lib/v0.4/ FeatureLoader.js.php"></script> <script type="text/javascript"> FB.init("YOUR_API_KEY_HERE", "xd_receiver.htm"); </script> ▪ 6. And save your file.
  22. 22. Objectives ▪ Main Objective: Integrate Facebook Connect into a web site ▪ 1. Register a new application with Facebook. ▪ 2. Detect the login status of a user. (Identity) ▪ 3. Use XFBML/API calls to show user information. ▪ 4. Publish actions to the Stream/News Feed. ▪ 5. More advanced features
  23. 23. Login Status ▪ 1. Include a Facebook Connect login button: ▪ <p> Click here to connect with Facebook: <fb:login-button onlogin="facebook_onlogin()"> </fb:login-button> </p> ▪ 2. Side note: What is FBML/XFBML?
  24. 24. Login Status (2) ▪ 2. Create the facebook_onlogin() function in JavaScript: <script> function facebook_onlogin() { alert(FB.Connect.get_loggedInUser()); } </script>
  25. 25. Login Status (3) ▪ 3. Simpler: Detecting status upon page load: <script type="text/javascript"> FB.init("YOUR_API_KEY_HERE", "xd_receiver.htm", {"ifUserConnected" : facebook_onlogin} ); </script>
  26. 26. Objectives ▪ Main Objective: Integrate Facebook Connect into a web site ▪ 1. Register a new application with Facebook. ▪ 2. Detect the login status of a user. (Identity) ▪ 3. Use XFBML/API calls to show user information. (Friends) ▪ 4. Publish actions to the Stream/News Feed. ▪ 5. More advanced features.
  27. 27. XFBML ▪ 1. Insert XFBML with facebook_onlogin(): function facebook_onlogin() { fbuid = FB.Facebook.apiClient.get_session().uid; us = document.getElementById('user_section'); us.innerHTML = ‘<fb:profile-pic uid="’+fbuid+’">’ + ‘</fb:profile-pic>’ + ‘<fb:name uid="loggedinuser"></fb:name>’ + ‘has connected with Facebook.’ + ’<br/>’ + ’To log out: <a href="#" onclick="FB.Connect.logout(facebook_onlogout)">Click here</a>'; FB.XFBML.Host.parseDomTree(); // Finds all XFBML tags and re-renders HTML }
  28. 28. XFBML (2) ▪ 2. What to do when the user logs out: function facebook_onlogout() { us = document.getElementById('user_section'); // Reset back to the default state us.innerHTML = 'To log in with Facebook: <fb:login-button onlogin="facebook_onlogin()"></fb:login-button>'; FB.XFBML.Host.parseDomTree(); }
  29. 29. Objectives ▪ Main Objective: Integrate Facebook Connect into a web site ▪ 1. Register a new application with Facebook. ▪ 2. Detect the login status of a user. (Identity) ▪ 3. Use XFBML/API calls to show user information. (Friends) ▪ 4. Publish actions to the Stream/News Feed. (Distribution) ▪ 5. More advanced features.
  30. 30. Feed Forms • User-editable comment field • Comment can be pre- filled by application with user content • User comment will be returned to application
  31. 31. Feed Forms (2) • 1. Go to http://developers.facebook.com/ • 2. Click Tools in the top navigation. • 3. Click the Feed Template Console tab. • 4. Choose your new application from the list and click Next. • 5. Fill out a One Line Template + Short Story Template Title. • e.g. “{*actor*} reviewed a restaurant on Citysearch.” • 6. Submit your template, and get a template ID.
  32. 32. Feed Forms (3) // Initialize feed form data var body_general = null; var user_message_prompt = "How was the restaurant?"; var user_message = {value: "The restaurant was..."}; FB.ensureInit(function() { // Show the feed form to the user FB.Connect.showFeedDialog(<?=FEED_FORM_ID?>, template_data, null, body_general, null, FB.RequireConnect.require, FB.RequireConnect.promptConnect, user_message_prompt, user_message); });
  33. 33. Objectives ▪ Main Objective: Integrate Facebook Connect into a web site ▪ 1. Register a new application with Facebook. ▪ 2. Detect the login status of a user. (Identity) ▪ 3. Use XFBML/API calls to show user information. (Friends) ▪ 4. Publish actions to the Stream/News Feed. (Distribution) ▪ 5. More advanced features.
  34. 34. Objectives ▪ Main Objective: Integrate Facebook Connect into a web site ▪ 1. Register a new application with Facebook. ▪ 2. Detect the login status of a user. (Identity) ▪ 3. Use XFBML/API calls to show user information. (Friends) ▪ 4. Publish actions to the Stream/News Feed. (Distribution) ▪ 5. More advanced features. ▪ Integration points on facebook.com ▪ Add server-side logic ▪ Anything that Facebook Platform can do.
  35. 35. Agenda ▪ 1. Our Mission ▪ 2. Facebook Connect, An Overview ▪ 3. Getting Started ▪ 4. What’s Next? ▪ 5. Questions
  36. 36. What’s Next? 1) Integrate Check out our video tutorials: wiki.developers.facebook.com 2) Innovate 3) Iterate and Grow <fb:comments>, <fb:intl>
  37. 37. Agenda ▪ 1. Our Mission ▪ 2. Facebook Connect, An Overview ▪ 3. Getting Started ▪ 4. What’s Next? ▪ 5. Questions
  38. 38. Resources Documentation: wiki.developers.facebook.com Help: forum.developers.facebook.com James Leszczenski james@facebook.com

×