Create an App
When were talking about the Facebook API or Facebook SDK we must first have a Facebook App. A Facebook App doesn’t necessarily reside within Facebook just like the games that we play in Facebook. An app can be a login application that you only use to have your users login to your websites using their Facebook accounts. An app can be basically anything which you can use to connect your website or webapp to Facebook.
To create an app go to developers.facebook.com/apps
create new app.
Enter the name of your app.
Enter the captcha.
After entering the captcha correctly an
app id and
app secret will be generated.
app id and
app secret is what you will use on your website or webapp to connect to Facebook.
They’re like connection strings for databases.
Enter your app info. What information you enter here will basically depend on the nature of your app.
In this article I’m only going to show you the basics so I’m just going to select the
website with Facebook login option.
site url is basically the address where you want to redirect once the user has successfully logged in.
It doesn’t necessarily have to be an existing website which can be access in the internet.
For this reason I only used my
localhost which is basically
127.0.0.1. If you’re not using the default port
you can just enter something like
8090 is the port where your web server is running.
Setting up the API
- fb-root – the fb root is a
divwith an id of
fb-rootis where new elements are being attached. You might ask why not just append it to the
bodyand be done with it. I don’t really know how to answer that. Facebook has their own way of doing things.
As you can see from the screenshot below the
fb-root is some sort of a container for all the things that has something to do with the Facebook SDK.
- jQuery – Another thing that you have to remember is using jQuery. It will make your life easier in selecting elements from the DOM when working with Facebook. So go ahead and download and include it on your page.
1 2 3 4 5 6 7
They did this so that it doesn’t block the loading of elements in the page. Its up for you to choose which method of loading Facebook SDK do you want. Its always recommended that you load it asynchronously if you’re working on a real world website where every millisecond counts.
- Channel File – next is the channel file which contains the code below. In the documentation it said something about cross-domain communication in certain browsers.
Feel free to read that if you have lots of time but for now let’s just say its important that we have that file as well.
So go ahead and create a new file called
channel.phpand paste the code below.
1 2 3 4 5 6 7
- Initialization – next is the initialization. Just substitute the
app id. Yes were not gonna need the
app secretI don’t really know why but when I used the PHP SDK its actually required. Might as well do some research on that but we won’t die if we don’t know it. The code below is a short version as I only used 3 key-value pairs. These are not the only options there are more but these are the only one’s that we need right now.
Were done with the essentials now its time to play. Let’s go ahead and login with Facebook using
As the name suggests
FB.login is used to login to your website or webapp via Facebook. In the example below were logging in with 3 permissions that has to be approved
by the user.
- user_about_me – Provides access to the “About Me” section of the profile in the about property
- user_activities – Provides access to the user’s list of activities as the activities connection
- user_birthday – Provides access to the birthday with year as the birthday property
The strings that we specify on the
scope are the user information that we have access to. Check out the permissions reference for some of
the permissions that you can use on the
scope. Each permission is separated by a comma
, note that there are no spaces, just the comma.
If you have scanned through the permissions you might have noticed that Facebook has broken it down into specific data and not groups like
You can also have access to your friends information. Note that this is not confidential information like passwords and email as Facebook won’t give you those. You only have access to information that are allowed by your friends in their privacy settings. For example if your friend has an album where he has set that he is the only one who can view it then you won’t have access to that.
There are also extended permissions, these are actions in which the app can do like posting to the wall/timeline of your friends or publishing information into your own wall. These extended permissions has their own authentication box(the box that you see the first time you use an app) so if an app has an extended permission you will basically have an authentication box which has 2 pages. One for the basic permission and one for the extended permission.
1 2 3 4 5 6 7
Here’s what the basic permission might look like:
And here’s the extended permission:
Yes you can actually deselect a specific permission if you don’t want it like the posting in your behalf permission since its so evil. You’re just watching something on Youtube and without you knowing it actually published a link to your timeline on the video that you’re watching. That’s why its always wise to review the permissions that you’re allowing before you click on the allow button.
You can access information using
FB.api. But the information that you can access depends on the permissions that you have set on the
the permissions that your users has allowed. For this reason its always nice to check whether a specific permission is allowed before trying
to use it. You can check whether a specific permission is allowed using
fql or the
Facebook Query Language.
All you have to do is set the
fql.query and the
query to the actual query.
Remember that Facebook doesn’t allow wildcards like
SELECT * FROM tbl you have to explicitly specify what fields you need.
In the example below were reading querying the permissions table for the permissions of the current user which is basically
You can also use the Facebook ID of the user.
The list of tables which you can query are in the reference page for fql
What were doing in the code below is to loop through the response if the current key contains
1 it means that the permission is allowed if its
0 it means its not allowed.
1 2 3 4 5 6 7 8 9
As you can see from the screenshot below the response is basically an object and the information that were interested in is at index 0. As you can see the 2 permissions are allowed by the user so were all good.
For the last example for this article were going to fetch a list of all the friends of the current user. These information are stored
me/friends which is some sort of a table in a database or a folder in a filesystem.
Next we specify the fields that we need as Facebook doesn’t automatically fetch the fields that you need. Facebook only fetches the default information
last_name , and
id. Yeah it turns out that we don’t actually need to specify the fields if
what we want to access are just the basic information. But its good practice to specify the fields so you’ll know what to expect.
Of course the fields that you can fetch still depends on the permissions that the user has allowed. So you will still get some
undefined if the user didn’t allow it.
1 2 3 4 5 6 7 8 9 10 11 12 13