Just realized that I really have not done programming for a long time. It is not a good practice to express so much personal emotion on a technical blog. So let me stop here and keep pretending everything is alright.
Nowadays many societies use Facebook pages to publicizes their activities. And many of them also have a website. And I happen to be in some of these societies. As a lazy person, I do not really want to manually synchronize the event list between Facebook and the website. So I do some little research and find out that we can fetch Facebook event list via Facebook’s Graph APIs and display it onto our website. In this post, I will show you how to do it.
So the rest of this post is written in the style of a tutorial. Well for those who are skilled in web development, I believe what you need is this link about event API for a Facebook page. :)
Assumptions
This tutorial will assume that there is a facebook page you can access, and you want to display its event list to your website (in any format you want).
I also assume that you can make a website up and running yourself (not on some auto website make platforms).
However, I am using the NTU Open Source Society’s website as an example. And this website is running on Google App Engine and using the Python programming language version 2.7.
Using Python Facebook SDK
If you are using Python and you are not going to implement a Facebook Graph API client again, you will like to use this SDK.
To install it, you might use the following command anywhere in your terminal.
pip install facebook-sdkIf you have not install pip on your computer, you might read more about it here.
Because I am using Google App Engine, I need to copy the installed package to project directory.
Here I would like to give you a tip on how to know where one global package is installed on your computer.
Step 1: Get into your Python terminal by typing python in the terminal.
Step 2: Import the package you want to locate, and print the value of file attribute of it.. In this example, it would be as follows.
import facebook
print facebook.__file__Now you will know the facebook sdk is installed as a single Python file. In my computer it is located at
/usr/local/lib/python2.7/site-packages/facebook.py. You might simply copy the facebook.py (not the
.pyc file) to your project directory, or you might simply make a symbolic link of it if you want to.
Get a permanent access token
You will need an access token to use the Graph API. To fetch the event list, any access token will do.
Obviously, you don’t want your user to log into their facebook on your website before they can read the event list.
So you may want to get a permanent access token, which is called App Access Token.
To do so, you will need to create a Facebook app. After that, will will have an App ID and an App Secret on your app’s dashboard. Our Python SDK can help us get the access token with the two value.
import facebook
access_token = facebook.get_app_access_token(APP_ID, APP_SECRET)
print access_tokenFetch the event list
The Facebook’s page event API allows you to access the event list of a facebook page. By default, it will only return the events within past two weeks. However, you are able to specify the range via parameters since and until.
Below is an example using the since parameter. And this example (since 0) is to return you all the events the page.
graph = facebook.GraphAPI(access_token)
result = graph.request("/ntuoss/events", {
"since": 0
})Specify the fields you need
Now you have already have the event list. But you might probably want to specify what you need to know of each event.
Below is an example modified form the previous code. It customize the return filed by the fields parameter.
result = graph.request("/ntuoss/events", {
"since": 0,
"fields": ["name", "cover", "picture", "start_time", "location"]
})You might read more about all kinds of fields here.
Display it
This should be very easy if you do any web programming before.
In my website, to speed up display the web page to the user, I separate the fetching event process to a AJAX method that will be called once the event page of the website is load by its JavaScript. Below is the complete code.
class HacksEventsHandler(webapp2.RedirectHandler):
def get(self):
import facebook
access_token = facebook.get_app_access_token(APP_ID, APP_SECRET)
graph = facebook.GraphAPI(access_token)
result = graph.request("/ntuoss/events", {
"since": 0,
"fields": ["name", "cover", "picture", "start_time", "location"]
})
events = result['data']
return_event_list = []
for event in events:
if "cover" in event:
cover = event['cover']['source']
else:
cover = None
return_event_list.append({
"id": event['id'],
"name": event['name'],
"cover": cover,
"picture": event['picture']['data']['url'],
"location": event['location'],
"start_time": event['start_time']
})
import json
return_object = {
"status": 0,
"data": return_event_list
}
self.response.headers['Content-Type'] = 'application/json'
self.response.write(json.dumps(return_object))To display it onto the web page, I use a JavaScript library called underscorejs. Below is the code and only follow it if you like it.
The CoffeeScript code.
eventItemTemplate = _.template $("#event-item").html()
$(document).ready ->
$.ajax
url: "/tgifhacks/events"
dataType: "json"
success: (data) ->
$events = $("#events")
$events.html ""
events = data['data']
for event in events
$events.append eventItemTemplate(event)The JavaScript version.
var eventItemTemplate = _.template($("#event-item").html());
$(document).ready(function() {
$.ajax({
url: "/tgifhacks/events",
dataType: "json",
success: function(data) {
var $events, event, events, _i, _len, _results;
$events = $("#events");
$events.html("");
events = data['data'];
_results = [];
for (_i = 0, _len = events.length; _i < _len; _i++) {
event = events[_i];
_results.push($events.append(eventItemTemplate(event)));
}
}
});
});The underscorejs template in the HTML page.
<ul id="events" class="block">
Loading...
</ul>
<script id="event-item" type="text/html">
<li>
<div class="img">
<img src="<%- picture %>" />
</div>
<div class="name">
<a href="https://www.facebook.com/events/<%- id %>/" target="_blank"><%- name %></a>
</div>
<div class="location"><%- location %></div>
<div class="date"><%- start_time %></div>
</li>
</script>In the end
The final work can be view on NTUOSS’s website.
Please share your experience with me if you find this post useful.
And if you are a student in NTU, you are always welcome to join our Open Source Society!