Building with Facebook - Social Dev Camp Chicago 2009

Hacking on the social web

SocialDevCamp Chicago 2009 David Recordon & Luke Shepard

Building with Facebook Connect and Platform

A Brief History

Connect 2006

2007

2008

Social everywhere Web

Desktop

Mobile

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

Plays well with others ▪

jquery, mootools, prototype, yui, dojo, etc

Getting Started 1. Get an API key

http://developers.facebook.com/

Initialize the application Single line of Javascript all Connect sites need to function FB.init({ apiKey: 'YOUR API KEY' });

Log into the application

Log into the application

Display name and profile pic

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 = ‘’ + info.name; });

}

Display name and profile pic FB.login(loginHandler);

Callback handler is invoked

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 = ‘’ + info.name; });

}

Display name and profile pic

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

Identity information comes in the response

function(rows) { var element = document.getElementById(‘user-info’); var info = rows[0]; element.innerHTML = ‘’ + info.name; });

}

Display name and profile pic

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 ‘’ + info.name; });

}

Display name and profile pic

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 = ‘’ into the page + info.name; });

}

Display name and profile pic

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 = ‘’ + info.name; });

}

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 += '