Thursday, 30 August 2012

c# application that downloads facebook profiles pictures of members of a group

Getting started

There are quite a few steps involved in getting to display profile pictures of members of a  Facebook group.
There are two main parts to it:
  1. Getting data from Facebook
  2. Parsing it and displaying the result
Parsing the data returned from Facebook wasn't a trivial task since the data was JSON formatted and i had to try quite a few libraries to extract required fields from the returned JSON, C# having  no native support for JSON (though for silverlight a native library exists but that was of no use as this was a windows forms application ).
The library I used for parsing was LitJson. json.org  maintains a nice list of all the json parsing libraries available for various languages.

The following image shows the final application allong with the images fetched from one of my favourite facebook groups HITB .

Final Application's UI


Getting data from Facebook

For fetching data from facebook I used the facebooks Graph-API . I found the API simpler than its REST based API as as no complex http requests need to be made, you just fetch the required URL.
For getting the list of members in a group using the Graph Api the following url is used (more about the Group object here):

https://graph.facebook.com/groupid/members?access_token=accesstoken

where groupid is the id of the group and accestoken can be obtained from https://developers.facebook.com/tools/explorer 

once we have the data, we need to parse it to extract all the profile ids and user names. Once we have the profile Ids we can get the images easily as the url for a user's profile pic is nothing but

http://graph.facebook.com/profileID/picture

However there is a limitation to this method as the image returned by facebook is just 50x50 pixels so it might not be suitable in all scenarios.

For fetching the JSON fromated data containing info about the members of a group WebClient class can be used. Using the DownloadString() in  WebClient  object the entire JSON response can be stored in a string, which can later be fed to a JSON parser. Getting the images using webclient is not necessary since PictureBox controll can accept http paths as imagee source.

Parsing The data

The data returned by Facebook is in JSON but there is no native support for parsing JSON in C# thus we need to include an external library. After trying some libraries listed at json.org I found LitJson to be suitable for the project.

To add LitJson to the project download the package from http://litjson.sourceforge.net and extract it. Among the extracted directories the bin directory is the one which houses LitJson.dll. copy this dll to the project folder and add reference to it (RightClickProject->Addreference->Browse->selectDll->Ok) [this article explains the difference between Addreference and DllImport].
After adding reference include the LitJson namespace to the project by using the 'using' directive.
using LitJson;

To parse the JSON result we must first convert the stringified JSON obtained from WebClient to an object representing JSON. LitJson uses JsonData as a container class for JSON and JsonMapper.ToObject() to create the class from a string containing json.

Once the json object is created the 0th index of it will contain the data node (which contains the details of all the members) and 1st index contains paging which just gives the URL of the next page of the result(for a group having more than a certain number of users Facebook returns only a subset of the complete list in one page and we are required to iterate through pages to view all results, the logic for this is not implemented in the code and thus the application will not scan beyond the first page). so if jd is the object of type JsonData containing json data then jd[0] will be the data node of the returned json. now once we have the data node , obtaining is quite easy as the data for first user will be at jd[0][0] .
i.e.
jd[0]             :  data node
jd[0][i]        :  ith User's data
jd[0][i][0]  : ith User's name
jd[0][i][1]  : ith User's id
jd[0][i][2]  : whether the ith User is an administrator of the group


The Anchor attribute

While developing this application i stumbled upon this wonderful attribute that helps create a windows form application that allows the elements of the form to be automatically resized and/or reposition depending on the application size.

Anchor attribute

This MSDN article explains a different, albeit a better way to create resizable windows form.



Source Code

The complete source code along with binaries is available at Github (https://github.com/lihas/getProfilePicturesOfMembersOfaFacebookGroup).




related:
An article explaining how to attach a console to a windows form / gui application.