Last updated October 23, 2010. Created by aangel on October 22, 2010.
Log in to edit this page.

These instructions are for Mac OS X but they should be similar for other platforms.

Goal

Instead of hosting your Facebook application on a public server, be able to debug a Facebook application running on your local machine behind a firewall.

Requirements

A Drupal development environment with debugging already working. For more on how to do this, see Setting up a Drupal development environment

I'm running MAMP, which provides Apache, Mysql and PHP in one installation. XAMPP is similar and runs on multiple platforms. By default, MAMP responds to queries on port 8888 so in my case I needed to tell Facebook to communicate on that port. If you are running your web server on port 80, the standard port, you can omit the port number entirely.

I'm also running Aptana Studio (a fork of Eclipse) as my integrated debugging environment and XDebug as the debugger.

Steps

For Facebook to display your app, your local machine must be visible to it. If you have a static IP, you can point Facebook to your local machine and you're done. If not, there are a few more steps.

  1. Find out your IP using WhatIsMyIP.com. Since it is dynamic it won't always be this number but it usually won't change very often.
  2. (optional) Obtain an account at a free dynamic DNS service like dyndns.com. Select a domain name (like myfacebookapp.dyndns.org) and assign your dynamic IP to it. With these services, the Net should be able to see that domain instantly. If you don't use this sort of service, just use the dynamic IP address instead in the instructions below.
  3. You likely have a router between you and the Net so you will need to forward port 8888 to your local machine (or whatever port your web server listens on). Often your router (or gateway) is accessible at 192.168.1.1 or 192.168.0.1. If you need instructions for forwarding your router, see PortForward.com, which has collected them for many brands and models.
  4. If you have a cable modem or other modem, they usually pass all traffic and require no forwarding.
  5. Adjust your webserver virtual host configuration so that it responds to requests for domains it doesn't know about. If you have multiple virtual host entries, do this by placing the Facebook virtual host entry first. My configuration on Apache 2 looks like this:
    NameVirtualHost *
    <VirtualHost *>
            DocumentRoot /Applications/MAMP/htdocs/dffb/drupalforfacebook/htdocs
            ServerName dffb
    </VirtualHost>
    <VirtualHost *>
            DocumentRoot /Applications/MAMP/htdocs/physics
            ServerName phys
    </VirtualHost>
    etc.

    If you need to work with multiple apps, you'll need to adjust the virtual host entry to respond to exactly the domain being requested.
  6. Reboot your web server. At this point, you should be able to reach your application locally via the server name ("http://dffb:8888") as well as your new dynamic domain name ("http://myfacebookapp.dyndns.org:8888"). See Tip 2 below for more on which domain to use.
  7. Use this new dynamic domain name in your Facebook app settings wherever a domain is called for:
    Web Site
    Site URL: http://myfacebookapp.dyndns.org:8888

    Facebook Integration (these will be set for you by Drupal for Facebook)
    Canvas URL: http://myfacebookapp.dyndns.org:8888/fb_cb/7bbf6ed10e75f59c09c6531e7a965...
    Post-Authorize Callback: http://myfacebookapp.dyndns.org:8888/fb_app/event/7bbf6ed10e75f59c09c653...
    Deauthorize Callback: http://myfacebookapp.dyndns.org:8888/fb_app/event/7bbf6ed10e75f59c09c653...

  8. When you call a page from Facebook, Facebook will now query your local machine. You can now debug the same local code that Facebook calls by calling http://myfacebookapp.dyndns.org:8888 directly.
  9. Extra

    Some dynamic domain host services have applications that run on your local machine and will notify them when your dynamic IP changes. Some routers have this notification capability, too. I have found that my IP changes so rarely I haven't bothered to set this up.

    Tips for Local Debugging

    Tip 1:
    A convenient setup is to use the browser through which you debug to also be the one that is the Facebook user. Open another browser (i.e. Chrome if you are using Firefox) and log into your application as administrator there for when you need to make configuration changes.

    It's important that you use a different browser (or the incognito function of Chrome) when logged in a user 1 so that you do not associate a Facebook account with your administrator (user 1) account.

    Tip 2:
    Once you access your local Facebook installation via myfacebookapp.dyndns.org, use only that address. Using the server address ("http://dffb:8888" in the example above) will corrupt the settings on Facebook. Don't use Facebook connect, either.

Looking for support? Visit the Drupal.org forums, or join #drupal-support in IRC.