Hacking on the social web

SocialDevCamp Chicago David Recordon & Luke Shepard

Building with Facebook
Connect and Platform

A Brief History

Connect

Social everywhere
Web Mobile

Desktop

Game Consoles

Social Web Building Blocks
Activity
Opening up to the people around you

Connections
The people and connections you care about

Identity
Authentic representation of you

Introducing Mu

Facebook Connect for JavaScript

Demo
http://open.lukeshepard.com/connect/chicago

Demo
http://open.lukeshepard.com/connect/chicago

Demo
http://open.lukeshepard.com/connect/chicago

New JavaScript Library
▪ ▪

Easier way to get started with direct JavaScript access Common Connect functions
▪ ▪ ▪ ▪

login logout API calls publish to the stream jquery, mootools, prototype, yui, dojo, etc

Plays well with others

Getting Started
. Get an API key
http://developers.facebook.com/

Initialize the application
Single line of Javascript all Connect sites need to function
<div id="fb-root"></div> <script src="http://static.ak.fbcdn.net/connect/en_US/core.js"> </script> <script> FB.init({ apiKey: 'YOUR API KEY' }); </script>

Log into the application
<a href=”#” onclick=”FB.login(loginHandler);”> <img src=”http://static.ak.facebook.com/images/fbconnect/login-buttons/ connect_white_large_long.gif”> </a>

Log into the application
<a href=”#” onclick=”FB.login(loginHandler);”> <img src=”http://static.ak.facebook.com/images/fbconnect/login-buttons/ connect_white_large_long.gif”> </a>

Display name and profile pic
<a href=”#” onclick=”FB.login(loginHandler);”>
<img src=”http://static.ak.....”> </a>

<script type=”text/javascript”> function loginHandler(response) { if (response.status != “connected”) return; FB.api({ method: ‘users.getInfo’, fields: ‘name, pic’, uids: [response.session.uid]}, function(rows) { var element = document.getElementById(‘user-info’); var info = rows[0]; element.innerHTML = ‘<img src=”’ + info.pic + ‘“>’ + info.name; });

} </script>

Display name and profile pic
FB.login(loginHandler); <a href=”#” onclick=”FB.login(loginHandler);”>
<img src=”http://static.ak.....”> </a>

Callback handler is invoked

<script type=”text/javascript”> function loginHandler(response) { if (response.status != “connected”) return; FB.api({ method: ‘users.getInfo’, fields: ‘name, pic’, uids: [response.session.uid]}, function(rows) { var element = document.getElementById(‘user-info’); var info = rows[0]; element.innerHTML = ‘<img src=”’ + info.pic + ‘“>’ + info.name; });

} </script>

Display name and profile pic
<a href=”#” onclick=”FB.login(loginHandler);”>
<img src=”http://static.ak.....”> </a>

<script type=”text/javascript”> function loginHandler(response) { if (response.status != “connected”) return; response.status FB.api({ method: ‘users.getInfo’, fields: ‘name, pic’, uids: [response.session.uid]}, response.session.uid

Identity information comes in the response

} </script>

function(rows) { var element = document.getElementById(‘user-info’); var info = rows[0]; element.innerHTML = ‘<img src=”’ + info.pic + ‘“>’ + info.name; });

Display name and profile pic
<a href=”#” onclick=”FB.login(loginHandler);”>
<img src=”http://static.ak.....”> </a>

<script type=”text/javascript”> function loginHandler(response) { if (response.status != “connected”) return; FB.api({ method: ‘users.getInfo’, fields: ‘name, pic’, uids: [response.session.uid]}, function(rows) { var element = document.getElementById(‘user-info’); Make an API call directly var info = rows[0]; element.innerHTML = from JavaScript ‘<img src=”’ + info.pic + ‘“>’ + info.name; });

} </script>

Display name and profile pic
<a href=”#” onclick=”FB.login(loginHandler);”>
<img src=”http://static.ak.....”> </a>

<script type=”text/javascript”> function loginHandler(response) { if (response.status != “connected”) return; FB.api({ method: ‘users.getInfo’, fields: ‘name, pic’, uids: [response.session.uid]}, function(rows) { var element = document.getElementById(‘user-info’); var info = rows[0]; element.innerHTML = ‘<img src=”’ + info.pic Insert user information + ‘“>’ into the page + info.name; });

} </script>

Display name and profile pic
<a href=”#” onclick=”FB.login(loginHandler);”>
<img src=”http://static.ak.....”> </a>

<script type=”text/javascript”> function loginHandler(response) { if (response.status != “connected”) return; FB.api({ method: ‘users.getInfo’, fields: ‘name, pic’, uids: [response.session.uid]}, function(rows) { var element = document.getElementById(‘user-info’); var info = rows[0]; element.innerHTML = ‘<img src=”’ + info.pic + ‘“>’ + info.name; });

} </script>

Bring your friends along

Make powerful queries with FQL
- A language for querying social information - Feels similar to SQL

‘SELECT name, pic FROM user WHERE uid = ‘ + uid

Get a single user’s name and profile pic

Make powerful queries with FQL
- A language for querying social information - Feels similar to SQL

‘SELECT name, pic FROM user WHERE uid = ‘ + uid

Get a single user’s name and profile pic

‘SELECT name, pic, hometown_location FROM user WHERE hometown_location AND hometown_location.city = “Chicago” AND uid IN (SELECT uid2 FROM friend WHERE uid1 = ‘ + uid

Get name and pic for all friends that grew up in Chicago

Query for friend data
var query = 'SELECT pic_square' +' FROM user' +' WHERE current_location' +' AND "Chicago" IN current_location.city' +' AND uid IN ' +' (SELECT uid2 ' +' FROM friend ' +' WHERE uid1 = ' + response.session.uid + ')'; FB.api({ method: 'fql.query', query: query}, function(rows) { el = document.getElementById('friends-info'); for (var i in rows) { el.innerHTML += '<img src="' + rows[i].pic_square + } });

Query for friend data
var query = 'SELECT pic_square' +' FROM user' +' WHERE current_location' +' AND "Chicago" IN current_location.city' +' AND uid IN ' +' (SELECT uid2 ' +' FROM friend ' +' WHERE uid1 = ' + response.session.uid + ')'; ')'; FB.api({ method: 'fql.query', query: query},

Construct an FQL query

function(rows) { el = document.getElementById('friends-info'); for (var i in rows) { el.innerHTML += '<img src="' + rows[i].pic_square + } });

Query for friend data
var query = 'SELECT pic_square' +' FROM user' +' WHERE current_location' +' AND "Chicago" IN current_location.city' +' AND uid IN ' +' (SELECT uid2 ' +' FROM friend ' +' WHERE uid1 = ' + response.session.uid + ')'; FB.api({ method: 'fql.query', ‘fql.query’, query: query},

Send the request

function(rows) { el = document.getElementById('friends-info'); for (var i in rows) { el.innerHTML += '<img src="' + rows[i].pic_square + } });

Query for friend data
var query = 'SELECT pic_square' +' FROM user' +' WHERE current_location' +' AND "Chicago" IN current_location.city' +' AND uid IN ' +' (SELECT uid2 ' +' FROM friend ' +' WHERE uid1 = ' + response.session.uid + ')'; FB.api({ method: 'fql.query', query: query}, function(rows) { el = document.getElementById('friends-info'); for (var i in rows) { el.innerHTML += '<img src="' + rows[i].pic_square + '">'; } });

Put profile pics in the document

Stream API
Consuming

Stream API
Publishing

Publish to the stream

Publish to the stream

Publish to the stream

var post = { attachment: { name: 'Facebook Connect JavaScript SDK', description: ( 'A JavaScript library that allows you to harness ' + 'the power of Facebook, bringing the user\'s ‘ + 'identity, social graph and distribution power ‘ + 'to your site.' ), href: 'http://github.com/facebook/connect-js' }, action_links: [ { text: 'SDK Console', href: 'http://developers.facebook.com/connect/ console.php' }, { text: 'GitHub Repo', href: 'http://github.com/facebook/connect-js' }, ], }; FB.publish(post);

Publish to the stream
Href

var post = { attachment: { name: 'Facebook Connect JavaScript SDK', description: ( 'A JavaScript library that allows you to harness ' + 'the power of Facebook, bringing the user\'s ‘ + 'identity, social graph and distribution power ‘ + 'to your site.' ), href: 'http://github.com/facebook/connect-js' }, action_links: [ { text: 'SDK Console', href: 'http://developers.facebook.com/connect/ console.php' }, { text: 'GitHub Repo', href: 'http://github.com/facebook/connect-js' }, ], }; FB.publish(post);

Publish to the stream
Href Attachment Text

var post = { attachment: { name: 'Facebook Connect JavaScript SDK', description: ( 'A JavaScript library that allows you to harness ' + 'the power of Facebook, bringing the user\'s ‘ + 'identity, social graph and distribution power ‘ + 'to your site.' ), href: 'http://github.com/facebook/connect-js' }, action_links: [ { text: 'SDK Console', href: 'http://developers.facebook.com/connect/ console.php' }, { text: 'GitHub Repo', href: 'http://github.com/facebook/connect-js' }, ], }; FB.publish(post);

Publish to the stream
Href Attachment Text

Action Links

var post = { attachment: { name: 'Facebook Connect JavaScript SDK', description: ( 'A JavaScript library that allows you to harness ' + 'the power of Facebook, bringing the user\'s ‘ + 'identity, social graph and distribution power ‘ + 'to your site.' ), href: 'http://github.com/facebook/connect-js' }, action_links: [ { text: 'SDK Console', href: 'http://developers.facebook.com/connect/ console.php' }, { text: 'GitHub Repo', href: 'http://github.com/facebook/connect-js' }, ], }; FB.publish(post);

Publish to the stream
Href Attachment Text

Attribution Link

Action Links

var post = { attachment: { name: 'Facebook Connect JavaScript SDK', description: ( 'A JavaScript library that allows you to harness ' + 'the power of Facebook, bringing the user\'s ‘ + 'identity, social graph and distribution power ‘ + 'to your site.' ), href: 'http://github.com/facebook/connect-js' }, action_links: [ { text: 'SDK Console', href: 'http://developers.facebook.com/connect/ console.php' }, { text: 'GitHub Repo', href: 'http://github.com/facebook/connect-js' }, ], }; FB.publish(post);

Publish to the stream
User Message Href Attachment Text

Attribution Link

Action Links

var post = { attachment: { name: 'Facebook Connect JavaScript SDK', description: ( 'A JavaScript library that allows you to harness ' + 'the power of Facebook, bringing the user\'s ‘ + 'identity, social graph and distribution power ‘ + 'to your site.' ), href: 'http://github.com/facebook/connect-js' }, action_links: [ { text: 'SDK Console', href: 'http://developers.facebook.com/connect/ console.php' }, { text: 'GitHub Repo', href: 'http://github.com/facebook/connect-js' }, ], }; FB.publish(post);

Mix and match the data

Innovate with social context

Let’s hack!