Titanium Quickie: Facebook Album Covers Part 1

Row of server cabinets with computer and digital displays full of data, numbers, and blue blinking lights and leds, arranged in circular rows. Computer servers fill a room of a futuristic data center, used as a cloud computing and data storage facility. Room is illuminated by blue light. Low angle view. Supercomputer simulation, digitally generated image.

Most of the blog posts I do are inspired by a question I find in Q&A that gets a lot of views, but is difficult to answer. Facebook is also a popular topic among many people when they first start doing mobile development. So instead of writing the 100th Twitter app to demonstrate Titanium, I will share a snippet of code to demonstrate Facebook Photo Albums.

The original question in the forum can be found here.

The basic problem posed in the question was how to display the photo album covers for all of the albums in a user’s Facebook account.

The first step when working with the Facebook APIs (after registering an application and obtaining your API keys and app ID) is requesting the permissions you will need when accessing a Facebook user’s data. I have included a bunch of the usual permissions, but the important one for this example is “user_photos”. Of course, you must substitute your own application ID in the code below:

Next we need to see if the user is logged in or not. You can check this via a property in the Ti.Facebook namespace:

Next, we will create a function to get the albums from the current user’s account. This API call and documentation can be found on the developer.facebook.com site. We will use the graph API to make all of our Facebook data requests. Titanium provides you with a JavaScript interface to make calls against the graph API, and receive JSON data back (as a JavaScript object) in a callback function:

We care about two key bits of data:

  1. if the call was successful, which is provided in the graphResp variable
  2. the data object, an array, containing the fields we asked for in the graph API call: id,name,cover_photo,count, and created_time

As you can see from the sample response the data is laid out neatly for us to pop into a table view or the control of our choosing for display to the end user.

{
    "data": [
        {
            "id": "148512188549462",
            "name": "Profile Pictures",
            "created_time": "2011-04-20T23:53:44+0000"
        },
        {
            "cover_photo": "124207237646624",
            "id": "124207234313291",
            "name": "Kodak Gallery Quickie Photos",
            "created_time": "2011-01-05T04:16:00+0000",
            "count": 27
        },
        {
            "cover_photo": "123487897718558",
            "id": "123487894385225",
            "name": "statedeptfeed Photos",
            "created_time": "2011-01-02T06:27:48+0000",
            "count": 1
        },
        {
            "cover_photo": "120879431312738",
            "id": "120879427979405",
            "name": "Appcelerator Titanium Photos",
            "created_time": "2010-12-22T16:38:15+0000",
            "count": 1
        }
    ],
    "paging": {
        "previous": "https://graph.facebook.com/me/albums?sdk=ios&fields=id%2Cname%2Ccover_photo%2Ccount%2Ccreated_time&access_token=REMOVED-ACCESS-TOKEN&format=json&limit=25&since=1303343624",
        "next": "https://graph.facebook.com/me/albums?sdk=ios&fields=id%2Cname%2Ccover_photo%2Ccount%2Ccreated_time&access_token=REMOVED-ACCESS-TOKEN&format=json&limit=25&until=1293035895"
    }
}

Assuming that the data returned from the Facebook graph API call was in an array “data”, you could create ImageView components for each of the albums like so:

Sample App (app.js)

Helpful Links

Facebook Module Overview

Titanium.Facebook module reference

Facebook Graph API Overview

3 COMMENTS

Comments are closed.