How to create and configure a Facebook app

In order to create a new Facebook app, you need to navigate to this URL: https://developers.facebook.com/apps

Creating a new app

At the top right section of the page, locate the link "Create New App". Once clicked you should get a dialog to complete some basic app information. You need to specify your app name.

The App Namespace

The "App Namespace" is optional but we suggest you to specify one if you want to get your app accessible on Facebook through a URL of this type: https://apps.facebook.com/YOUR_NAMESPACE/

So let's say that your app name is "Mind Reader Game", and that you want your game to be accessible through this URL: https://apps.facebook.com/mind_reader_game/. You would need to define "mind_reader_game" as your App Namespace.

You can hit Continue to create your app. Facebook may require you to type-in a captcha code as a security check and to make sure you are human !

Your app general settings

Once your app created, you should get redirected to a page similar to this screenshot.

First of all, you need to set the sandbox mode to disabled. Otherwise other users may not be able to connect or use your app. Second, you need to define your "App Domain". That should be the domain where you are running your app. Example: "yougapi.com".

Note that the App Domain cannot contain any "http://" in it. If you are using a URL starting with www, then you need to define your domain name starting with a www. Example: "www.yougapi.com". You can also define a list of several domains. Example: "yougapi.com" and "www.yougapi.com".

We advise you to choose only one way to access your pages (using a www, or not using any www) and have only one App Domain defined. Website with Facebook login If you are running an app (PHP application for ex), that implements the Facebook connect feature like does, you would need to click on the "Website with Facebook login" section and define your "Site URL". Make sure to pay attention to the way your app will be accessed (using a www or without a www).

Both ways are fine, but you need to be consistant. So if you access your PHP app without any www in the URL, then the "Site URL" defined shouldn't contain any www in it. The Site URL should start with an "http://" and be the full URL of your app. Here is an app example we are running: "http://yougapi.com/products/mind_reader/", so the "Site URL" that we would need to define would be the exact previous URL. Easy isn't it?

App on Facebook

This section is only needed if you want your app to be accessible on "https://apps.facebook.com/YOUR_NAMESPACE/". If you have already previously defined your app namespace, you should see the URL of your canvas page where you app can be accessed on Facebook. But if you navigate to that canvas page, you will notice that there is no content. The page is empty, and that's normal since you didn't define any canvas URL yet.

What is a Canvas URL

That's simply the URL where you have the application or page, hosted on your server. In our case it's hosted on "http://yougapi.com/products/mind_reader/". Two Canvas URLs need to be defined, one starting with "http://" and the other starting with "https://" for a secure access to that page. That's one one the new Facebook requirement to enable all the Facebook users to be able to access your app on Facebook.com

We recommend to keep the height setting as Fluid, but for the width it's up to you! We like using the fluid width to maximize the space and having less vertical scrollbars. Once you have defined both Canvas Urls, you can access the canevas page, and be able to view you app there.

Here is how our final Facebook app settings looks like. You can access our Mind Reader Game in 2 different ways:

1. Directly on its URL: http://yougapi.com/products/mind_reader/
2. On Facebook.com: https://apps.facebook.com/mind_reader_game/ If you have any questions feel free to ask in the comments section !