19

Make your site more social with Facebook Connect

Embed Size (px)

Citation preview

Page 1: Make your site more social with Facebook Connect
Page 2: Make your site more social with Facebook Connect
Page 3: Make your site more social with Facebook Connect

FB Connect in under 15Make your site social in 15 minutes or less ;-)

Emmanuel PozoTwitter @JewgonewildCo Founder at Pikchur.com05.30.2009

Page 4: Make your site more social with Facebook Connect

1 Intro and Stats

2 What is FB Connect

3 How it’s done

4 Demo

5 Thoughts, Questions

I can haz Agenda?

Page 5: Make your site more social with Facebook Connect

1.Introandstats.

Page 6: Make your site more social with Facebook Connect

Intro and StatsWe don’t like this!

Page 7: Make your site more social with Facebook Connect

Intro and StatsSolutions

Page 8: Make your site more social with Facebook Connect

Intro and Stats

▪ Released on December 4th 2008▪ 1 million + users and growing▪ Average large connect site has 2,500 - 8,000 users

▪ Few applications with tens of thousands & iPhoto is the only app with hundreds of thousands of users

▪ FB Connect is the leading identity platform

FB Connect Usage Stats

Page 9: Make your site more social with Facebook Connect

2.WhatisFBConnect?

Page 10: Make your site more social with Facebook Connect

What is FB Connect?

▪ Single sign on service▪ Seamlessly connect user’s Facebook account to your site

▪ Keeps the experience social ▪ Enables easy sharing experience

FB Connect.. ha?

Page 11: Make your site more social with Facebook Connect

What is FB Connect?Interaction.

Page 12: Make your site more social with Facebook Connect

What is FB Connect?Typical web view.

Page 13: Make your site more social with Facebook Connect

3.Howit’sdone!

Page 14: Make your site more social with Facebook Connect

How it’s done

▪ Download API wrapper classes ▪ Create an app (http://www.facebook.com/developers/createapp.php)

▪ Go to Connect tab & set Connect URL▪ Base Domain (optional for subdomain access)

▪ Grab your app’s API key. You’ll need it

Step 1

Page 15: Make your site more social with Facebook Connect

How it’s done

▪ Create cross domain communication channel file.

▪ xd_receiver.htm with the following JS

▪ Place it in your apps root or wherever you want to serve the connect pages.

Step 2

Page 16: Make your site more social with Facebook Connect

How it’s done

▪ Initialize FB connect libraries via JS▪ <script type=”texgfjdhgjgdfgggggggggggggggggggggggggggg

▪ <script type=”text/javascript”>FB.Bootstrap.requireFeatures([“Connect”],”

▪ Call the connect login dialogue▪ function fbLogin() {FB.Connect.requireSession(function() { window.location.href = '/oauth/index/facebook'; }); return false;}

Step 3

Page 17: Make your site more social with Facebook Connect

How it’s done

▪ Easy part is over▪ Get to work!▪ Take full advantage of the FB API.▪ Pull in users friends,statuses,photos etc.

Step 4

Page 18: Make your site more social with Facebook Connect

4.Demonstration.

Page 19: Make your site more social with Facebook Connect

5.Questionscomments.Via Twitter @jewgonewild your question #FBMIA