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

http://www.apache.org/licenses/LICENSE-2.0

    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.
  -->
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>Facebook Connect Test - FQL</title>
  </head>
  <body>
    <h1>Facebook Connect Test - FQL</h1>
    <div>
      <!--Add the login / logout buttons -->
      <button id="login">Login</button>
      <button id="logout">Logout</button>
    </div>

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

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

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

	<!-- DO NOT RENAME - REFERENCED IN THE CODE -->
    <div id="fb-root">
    	<p>
        	Other form information below where the info will be shown.
        </p>
    </div>

    <!-- 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 -->
    <script>
      // initialize the library with the API key
      FB.init({ apiKey: 'ADD_YOUR_API_KEY_HERE' });

      // fetch the status on load
      FB.getLoginStatus(handleSessionResponse);

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

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

      // Hide the user-info div
      function clearDisplay() {
        $('#user-info').hide('fast');
      }

      // 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) {
          //clearDisplay();
          return;
        }

        // If we have a session, query for the user's name, email and picture.
        FB.api(
          {
            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');
          }
        );
      }
    </script>
  </body>
</html>

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

Hope this helps!

Tom

http://www.eit-c.co.uk

We are Bloggers!

April 30, 2010

Well, after setting up a business, a website, a Twitter feed and a Facebook page, the next logical step can only be a blog!

The plan is to document things I find in my day-to-day work that might be useful to others. I don’t now how often I’ll blog, it will probably be determined on how much time I have and how many interesting things I find out that aren’t discussed at great length everywhere else on the internet! Even so, I’ll do my best.

So welcome and congratulations on reading the first blog for Elliott I.T. Consultancy! Lets hope they get more interesting than this…

Tom

http://www.eit-c.co.uk
QQD67VB8Q64H

Follow

Get every new post delivered to your Inbox.