Facebook Developer Garage Milan

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) Proﬁt Wildly

How can Facebook Connect help?
1) Build Traffic through social distribution
2) Create Deep Engagement with identity and social
context
3) Proﬁt Wildly with more traffic and engagement

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
• Conﬁrm
• 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

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

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

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

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 inﬁltrate even sites
that have been entirely unsociable
thus far.”
- Nov 30, 2008
14

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.

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 ﬁll in ‘Connect URL’ and ‘Base
Domain’
▪ 5. Submit the form. You now have a new application!

Setting Up your Application (2)
▪ 1. Download a cross-domain receiver ﬁle
▪ 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">

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 ﬁle.

Objectives
▪ 2. Detect the login status of a user. (Identity)
▪ 3. Use XFBML/API calls to show user information.
▪ 5. More advanced features

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?

Login Status (2)
▪ 2. Create the facebook_onlogin() function in JavaScript:
<script>
function facebook_onlogin() {
alert(FB.Connect.get_loggedInUser());
}
</script>

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>

Objectives
▪ 3. Use XFBML/API calls to show user information. (Friends)

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
}

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();
}

Objectives
▪ 4. Publish actions to the Stream/News Feed. (Distribution)

Feed Forms
• User-editable comment
ﬁeld
• Comment can be pre-
ﬁlled by application with
user content
• User comment will be
returned to application

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.

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);
});

Objectives
▪ 4. Publish actions to the Stream/News Feed. (Distribution)
▪ Integration points on facebook.com
▪ Add server-side logic
▪ Anything that Facebook Platform can do.

What’s Next?
1) Integrate

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

<fb:comments>, <fb:intl>

Resources
Documentation: wiki.developers.facebook.com
Help: forum.developers.facebook.com
James Leszczenski

james@facebook.com

Facebook Developer Garage Milan

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (15)

Similaire à Facebook Developer Garage Milan

Similaire à Facebook Developer Garage Milan (20)

Dernier

Dernier (20)

Facebook Developer Garage Milan

Notes de l'éditeur