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



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
<script src="http://static.ak.fbcdn.net/connect/en_US/core.js"> <script> FB.init({ apiKey: 'YOUR API KEY' });

Log into the application

Log into the application

Display name and profile pic

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

}

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

Callback handler is invoked


}


<script type=”text/javascript”> 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; });

}


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

}


<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 = ‘’ into the page + 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 += '
Construct an FQL query

function(rows) { el = document.getElementById('friends-info'); for (var i in rows) { el.innerHTML += '
Send the request

function(rows) { el = document.getElementById('friends-info'); for (var i in rows) { el.innerHTML += ''; } });

Put profile pics in the document

Stream API Consuming

Stream API Publishing

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



Attachment Text



Attachment Text

Action Links



Attribution Link

Attachment Text

Action Links


Publish to the stream User Message

Attribution Link

Href

Attachment Text

Action Links


Mix and match the data

Innovate with social context

Let’s hack!

Building with Facebook - Social Dev Camp Chicago 2009

Recommend Documents