Google Code offered in: English - Español - 日本語 - 한국어 - Português - Pусский - 中文(简体) - 中文(繁體)
This article was written and submitted by an external contributor. The Google App Engine team thanks Omar Abdelwahed for his time and expertise.
Omar AbdelwahedCreating a Facebook application can be an exercise in gleaning arcane knowledge from multiple online sources. In particular, it is often hard to find an example of what should be a common practice: hosting a Facebook app on Google AppEngine. This article will attempt to turn the "arcane" into everyday knowledge and provide a useful example by integrating Best Buy's Remix API and iLike's Music API to search for music products that users of our application can listen to and then purchase.
We won't cover all the basics of setting up individual platforms and API's for use but rather concentration on the integration points. If you are new to any of the following, be sure the read the corresponding startup guides:
For each of the above, you'll need to register and utilize the corresponding API keys where required.
Note:This article assumes the developer is working locally on Windows (and sitting comfortably at his or her favorite café), however this is not required (the café is however). Most of what is covered will easily translate to your development environment of choice. Windows-specific items will be noted where possible.
Download the source code for our example application here:
http://code.google.com/p/shelftalkers/Place the project in a location of your choice. We'll refer to this code throughout the article.
Assuming you've downloaded AppEngine (if not, before sure to read the guide above), go to your project source directory and open shelftalkers.py
in your favorite IDE or text editor. (Python's IDLE was installed as part of your development environment in Google's "Getting Started" guide.) At the top of shelftalkers.py
are four API keys that you need to fill out.
_FbApiKey
: This is the API key provided by Facebook when you create a new app. More on this below._FbSecret
: This is your FB app's secret key. Never share this outside your server hosted code. This is also provided by Facebook for each app you create._BestBuyRemixKey
: This is API key to access Best Buy's full product catalog and store information. Amongst the many features, it lets you find products in stores near you and online at BestBuy.com. This key is provided to you when you register as a developer for Best Buy Remix. You can use either "development" or "production" keys here. Of course, use production keys when you release your app to the public._iLikeDevKey
: Like Remix, this is the API key to access iLike's streaming music API. You receive this key when you register as a developer.Take a look at the top declarations of shelftalker.py
. Most of the imported libraries are explained in Google's "Getting Started" guide. The others are described here:
import xml.etree.cElementTree
: We use this library to parse returned XML data from API calls to Remix.import facebook
: This is the Python wrapper for calls to the Facebook API. You can find this wrapper inside the facebook.py
source file.Save your code changes.
On Windows, open a command line to launch AppEngine locally. AppEngine starts using the installed dev_appserver.py
server. Enter this command substituting the paths for both your local AppEngine install and ShelfTalker's source code:
google_appengine/dev_appserver.py shelftalkers/
You should now have a local copy of AppEngine running on http://127.0.0.1:8080. Don't try to browse this just yet. We need to create your app on Facebook next!
In order to create applications on Facebook, you have to install Facebook's Developer Application. The Developer Application is the hub where your applications are defined and developers can commune with one another. (Again, you can read all about this in the above guide.)
Click the "Set Up New Application" button at the top of the Developer Application page.
You can now define the properties of your application: its name and integration points into users' profiles, for example. Two things we'll concern ourselves with now are the "Callback URL" and "Render Method" (under Canvas Settings). The Callback URL will eventually point to your code hosted on Google AppEngine. For our example (and likely most of the applications you create like this), we'll set the Render Method to "IFrame" which allows us more freedom in our app implementation.
For now, do the following:
shelftalkers.py
. Save your changes. AppEngine will automatically detect the changes and serve them.Now, for the moment of truth. Facebook applications are addressed by their canvas URL. For example: http://apps.facebook.com/shelftalkers/ where "shelftalkers" is replaced by what you provided in your FB app's settings. Be sure you are logged into Facebook, and enter your app's canvas URL into your browser. If all goes well, you'll see your app running locally!
Of course, not everything goes as plan. Some basic trouble-shooting tips:
So we have a running application on Facebook and Google AppEngine. What does it do? Glad you asked... "ShelfTalkers" has a basic premise. Users enjoy entertainment like music and they wish to start conversations around what they love. A simple text box lets people talk about their favorite music artist and attach sample music to their comments. This is posted to their Facebook pages for others to read, listen and continue the discussion.
Our basic application uses the Best Buy Remix API to search for the products first, so that later we can provide locations for users to make purchases. The returned search list feeds the iLike API to return associated music streams for the artists found. In the end, a sample Facebook post, including cover art, music sample and comment is shown for the user to choose to post to his or her page.
Note that our basic application is not feature complete. It is meant as a start primarily to teach how to create and host a Facebook application on Google AppEngine and provide a simple example of the Best Buy Remix API and iLike API. What is missing?
Now that your app works locally, we need to share it with the world! Uploading your app to Google AppEngine is well described in the "Getting Started" guide here: http://code.google.com/appengine/docs/python/gettingstarted/uploading.html.
The one thing to note is what you call your app on AppEngine. Open the app.yaml
file in your source directory. The first line marked "application" is the name of your app. You must change this to correspond to the name you define on AppEngine at https://appengine.google.com. AppEngine will provide you with an URL to call your application. It will be of the following form (substitute your_app_id
):
http://your_app_id.appspot.com/
Follow the directions to upload your app. Go back to your Facebook application settings and replace the Callback URL with this new URL on AppEngine. Save your changes and you are now serving your Facebook application on Google AppEngine.
Here are some sources for more advanced development.
Searching with the Best Buy Remix API:
http://remix.bestbuy.com/docs
Facebook Feeds and Posting Stories:
http://wiki.developers.facebook.com/index.php/Feed
jQuery and AJAX:
http://docs.jquery.com/Ajax
PyFacebook -- Python Wrapper:
http://wiki.developers.facebook.com/index.php/PythonPyFacebookTutorial
http://code.google.com/p/pyfacebook/
Omar Abdelwahed is a Producer at Ubisoft Entertainment. His work focuses on producing games for social networks and connecting devices that are proliferating today's world. (In short, he gets paid to play with Facebook on his iPhone.) While at Best Buy, Omar led the development of the Remix Open API (http://remix.bestbuy.com/) that allows mashup developers access to Best Buy's product catalog and store information.
Omar can be contacted at the following sites...
Twitter: appleweed
Facebook: Omar Abdelwahed