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 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
▪ 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

<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
response.status != “connected”) return;

FB.api({
method: ‘users.getInfo’, Identity information comes in the response
fields: ‘name, pic’,
uids: [response.session.uid]},
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;

FB.api({
method: ‘users.getInfo’,
fields: ‘name, pic’,
uids: [response.session.uid]},

function(rows) {
var element = document.getElementById(‘user-info’);
var info = rows[0]; Make an API call directly
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
+ info.name; into the page
});
}
</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 Get a single user’s name and profile pic
WHERE uid = ‘ + uid
Make powerful queries with FQL
- A language for querying social information
- Feels similar to SQL

‘SELECT name, pic

FROM user Get a single user’s name and profile pic
WHERE uid = ‘ + uid

‘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 ' Construct an FQL query
+' (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({ Send the request

method: 'fql.query',
‘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},

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 var post = {
attachment: {
name: 'Facebook Connect JavaScript SDK',
description: (
Href +
'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 var post = {
attachment: {
name: 'Facebook Connect JavaScript SDK',
Attachment Text description: (
Href +
'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 var post = {
attachment: {
name: 'Facebook Connect JavaScript SDK',
Attachment Text description: (
Href +
'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'
},
{
Action Links text: 'GitHub Repo',
href: 'http://github.com/facebook/connect-js'
},
],
};

FB.publish(post);
Publish to the stream var post = {
attachment: {
name: 'Facebook Connect JavaScript SDK',
Attachment Text description: (
Href +
'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'
},
{
Attribution Link Action Links text: 'GitHub Repo',
href: 'http://github.com/facebook/connect-js'
},
],
};

FB.publish(post);
Publish to the stream var post = {
attachment: {
name: 'Facebook Connect JavaScript SDK',
Attachment Text description: (

User Message Href +

'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'
},
{
Attribution Link Action Links 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!