Facebook Connect in 3 Hours

transcript

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

Identity

First nameLast nameGenderEmail

Date of BirthCity

ZipcodeCountry

Sexual statusAbout me

StreamPosts

PhotosInbox

ActivitiesBooks

HometownEmployerUniversity

High SchoolInterestsMoviesMusic

Profile photoPoliticalFamily

ReligionSignificant Other

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

Basics of Facebook Connect

Credit: Flickr user ‘laughingsquid’ - Facebook wall art

1. Authentication

2. Permissions

3. Sharing

4. Privacy

1. Authentication

Facebook users = Your users

2. Permissions

Credit: Facebook Developers Wiki - More info: http://wiki.developers.facebook.com/index.php/Extended_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

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?

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

Initializing the XML namespace

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

Initializing the XML namespace

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

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

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’

Credit: Flickr user ‘Amigo! Photography’

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

Facebook Connect Wizard

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

API Test Console

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

Facebook Connect Playground

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

Facebook Widgets

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

Facebook Connect in 3 Hours

Documents