Professional Documents
Culture Documents
Connect
2006 2007 2008
Social everywhere
Web Mobile
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
<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
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 + ')';
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 '
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 '
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 '
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 '
FB.publish(post);
Publish to the stream var post = {
attachment: {
name: 'Facebook Connect JavaScript SDK',
Attachment Text description: (
FB.publish(post);
Mix and match the data
Innovate with social context
Let’s hack!