The following instructions will get you started with a Facebook Page Tab application fit for development on your local machine.
-
Navigate to https://developers.facebook.com/apps and click on Create New App.
-
Enter your App Name (for e.g. "Hello World Dev") and your App Namespace (for e.g. "hello-world-dev"). Click continue.
-
Solve the Captcha and click continue.
-
You'd be taken to the basic settings of your new app. Under the Basic Info section, enter localhost for the App Domains section.
-
Under Select how your app integrates with Facebook. Select Page Tab and enter the Page Tab details. See the following for an example:
- Page Tab Name: Hello World Dev
- Page Tab URL: http://localhost:3000/facebook
- Secure Page Tab URL: https://localhost:3001/facebook
Click Save Changes.
-
That's it!
Let's now add the app to a Facebook Page. I usually created a new private page to house the app while it's being developed.
- Click App Details.
- Scroll down to the Contact Info section and click Create a New Facebook Page.
- Since we want to link the Facebook Page with our app, we'd select Brand or Product, agree to the Facebook Pages Terms and click Get Started.
- Follow the instructions and steps to get the page created.
- Finally, using https://www.facebook.com/dialog/pagetab?app_id=YOUR_APP_ID&next=https://www.facebook.com/, you need to replace
YOUR_APP_ID
with the App ID for the app you just created. Click the link and select the page(s) for which you want the app added. - Done!
If you now navigate to your private page, then you'd see a new tab with the name of your app. Click it. Nothing appears yet since we now need to create the app locally on our machine and serve it up to Facebook.