Appcelerator Blog

The Leading Resource for All Things Mobile

Titanium Quickie: Facebook Album Covers Part 1

0 Flares 0 Flares ×

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

0 Flares Twitter 0 Facebook 0 Google+ 0 LinkedIn 0 Email -- 0 Flares ×

3 Comments

  1. Hi Aaron, great post. Facebook API use to give me a lot of headaches, so thanks for sharing

  2. Matt Miller

    This was very helpful, awesome posting thank you.

  3. Ahsan Nawaz

    Thumbs up…!!

Comments are closed.

Sign up for updates!

Become a mobile leader. Take the first step to scale mobile innovation throughout your enterprise.
Get in touch
computer and tablet showing Appcelerator software
Start free, grow from there.
0 Flares Twitter 0 Facebook 0 Google+ 0 LinkedIn 0 Email -- 0 Flares ×