Facebook Apps with Google App Engine

June 29th, 2009 - Programming

The internet's simplest introduction to writing a facebook application with Google App Engine, in Python, with Django.

So let's start with an easy introduction to writing a facebook app with app engine. First of all, you need to sign up for an application with Facebook. You can do this here, just click "set up new application" once you've added the facebook developer application, and give them your preferences. You should then come to a page full of settings, with titles like "Essential Information", and "Basic Information". Use the navigation on the left to edit the "canvas" settings. Keep this page open.

Now you must sign up for a new application with Google App Engine. That can be done here. Next, you need to write your standard app.yaml file (To illustrate the process, I'm going to be making a simple counter, to count how many times an application "canvas" is viewed). I'm going to call my application "fbstcntr" (as in "facebook stat counter") The app.yaml file is going to look like this (the stylesheets director is for you to use later when designing your canvas):

application: fbstcntr version: 1 runtime: python api_version: 1 handlers: - url: /stylesheets static_dir: stylesheets - url: /.* script: main.py

Now go back to the facebook settings page, and where it says "Canvas Callback URL", enter http://(your-application-name).appspot.com. Also, enter the name of your application in "Canvas Page URL".

Next, you'll need to make your canvas.html file (this is the one that facebook will use for your application's canvas). Mine just looks like this (remember I'm using Django, but that's by no means essential for this tutorial):

Save this file in the same folder as your app.yaml file (the folder I'm using is just called "fb"). Next, we'll make our main.py file - this is where things get slightly more complicated, but I'll keep it simple yo.

import cgi import os from google.appengine.ext import webapp from google.appengine.ext.webapp.util import run_wsgi_app from google.appengine.ext.webapp import template from google.appengine.ext import db # this is a file we'll make next import facebook # just a little datastore model class Stat (db.Model): visit = db.IntegerProperty(default = 0) class Canvas(webapp.RequestHandler): def get(self): #these are found in facebook's 'My Applications' page _FbApiKey = 'your api key' _FbSecret = 'your secret key' # Add an element to your datastore visit = Stat() visit.put() # find out how many elements there are in the datastore query = db.GqlQuery("SELECT __key__ FROM Stat") results = query.fetch(1000) stat = str(len(results)) # put this value in your template values template_values = {"stat": stat} path = os.path.join(os.path.dirname(__file__), 'canvas.html') self.response.out.write(template.render(path, template_values)) application = webapp.WSGIApplication(('/', Canvas)], debug=True) def main(): run_wsgi_app(application) if __name__ == "__main__": main()

Save this file as "main.py". Next, visit this page, and save all of that code straight into a file called "facebook.py", and make sure that file is in the same folder as the rest of your application. Well done! You've just made the skeleton of your facebook application! Now, run your command prompt, and make it go to where your application is stored (its directory). For me it looks like this:

D:\Graeme\Work and Fun\Python\GAE\fb:

Type in "appcfg.py update " and the name of the file that is holding your application files. Fire this off and it will update your application!

Every time you visit this application's page at apps.facebook.com/your-app-name/, it will update the datastore and display the amount of visitors that have been there previously. You can grow this application more by working on your canvas.html file, and including more functions that are available with facebook.py. There are so many possibilities still for facebook apps, and now you can make them and host them for free off Google's servers - so best of luck!

PyThoughts

4 Comments

Comment by kakaq

A good hello worldish article. I want to try my hand at fb apps on GAE, as i really like python and the GAE platform too.

Will be creating a test app tonight. Since I want to test how I can use JS animations and ajax on FB, here is what the test app of mine would do - 
name - 'crap test'
1. show 2 buttons 'get crap' and 'put crap'
2. pressing 'put crap' shows an animated textbox where the user enters gibrish and submits.
3. ajax call to the app and text saving in datastore
4. ajax reply confirming save
5. 'thank you' message display
6. pressing 'get crap' button makes ajax call to get the latest text added by any user
7. text is displayed with an animation

reply to this comment

Comment by graeme@pythoughts

@kakaq: Hey kakaq,

That's great to hear, let me know when you've finished building it - I would be more than happy to check it out and give some feedback. It's a really interesting idea - it sounds pretty exciting. I would wonder whether you're going to have some sort of filter for spam, etc.?

By the way, right after you posted your comment I went and changed the design for the commenting section - I hope you like it!

Graeme

reply to this comment

Comment by Joby John

Nice introductory post. Sure a lot of people will find it userful. I like the design too ! How do you plan to use the facebook.py ? I am pretty sure it is outdated.

reply to this comment

Comment by Danny Tuppeny

Nice article. I've recently discovered App Engine and was looking for some interesting things to do with it. Facebook looks like something fun to play with :-)

reply to this comment