Local setup for Facebook Connect app development

Local setup for Facebook Connect app development

As you might know, if you wish to work with Facebook Connect it requires your development site to be accessible to it for security reasons. So that it can verify that you (your application) have rights to access certain information from its users. In this article, in short, I’ll show you how to make your local development machine accessible from the internet. If that’s what you need, read on!

There are 3 main steps you need to do in order to accomplish this kind of accessibility:

  • Getting the Accessibility
  • Setup of local host
  • Generating Facebook API key

So, to move on:

Getting the Accessibility

For this I chose free DynDns service. Basically what it does is that it gives you a domain you chose that will represent your local connection IP (that your ISP provided).
In order to complete this part you must do the following:

  • Go to that site and register for free
  • Create a new (add) host, with “hostname” you want
  • For “Service Type” field, chose “Host with IP address”
  • And if it isn’t already set, enter your IP
  • Save the changes

Just so that this article would be easier to follow, for my “hostname” on DynDns, I chose “myproject.dyndns.org”.
And those few simple steps conclude this first part of “getting it done”. 😀

Setup of local host

In this part it all comes to 2 files – “httpd-vhosts.conf” and “hosts”.

Now their location depends on you local setup. Here’s a link that explain the basics about virtual hosts if you haven’t heard of them before.

My sample setup for “httpd-vhosts.conf” is as follows:

<VirtualHost *:80>
    ServerAdmin webmaster@marcus.lc
    DocumentRoot /home/mladen/workspace/myproject.dyndns.org/
    ServerName myproject.dyndns.org
    <Directory "/home/mladen/workspace/myproject.dyndns.org/">
	Options Indexes FollowSymLinks
	AllowOverride all

And in “hosts” file, I’ve added this line:    myproject.dyndns.org

And that’s about it for second part.

Generating Facebook API key

First, go to Facebook Developers page, enter App Name as you wish, and on next step confirm it.
On next screen’s left side you’ll see “Web Site” link. Follow it and enter URL like this: “http://myproject.dyndns.org/”, and for Domain enter: “myproject.dyndns.org”. Save changes.

Guess what, now you have your “Application ID” and “Application Secret” and all you have to do is start with the development. If this will be your first Facebook application, this is a good place for start.

I hope it was helpful, cheers!

You made it all the way down here so you must have enjoyed this post! You may also like:

Setup scripts in Magento 2 Ivan Weiler
Ivan Weiler, | 11

Setup scripts in Magento 2

Magento tip: Get a small sized version of a large production database Tsvetan Stoychev
Tsvetan Stoychev, | 10

Magento tip: Get a small sized version of a large production database

(Not only) Magento .gitignore generator Darko Goles
Darko Goles, | 11

(Not only) Magento .gitignore generator


  1. I am a .net developer and I was having an issues which wasted my day.

    Create app give app name agree to the agreement and
    Enter Captcha code
    In website section enter Site URL do not enter Site Domain
    In App on Facebook section enter Canvas URL do not enter Secure Canvas URL
    Save changes and happily run your application from vs 2008

    Note: Make sure that your port is fixed in the project.

  2. Dear Sir, you didn’t mentioned anything about setting up magento accordingly. Like we have core_config_data and in that we store web secure/unsecure as localhost.com/magento and in host file we do localhost.com . So does this change also require? If no then when we type myproject.dyndns.org in the browser. Magento will not start

  3. Since FB just redirects to the URL that you specify when you created the FB app, why can’t you just use localhost or a fake URL in the app settings, and have your app running locally at that URL (may need to modify the hosts file on the local machine)? My point being that FB doesn’t actually determine that the URL is a real, live site on the internet for authentication.

  4. Yeah, thanks, Toni. I know port-forwarding technics, but I wanted to point, that being behind some router/firewall makes dynamic dns services much more hard to use.

    You need to setup traffic forwarding. And you need to distinguish local ips if there are not only you but other developers working with callback services.

  5. @Andrey you can use an ssh tunnel from your machine to a remote server that is accessible from the internet, e.g.

    ssh -N user@example.com -R 8090:localhost:80 ServerAliveInterval=30

    This will forward any incoming connections on example.com:8090 to your localhost:80.

    To make it work, on the remote server, add to the sshd config

    GatewayPorts yes

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <blockquote cite=""> <code> <del datetime=""> <em> <s> <strike> <strong>. You may use following syntax for source code: <pre><code>$current = "Inchoo";</code></pre>.

Tell us about your project

Drop us a line. We'd love to know more about your project.