Facebook API – Part 2

At the second part of my article series about the Facebook API it is now time to use a SDK to work with Facebook data.

Javascipt SDK

I want to recommend the documentation again! As you can see, there are 3 main functions for the Javascript SDK:

• FB.init
• FB.api
• FB.ui

I show you on an example how you can use this functions.

init

The first step is to initialize the SDK:

<script src="https://connect.facebook.net/de_DE/all.js"></script>
<script>
FB.init({
    appId :'XXXXXXX',
    frictionlessRequests : true,
    status : true, // check login status
    cookie : true, // enable cookies to allow the server to access the session
});
<script>

Before we can use any of our SDK functions, we have to include a JavaScript file directly from Facebook. This is done in line one. Here we do not use a local saved file, instead we use the file from Facebook. The all.js file is available for different languages. I use the file for the German language, you may need to use your language code here. For English you may use en_US.

You can do initialization by simple function call. The only needed param is the appId. You have to replace ‚XXXXXX‘ with your app id. You get an app id if you create a new application. This can be done at the developer section of Facebook.

FB.login

This is not a main function of the SDK, but you need it to get a logged in user which is used by all other functions. Default is, that no user is logged in, so you can not get any information from Facebook. If you want to create a login for your app, use that code:

function FacebookLogin()
{
    FB.login(function(response){
        if(response){
            alert('successful login!');
        }
    },
    {scope: 'email'});
}

If you call FB.login you will get a authentication dialog from Facebook. There you can allow the app to get data from your profile. This are normally all public data like you Facebook name, you profile picture and so on. With different profile settings you can also get other information that a user marked as public. If you want to get data that is not public, you have to ask for the request. The example above asks the user to get his mail address. A callback function displays a message is the user logins correctly.

You can call the function above for example from a button on your app:

<a href="#" onclick='FacebookLogin();'>Login</a>

api

With the api function you can get user data. This only works for public data or if the user has granted you the right to read this data (this is done during login). A simple example on how to get data from Facebook:

FB.api('/me', function(response) {
    console.log(response);
    v_name = response.first_name;
    n_name = response.last_name;
    fb_id = response.id;
});

Here we get all public information from our logged in user. If you want to know which information is available, you can read out the response object from the function. I display this with a console.log. You can get the output for example with the Firefox Plugin Firebug. I store the information that is public for all users to some global variables. These are first name, last name and Facebook id of the user.

You can find more information of what you can get from Facebook with this function in the documentation.

ui

This function is for all things the user gets asked for input. This only works with Facebook dialog boxes. There are some things that you can ask a user for input. A nice function is the send dialog box, where you can send messages to your Facebook friends:

FB.ui({
    method: 'send',
    name: 'Sample message to the user',
    link: 'https://domain.com?inviter='+fb_id,
    description: v_name+' '+n_name+' has send you this message.',
});

With the method param you define the kind of dialog box. Each type uses different params, the send function wants the following things:

• Name
  This is the name of the message.
• Link
  You can add a link to the message.
• Description
  This is the message that you find under your link. This is not the text of the message, because the message text can be set by the user.

For this example I use the information I requested in the last example. So I can make an individual message. With the +fb_id after the link we can track the information which user clicked that link.

Part 1 | Part 3 | Part 4