facebook connect integration

Facebook ConnectFuture Universal Login?

Getting tired in form registration?

One Time Registration for All Sites

A Universal Identity

Open ID

MySpace ID

Google ID

Facebook Connect

Who will become the winner?

What Exactly is FB Connect?

• Integrate Facebook Platform to your site.

• Seamlessly "connect" users’ Facebook account and information with your site.

• Connect and find users’ friends who also use your site.

• Share information and actions on your site with users’ friends on Facebook.

User

Your Site

Facebook

1. User request

2. Y

our S

ite’s A

PI re

ques

t

4. Your Site’s response

3. A

PI cal

lbac

k fro

m F

aceb

ook

5. JS API call to Facebook

6. JS API response from

Facebook

What Can We Get From FB Connect?

• FB Connect is in coherence with FB privacy.

• FB Connect use the same FB API that previously used by FB applications.

• Publish to FB status feed, giving viral effect.

• Comment integration. (http://developers.facebook.com/news.php?blog=1&story=198)

• Photo Sharing. Currently used for iLife’09. (http://developers.facebook.com/news.php?blog=1&story=188)

What Can We Get From FB Connect?

• External sites may retrieve these data:– User’s avatar, full name, user’s friends who are

also connected.– Invitation to user’s friends.– User’s photos, events, groups.– Comment box.

• External sites may not retrieve these data:– User’s detailed demographic.– User’s email address.

FB Connect with Sites

• There are several plugins for CMS:– Movable Type (

http://plugins.movabletype.org/facebook-connect-commenters/) – Wordpress (http://www.sociable.es/facebook-connect/) – Drupal – on development (http://www.drupalforfacebook.org/ )

– Joomla (

http://www.cmsmarket.com/extensions-directory/listings/Social+Networking/Community/JFBConnect)

– MediaWiki (http://wiki.developers.facebook.com/index.php/Facebook_Connect_Plugin_for_MediaWiki)

– VBulletin (http://www.vbulletin.org/forum/showthread.php?t=198499)

FB Connect with Widgets

• There are several social media apps that utilize FB Connect:– JS-Kit (

http://blog.js-kit.com/2008/12/16/js-kit-wraps-up-the-year-with-killer-new-features/)

– Disqus (http://blog.disqus.net/2008/12/16/disqus-and-facebook-connect/)

• Widget developer for 3rd party sites may not contact Facebook directly.

• Flex AS3 class for FB Connect – on development (http://github.com/pierot/fbflashbridge/tree/master)

Setting Up - Facebook

http://developers.facebook.com/

Setting Up - Facebook

Setting Up – Server Files

• Cross domain policy file (xd_receiver.htm)<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0

Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" ><body><script

src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/XdCommReceiver.js" type="text/javascript"></script>

</body></html>


• File to connect to Facebook (for ex: index.php)– Header:

<html xmlns:fb="http://www.facebook.com/2008/fbml" xmlns:fb="http://www.facebook.com/2008/fbml">

– Footer:<script src='http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php' type='text/javascript'></script> <script type='text/javascript'> FB_RequireFeatures(["XFBML"], function(){FB.Facebook.init(“API Key", “[domain]/xd_receiver.htm");});</script>


• In index.php, you can write any XFBML tags (Facebook Markup Language for external sites).

• More info: http://wiki.developers.facebook.com/index.php/XFBML

• Demo:http://media-ide.bajingloncat.com/testfacebookconnect/

test.php

Facebook Connect Installation for Wordpress

How To?

• Download Sociable latest version plugin. (http://www.e-aula.com/download/fbconnect_1_2_1.zip)

• Copy to your /wp-content/plugins.• Activate plugin.• Facebook Connector setting.• Register a Facebook Developer

account. (http://www.facebook.com/developers/)

Setting Up

Theming

• Copy all these files from /wp-content/plugins/fbconnect to your theme files, ex: /wp-content/themes/[your theme]/– myhome.php– userprofile.php– usercomments.php– fbconnect_widget.php– community.php– invitefriends.php– fbconnect.css

• CSS and XHTML them up!!

myhome.php

userprofile.php

usercomments.php

fbconnect_widget.php

community.php

invitefriends.php

Facebook Connect Ideas

FB Connect Ideas For You

• Make your personal blogs more social.• Microblogging with FB Connect.• Brand microsite.• Hotspot WiFi login.• FB Connect & Google Maps (realty,

classified, neighborhood chat).• Online games with FB Connect.• Live chat.• iPhone Facebook Connect.• Etc.

http://www.temenku.com

http://www.woopets.com

http://www.bewareofthedoghouse.com

http://www.perfectintimacy.com

Thank You

facebook connect integration

Documents