Facebook Connect in 3 Hours

Facebook Connect in 3 Hours

by Ryan Merket / ryanmerket.com

February 24th, 2010

Credit: Flickr user ‘stuckinpublic’

About me

I wear a lot of hats

I used to work at Facebook

Co-founded Ping.fm

Credit: Flickr user ‘09traveler’

About me

I grew up in Texas

Credit: Flickr user ‘laanba’

But now live in Oakland, CA

Credit: Flickr user ‘codydildy

Ground Rules

Ask a question at anytime (it’s a workshop)

or send questions to @merket on Twitter

Credit: Flickr user ‘laughingsquid’

Our Agenda

Credit: Flickr user ‘gats’

1. Why Facebook Connect?

2. Back to the basics

3. What can I do with it?

4. Great. How do I get started?

5. We’re doin’ it live!

6. Go from good to great

Why Facebook Connect?

Credit: Flickr user ‘jshappel’

400 million monthly active users

Credit: Flickr user ‘nathaninsandiego’

Larger than Brazil

60 million Connect users

83% people trust their friends over any other source.

Credit: Flickr user ‘spamily’

Credit: Flickr user ‘olivia townsend’

Identity

First nameLast nameGenderEmail

Date of BirthCity

ZipcodeCountry

Sexual statusAbout me

StreamPosts

PhotosInbox

ActivitiesBooks

HometownEmployerUniversity

High SchoolInterestsMoviesMusic

Profile photoPoliticalFamily

ReligionSignificant Other

TV


Identity

First nameLast nameGenderEmail

Date of BirthCity

ZipcodeCountry

Sexual statusAbout me

StreamPosts

PhotosInbox

ActivitiesBooks

HometownEmployerUniversity

High SchoolInterestsMoviesMusic

Profile photoPoliticalFamily

ReligionSignificant Other

TV


Identity

Credit: Flickr user ‘FLC’

Social graph

MOM DAD

BOSS WIFE

GF FromHigh School

Ex-BOSS

Stream• Stories• Comments• Photos• Post to stream• Events• Notes... and more

Stream• Stories• Comments• Photos• Post to stream• Events• Notes... and more

Stream

Basics of Facebook Connect

Credit: Flickr user ‘laughingsquid’ - Facebook wall art

1. Authentication

2. Permissions

3. Sharing

4. Privacy

1. Authentication


1. Authentication


1. Authentication


1. Authentication


Facebook users = Your users

2. Permissions

Credit: Facebook Developers Wiki - More info: http://wiki.developers.facebook.com/index.php/Extended_permissions

http://wiki.developers.facebook.com/index.php/Extended_permissions


2. Permissions




2. Permissions




2. Permissions




2. Permissions




2. Permissions




2. Permissions




2. Permissions




2. Permissions




2. Permissions




2. Permissions




2. Permissions


• publish_stream



2. Permissions


• publish_stream• read_stream



2. Permissions


• publish_stream• read_stream• email



2. Permissions


• publish_stream• read_stream• email• read_mailbox



2. Permissions


• publish_stream• read_stream• email• read_mailbox• offline_access



2. Permissions


• publish_stream• read_stream• email• read_mailbox• offline_access• create_event



2. Permissions


• publish_stream• read_stream• email• read_mailbox• offline_access• create_event• rsvp_event



2. Permissions


• publish_stream• read_stream• email• read_mailbox• offline_access• create_event• rsvp_event• sms



3. Sharing

Credit: Mock up

4. Privacy

4. Privacy

With great power comesgreater responsibility

4. Privacy


Respect users’ privacy settings.

4. Privacy


Respect users’ privacy settings.Never show old data.

4. Privacy


Respect users’ privacy settings.Never show old data.

Don’t surprise the user.

Sweet. But what can I do with it?

Credit: Flickr user ‘mikebehnken’

Make it easy and obvious


What not to do


Am I supposed to click those?



VIP?

Show them why

Credit: Flickr user ‘Ben Terrett’

Lower the hurdle

Credit: Flickr user ‘San Diego Shooter’

Social context

Credit: Flickr user ‘Ben Terrett’

Permissions

Credit: Flickr user ‘elphs rule’

Respect privacy

Credit: Flickr user ‘ex.libris’

Use the pre-built tools

Credit: Flickr user ‘spunquee’

Great. How do I get started?

Credit: Flickr user ‘spunquee’

http://facebook.com/developers



Setting up your server

Your server will need to be able to send and receive data from api.facebook.com

You will need to create a tunnel for local development

The basics

The basics

Initializing the XML namespace


<fb:login-button></fb:login-button>


<fb:login-button></fb:login-button>

<fb-profile-pic></fb:profile-pic>

The basics

The basics

The basics

The basics

The basics

The basics

Cross domain receiver fileFilename: xd_receiver.htmRoot of your Connect URL (from application settings)

“We’re doin’ it live!”

Credit: Flickr user ‘breff’

How to go from good to great.

Credit: Flickr user ‘ciordia’

Increase connected users


Results: Huffington Post’s referral traffic from FB has increased >300%since they implemented registration and called it out.

Why should they Connect?Credit: Flickr user ‘ciordia’

NFO - News Feed Optimization




“NFO is the new SEO” Justin Smith, Inside Facebook





JibJab.com



JibJab.com Plancast.com



JibJab.com Plancast.com Thread.com




NBC.com




NBC.com CBS.com




NBC.com CBS.com TV.com.com

What you should be tracking

• Measure feed story prompts (publish vs cancel)• Split test images, copy, and action links









LPO - Landing Page Optimization

Credit: Flickr user ‘fivesensescoffee’




Tools

Credit: Flickr user ‘Amigo! Photography’

Tools

http://developers.facebook.com/setup.php

Facebook Connect Wizard



Tools

http://developers.facebook.com/tools.php

API Test Console



Tools

http://developers.facebook.com/tools.php?connect_wizard

Facebook Connect Playground



Tools

http://www.facebook.com/facebook-widgets/

Facebook Widgets



Links

http://ryanmerket.com/connectdocs/

One Page by Shuffle Interactive

http://wiki.developers.facebook.com/index.php/Facebook_Connect

Facebook Developers Wiki

http://www.facebook.com/advertising/?connect

Facebook Connect Marketing Portal







That’s it!

Questions?

Slides will be on slideshare.net/ryanmerket

Documents

Facebook Connect in 3 Hours