facebook

h1. Facebook Connect for NodeJS

Note: I wrote an "article on howtonode.org":http://howtonode.org/facebook-connect on how to use Facebook Connect with Node

This library contains NodeJS and jQuery scripts together with examples that allow you to easily integrate with Facebook. By making use of "Facebook's Javascript Client Library":http://wiki.developers.facebook.com/index.php/JavaScript_Client_Library we only have to do the minimal amount effort on the server-side, which "could be a good thing":http://synaptify.com/?p=613702.

There are two main ways of integrating with Facebook and both require you to "sign up for a Facebook Application":http://facebook.com/developer. If you want your web application to run inside Facebook, you need to make sure to verify users inside the Facebook Canvas (See example 2), otherwise, if you want users to use Facebook Connect to log onto your site, check Example 1.

h2. Dependencies

In order to use these plugins, you need to install both "NodeJS":http://nodejs.org and the "Express Web Framework":http://github.com/visionmedia/express/ on top of it.

Express can easily be installed like this:

cd myproject
git init
mkdir -p lib/support

git submodule add git://github.com/visionmedia/express.git lib/support/express
cd lib/support/express
git submodule init
git submodule update

h2. Setting up your Project

1. Create the necessary folders:

cd myproject
mkdir -p lib
mkdir -p public/javascripts

1. Copy "lib/facebook.js":node-facebook/blob/master/lib/facebook.js into /lib and "lib/jquery.facebook.js":node-facebook/blob/master/lib/jquery.facebook.js into public/javascripts

2. Place a file called xd_receiver.htm into your public directory, this is for "Facebook cross-domain communication":http://wiki.developers.facebook.com/index.php/Cross_Domain_Communication_Channel:

 
 
 
    Cross-Domain Receiver Page 
 
 
     
 

h2. Example 1: FB Connect

See "examples/fb_connect":node-facebook/blob/master/examples/fb_connect for the these example files.

h3. /app.js

require.paths.unshift(__dirname + '/lib')
require.paths.unshift(__dirname + '/lib/support/express/lib')

var express = require('express')
var app = express.createServer();

app.configure(function(){
  app.use(express.methodOverride())
  app.use(ContentLength)
  app.use(Cookie)
  app.use(Session)
  app.use(Logger)
  app.use(require('facebook').Facebook(dx{
    apiKey: 'e1249f7d4bc25b8f90e5c9c7523e3ee1', 
    apiSecret: '4ae45734dd66fa85c7b189fc2d7d5b4c'
  })
  app.set('root', __dirname)
})

// Called to get information about the current authenticated user
app.get('/fbSession', function(req, res){
  var fbSession = req.fbSession()

  if(fbSession) {
    // Here would be a nice place to lookup userId in the database
    // and supply some additional information for the client to use
  }

  // The client will only assume authentication was OK if userId exists
  res.send(JSON.stringify(fbSession || {}), {'Content-Type: 'application/json'});
})

// Called after a successful FB Connect
app.post('/fbSession', function(req, res) {
  var fbSession = req.fbSession() // Will return null if verification was unsuccesful

  if(fbSession) {
    // Now that we have a Facebook Session, we might want to store this new user in the db
    // Also, in this.params there is additional information about the user (name, pic, first_name, etc)
    // Note of warning: unlike fbSession, this additional information has not been verified
    fbSession.first_name = req.params['first_name']
  }

  res.send(JSON.stringify(fbSession || {}), {'Content-Type: 'application/json'});
})

// Called on Facebook logout
app.post('/fbLogout', function(req, res) {
  req.fbLogout();
  res.send(JSON.stringify({}))
})

// Static files in ./public
app.get('/', function(req, res){ res.sendfile(__dirname + '/public/index.html') })
app.get('/xd_receiver.htm', function(req, res){ res.sendfile(__dirname + '/public/xd_receiver.htm') })
app.get('/javascripts/jquery.facebook.js', function(res, res){ res.sendfile(__dirname + '/public/javascripts/jquery.facebook.js') })

app.listen()

h3. /public/index.html

 
 
  
    
<script type="text/javascript" src="/javascripts/jquery.facebook.js"></script>
<script type="text/javascript">
  $(document).ready(function () {
    $.fbInit('e1249f7d4bc25b8f90e5c9c7523e3ee1');
    
    // FB Connect action
    $('#fb-connect').bind('click', function () {
      $.fbConnect({'include': ['first_name', 'last_name', 'name', 'pic']}, function (fbSession) {
        $('.not_authenticated').hide();
        $('.authenticated').show();
        $('#fb-first_name').html(fbSession.first_name);
      });
      return false;
    });
    
    // FB Logout action
    $('#fb-logout').bind('click', function () {
      $.fbLogout(function () {
        $('.authenticated').hide();
        $('.not_authenticated').show();
      });
      return false;
    });
    
    // Check whether we're logged in and arrange page accordingly
    $.fbIsAuthenticated(function (fbSession) {
      // Authenticated!
      $('.authenticated').show();
      $('#fb-first_name').html(fbSession.first_name);
    }, function () {
      // Not authenticated
      $('.not_authenticated').show();
    });
    
  });
</script>

  
  
    

    
<div id="my-account">
  <div class="authenticated" style="display: none">
    Hi there <span id="fb-first_name"></span>!
    <a href="#" id="fb-logout">Logout</a>
  </div>
  <div class="not_authenticated" style="display: none">
    <a href="#" id="fb-connect">Connect with Facebook</a>
  </div>
</div>

   
 

h2. Example 2: A Facebook Application running in the Canvas

See "examples/fb_iframe":node-facebook/blob/master/examples/fb_iframe for the these example files.

h3. /app.js

require.paths.unshift(__dirname + '/lib')
require.paths.unshift(__dirname + '/lib/support/express/lib')

var express = require('express')
var app = express,createServer();

app.configure(function(){
  app.use(express.methodOverride())
  app.use(express.cookieDecoder())
  app.use(express.session())
  app.use(express.logger())
  app.use(require('facebook').Facebook({
    apiKey: 'e1249f7d4bc25b8f90e5c9c7523e3ee1', 
    apiSecret: '4ae45734dd66fa85c7b189fc2d7d5b4c'
  })
  express.staticProvider(__dirname + '/public')
})

// This is the canvas URL set in the Facebook Application settings
app.get('/iframe', function(req, res) {
  var fbSession = req.fbSession() // Will create a session based on verified data from the GET params
  res.sendfile(__dirname + '/public/iframe.html')
})

// Called to get information about the current authenticated user
app.get('/fbSession', function(req, res){
  var fbSession = req.fbSession()

  if(fbSession) {
    // Here would be a nice place to lookup userId in the database
    // and supply some additional information for the client to use
  }

  // The client will only assume authentication was OK if userId exists
  res.send(JSON.stringify(fbSession || {}), {'Content-Type: 'application/json'});
})

// Static files in ./public
app.get('/xd_receiver.htm', function(req, res){ res.sendfile(__dirname + '/public/xd_receiver.htm') })
app.get('/javascripts/jquery.facebook.js', function(req, res){ res.sendfile(__dirname + '/public/javascripts/jquery.facebook.js') })

app.listen()

h3. /public/iframe.html

 
  
    Nodogoshi
    
<script type="text/javascript" src="/javascripts/jquery.facebook.js"></script>

<script type="text/javascript">
  $(document).ready(function () {
    $.fbInit('e1249f7d4bc25b8f90e5c9c7523e3ee1');
    // Check whether we're logged in and arrange page accordingly
    $.fbIsAuthenticated(function (fbSession) {
      // Authenticated!
      $.fbProfile(['first_name'], function (profile) {
        $('#fb-first_name').html(profile.first_name);
        $('.authenticated').show();
      });
    }, function () {
      // Not authenticated
      $('.not_authenticated').show();
      $('#authenticate').click(function () {
        $.fbIframeAuthenticate({'canvas_name': 'nodogoshi'});
        return false;
      });
    });
  });
</script>

  
  
    

    
<div id="my-account">
  <div class="authenticated" style="display: none">
    Hi there <span id="fb-first_name"></span>!
  </div>
  <div class="not_authenticated" style="display: none">
    Viewing anonymously, <a href="#" id="authenticate">click here</a> to authenticate.
  </div>
</div>

   
 

h2. License

"MIT":http://www.opensource.org/licenses/mit-license.php