Open Source Ecosystems

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:

Also, we need to install "hashlib":http://github.com/brainfucker/hashlib, a NodeJS library provided by mr Brainfucker:

h2. Setting up your Project

Create the necessary folders:

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

h2. Example 1: FB Connect

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

h3. /app.js

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

h3. /public/iframe.html

<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