How to Develop Locally with the Facebook API

Published  April 18th, 2011

When you create a Facebook application, they require you to give them the domain of your website that will be accessing the Facebook API. The Facebook app keys they supply you with are only valid through the domain of the URL you listed. This strikes the following question: how do you develop locally if your development domain is something like 0.0.0.0:3000 or yourapp.local? The answer is SSH remote tunneling. You use a service to connect a port on your local machine to an open port on a public server somewhere (preferably securely). I've been using tunnlr.com to do this. Tunnlr is not the flashiest service, but it works really well. The following tutorial was made based on my experience with a Rails app, thredUP.com, that I develop for. I'm not sure how useful this tutorial will be to you if you're using a different framework.

Tunnlr Account

Once you sign-up for an account at Tunnlr, you will be given your Tunnlr URL. It will look something like http://web1.tunnlr.com:11908. Write this URL down, you'll be using it later. While you're on your Tunnlr account page, you'll find a section towards the bottom that says 'Need help?'. Follow the steps listed under 'How do I use Tunnlr with Rails' including the plugin and two gems along with created the tunnlr.yml file. I'm not positive you need to do this for creating manual tunnels, but I did just in case. The remote port variable is the number at the end of your tunnlr URL. For example, if your URL is web1.tunnlr.com:11908, your remote port would be 11908. Tunnlr says to use port 3000 for you local port, but I've been using 80 because of some issues I ran into with our app.

After everything is configured, it's time to get this baby up and running. I've always deferred to creating a manual tunnel as opposed to doing any rake tasks, but to each their own. The command to do so is in the 'How do I manually start a tunnel?' help section. It should look something like this:

In this example, 11908 is your remote port number and 2202 is your user number, which you can find on your Tunnlr account page. If you plan on tunneling a lot, I suggest creating a bash alias like this:

Now I can just type 'tunnelme' into my terminal any time I want to test Facebook locally. So assuming you're ports are ok and your local development server is running, you should be able to go to your Tunnlr URL (i.e. http://web1.tunnlr.com:11908) and view your local app. If this doesn't work and you have good reason to believe it has nothing to do with your local development, try adding the facebooker.yml file that is detailed in the 'How do I use Tunnlr with Facebooker?' help section.

Facebook Setup

Assuming your tunnel is good, now you're going to need to setup a second Facebook application to develop locally. Go to Facebook developers page and create a new application. When they ask you for your Site URL, paste your full Tunnlr address (http://web1.tunnlr.com:11908). For the Site Doamin, just put web1.tunnlr.com. Boom, you're done. Enjoy :)

Parting Gift

Most Rails apps have different config files for each environment such as development, test, and/or production. This is really convenient in the context of developing for Facebook applications as this is great way to handle having different App ID, API Key, and App Secret variables. Definitely setup your Facebook app in a way that is indifferent of what environment it's running on.

If you have any questions about setting this up or I messed up somewhere along the way, leave a comment below and I'll follow up the best I can.