Since Little URL Shortener has been updated to allow users to register using their Facebook account, I thought I would write this little tutorial on how to integrate Facebook with Little URL Shortener. The following details registering a Facebook App and also how to have the Facebook App working with Little URL Shortener.

Step 1

The first step is to go to http://developers.facebook.com/apps which allows you to create and manage Facebook Apps. If this is your first time visiting this website, then you will be asked to allow Facebook Developers to access your basic information. Click “Allow” if you’re prompted.

Step 2

Next, you should be shown a page which shows your Facebook Apps you created already (or none if you haven’t already). Click the button “Create New App” in the top right corner to create a Facebook App (as shown below).

Facebook Create App Button

Step 3

You should be seeing a window that popped up when you clicked “Create New App”. The only field here you need to worry about is “App Name”. Since we’re creating an app for users to login with, you may want to put something like “XYZ.com Login” as the app name. After you figured out what your naming the app, click “Continue”. (You may want to have a peek at theĀ Facebook Platform Policies.)

Facebook Create App

Step 4

After you’re done telling Facebook that your human by filling out the CAPTCHA, you’ll be redirected to a page which shows your Facebook App details. In order for Facebook to work properly with your website, you need to white list your website address with your Facebook App. Under the field “App Domains”, you’ll need to enter your website’s domain name (in this case, it’s “7ls.net”). Next, check the “Website with Facebook Login” section and the website address where Little URL Shortener is located (in this case, it’s “http://7ls.net”). Finally, click “Save Changes”.

Facebook App Info

Step 5

Now you will need to take a note of the “App ID” and “App Secret” that are shown at the top of the Facebook App website. There a couple ways on how you can configure Little URL Shortener with Facebook, so I’ll show you both.

The first (and simplest) way is to navigate to the install.php file on your website, there you just check “Enable Facebook Login” and enter the App ID and App Secret in the following boxes.

The other way is to edit the config.php and add the Facebook App information as shown below. An example of the full config.php file can be found here on GitHub.

[highlight lang=”php”]
// Facebook login
define(‘FBLOGIN_ENABLED’, false); // Set to true to allow Facebook login
define(‘FBLOGIN_APPID’, ‘YOUR APP ID HERE’); // Facebook App ID
define(‘FBLOGIN_APPSECRET’, ‘YOUR APP SECRET HERE’); // Facebook App Secret
[/highlight]

After you’ve configured Little URL Shortener and made sure everything is working fine, then you’ll need to take your app out of sandbox mode (if it’s not already). To do this, go back to http://developers.facebook.com/apps, select your app and change “Sandbox Mode” from “on” to “off”.

I hope that I have made it a little bit more clearer on how to get a Facebook App setup. If your looking to download Little Shortener, then you can download the latest version from GitHub. Or, you can browse the source code of Little URL Shortener if you wish. If you have any questions or comments, please leave them in the comments below.