Bixly How-To: integrate django with facebook – part2

In the previous entry, “Bixly How-To: integrate django with facebook – part1”, we used the Facebook Javascript SDK to provide access to the Graph API for the user.

The Facebook Graph API accessed with the Python SDK and Javascript SDK provides a lot of operations with regards to accessing user information (e.g. access token, friends, news feed) and other tasks such as album creation and image upload. We will continue where we left off in part 1 of this 2-part tutorial. We encourage you to integrate Facebook’s Javascript SDK shown in part 1 first before proceeding below.

Including the Facebook’s Python SDK

Step 1: We first create a folder in the app folder called fbconnect. Download facebook.py from (repo no longer exists)https://github.com/facebook/python-sdk/tree/master/src and store it in the fbconnect folder. We rename it to fbconnect.py for convenience. We need to create an empty __init__.py in the same directory so that django defines the folder as a package.

Step 2: We then create a file named fbutils.py in the same folder containing the code below.

This code simply wraps fbconnect’s function get_user_from_cookie. If the user is logged in through Facebook, the get_user_from_cookie function returns a dictionary containing ’uid’ which is the user’s Facebook ID and ‘access_token’ which can be used to make authenticated requests to Facebook’s Graph API. When we call the connect function we created above, we’ll receive either the Facebook GraphAPI instance and the user access token when the user is logged in via Facebook or None, None otherwise.

When we have the user’s access token, we can easily perform Facebook API calls such as accessing the user’s information, image uploading, posting content in user’s walls, and creating and modifying events (provided that the user granted such permissions for the application).

Step 3: We modify the views.py code to have

Given that the connect function returns fbgraph object and the access token, we first include in the view the value of the Facebook access token of the user.

We then  display the access_token value after “Updated Time” in your template page.

Step 4: The Graph API of Facebook can also be accessed using the Python SDK provided. In our case, all we need to do is to use the fbgraph object provided by our connect function.

By using the python code fbgraph.get_object(‘me’), we get the same values as the javascript code FB.api(‘/me’). Notice that the only difference between them is syntax.They both access https://graph.facebook.com/me with the access token as the parameter. If you want to see the keys and values returned by the Graph API, view this in your web browser https://graph.facebook.com/me?access_token=ACCESS_TOKEN. 

Include the fbgraph.get_object(‘me’) codes in your views.py. It should look something like this.

To see the dictionary value of the fbgraph_me variable we passed to the template, we add this line after the access token in index.html

Step 5: The Graph API also has the capability to display the user’s friends. To demonstrate this, we use fbgraph.get_connections(‘me’,’friends’) to get the list of friends of the user. The python code fbgraph.get_connections(‘me’,’friends’) returns a dictionary of the form

We then include fbgraph_friends = fbgraph.get_connections(“me”, “friends”)[‘data’] in our views.py and we add the following code in our template page.

Step 6: We can also get the user’s news feed with the Graph API. By using fbgraph_newsfeed = fbgraph.get_connections(“me”, “home”), we get to a dictionary of the form

where each dictionary stored in the data list refers to one post in the user’s wall.

To display the posts in the user’s wall, we include fbgraph_newsfeed = fbgraph.get_connections(“me”, “home”)[‘data’] in our views.py and we then add the following code to our template page.

Step 7: Sometimes, obtaining the user’s photos is needed in the web application. This is also possible through Facebook’s Graph API. First we create a wrapper function in fbutils.py for the function fbgraph.request(‘me/albums’,args={‘access_token’:fb_access_token}) which returns a dictionary of data from Facebook. The wrapper function for obtaining the photo albums of the user will simply return a list containing an album’s name and id. The wrapper function is provided below.

The wrapper function above returns a dictionary with the form

Now we add the following lines of code in views.py to print the ids and names of each album of the user on the console.

Given the ID of an album, using the GraphAPI, we can get the information of all the images in the specified album. We create another wrapper function in fbutils.py for the function fbgraph.request(‘%s/photos’%album_id,args={‘access_token’:fb_access_token}) which returns a dictionary of data from Facebook. The wrapper function for obtaining the photos of the album of the user will simply return a list containing urls of each image. The wrapper function is provided below.

To test the wrapper function above, we modify views.py and include the code below.

The console should then have something like

To display all the photos in each album of the user, we modify views.py again to contain the code below.

We also include the following code in the template page as well:

The code above simply displays all the images inside the album successively. Clicking on the images will open a new page containing the original Facebook photo.

Step 8: Access to the Graph API for each user depends on the permissions allowed for the application. It is advisable to check the allowed permissions for the app before trying to gain access to any specific user information or action. This is possible through fbgraph.get_connections(‘me’,”permissions”) which returns a dictionary of the form:

The dictionary returned by Facebook contains only the keys of the allowed permissions. To check if a permission has been allowed for a specific request, we may do the following:

Notes: There is a lot more to Facebook Graph API and Facebook Python SDK than what I have described here. Be sure to check out the documentation for all the rest of the features. For reference purposes, the codes are shown below.

References: