Quick Action #3 – Facebook JS SDK

The third episode of Quick Action series. Using very simple example I’m going to show how you can retrieve data from Facebook Graph API using Facebook JS SDK. To make an application more user-friendly I decided to use Angular Framework.

The sample application with SDK and Angular configured is available in my Github repository.

Motivations

Before creating each of projects from Quick Action series, an idea had come first. There is a music Youtuber who uses Facebook comments as an aggregator for interesting and not well-known music. Sometimes he has a lot of problems with loading all of the comments, especially when their number increases. I thought “why not to write a dedicated application which will handle it? “. After 20 minutes I was sitting on the front of Facebook SDK documentation trying to call a random function.

Creating an FB App

At the beginning, we have to create a new application on the Facebook for Developers page. I won’t go into details because everything is explained on the linked page. In this step, the App ID is the most important thing. It will be required during the configuration.

Setting up project

Facebook SDK’s configuration is very simple. Everything we have to do is to specify our application id and configure some additional properties like version or if a cookie for a session should be created:

More information about FB.init method you can find in the official documentation.

Retrieving data from API

In the purpose of putting all logic in one place, I created FacebookService. This class has all of the methods I want to call on the API:

As you can see each of those methods returns promise. There are two differences between each of calls.

The first one is URL. Depending on what kind of data we want to retrieve, we call different URL, e.g.

means “give me a post number 214916598996218 from a page with id 214916438996234”. We can create even more sophisticated request URL:

/comment points that we want to retrieve comments for a post with id 214916598996218. The limit parameter tells about a number of comments we want to get. The offset parameter is used for skipping comments.

Another thing in which they differ is argument named fields. With it, we can point which fields we expect to be included in a response e.g.

means “I need information about who wrote this comment (from), when (created_time) and what message (message) it contains”.

Having the service written, we can try to use it in a controller. At the beginning, we should check whether a user is logged, if not, redirection to the login page will be performed.

When we are sure that a user has permissions, we can call the method which returns information about a post and its author:

Example

It’s time to show you an example of how it works. The number of retrieved comments after a click is set up to 1.

 

As you can see, using Facebook Graph API with provided SDK is fairly easy. By adding Angular Framework, we get fully functional stack with the wide range of possibilities.

You may also like

Comments