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
    </Directory>
</VirtualHost>

And in “hosts” file, I’ve added this line:

127.0.0.1    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!