Facebook Connect through JavaScript

May 4, 2010

I was recently asked to help out on a development project to pull through information from Facebook to a .NET website. I thought “this won’t be too hard, it’s easy in PHP”, so happily agreed to do the work.

I soon found out that the back end of this .NET code was closed to the clients internal developers, and we would only be able to update the front end code. After a small panic, I did some investigation on the only way I could think of implementing this. JavaScript.

Now, there are dozens of examples on how to do this (and to get the basics, Google has all the answers), but not one of them outlines what to do if you need to bring back any information that requires special permissions (in my case, email). As the Facebook API is a little bit erratic, I have published this code to hopefully help a few people out.

The key points you will need that aren’t available in any other examples are the way you call the extra permissions, and how to set these permissions through JavaScript.

The code below is the full example you can use for yourself. Just remember to create your own Facebook application first (there are plenty of examples knocking about  including here).

<!doctype html>
    Copyright Facebook Inc.

    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
    You may obtain a copy of the License at


    Unless required by applicable law or agreed to in writing, software
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
    limitations under the License.
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>Facebook Connect Test - FQL</title>
    <h1>Facebook Connect Test - FQL</h1>
      <!--Add the login / logout buttons -->
      <button id="login">Login</button>
      <button id="logout">Logout</button>

    <div id="fb-top">
        	Other form information above where the info will be shown.

    <div id="user-info">
        	This is where the data will be shown.

	<!-- This is the FB JQuery script hosted on Google that is being used -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

    <div id="fb-root">
        	Other form information below where the info will be shown.

    <!-- Include the facebook JavaScript library -->
    <script src="http://connect.facebook.net/en_US/all.js"></script>

    <!-- Our JavaScript functions that call our application, allow us to login / logout and return our user info -->
      // initialize the library with the API key
      FB.init({ apiKey: 'ADD_YOUR_API_KEY_HERE' });

      // fetch the status on load

      $('#login').bind('click', function() {
        FB.login(handleSessionResponse, {perms:'email,publish_stream'});

      $('#logout').bind('click', function() {
		$('#user-info').html('LOGGED OUT').show('fast');

      // Hide the user-info div
      function clearDisplay() {

      // handle a session response from any of the auth related calls
      function handleSessionResponse(response) {
        // If we dont have a session, just hide the user info (see commented code above)
        if (!response.session) {

        // If we have a session, query for the user's name, email and picture.
            method: 'fql.query',
            query: 'SELECT name, email, pic FROM user WHERE uid=' + FB.getSession().uid
          function(response) {
            var user = response[0];
            $('#user-info').html('<img src="' + user.pic + '"><br />' + user.name + "<br />" + user.email).show('fast');

If you want to see this working, you can have a play here.

Hope this helps!




Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: