Chapter 2 Setting up Facebook Apps

2.1 Creating an App on Facebook

The first step is to log in to the Facebook Developers site using your personal FB account and click the Create New App button in top right corner.

You will get a popup where you need to enter the name of the App. For example, if you want the app to show a widget that displays the list of top rated products, enter something like "Top Rated Products" as App Name:

On the next step you will need to enter the captcha text. After that, you will go to the app summary page where you need to enter the required info.

First fill in the Basic Info. You can leave the Sandbox Mode enabled for now (only you as admin will see the app). Disable the Sandbox Mode only after you finish setting up the app and test everything.

Under "Select how your app integrates with Facebook" choose App on Facebook and Page Tab:

Populate the App on Facebook and Page Tab settings and click Save Changes:

Page Tab Name - this is what will be displayed to visitors of the FB page.

Page Tab URL - for now enter the url to your site (later it will be replaced with an URL generated by the FB App Factory Add-on).

Secure Page Tab URL - for now enter the url to your site with https (later it will be replaced with an URL generated by the FB App Factory Add-on).

Page Tab Image - upload an image for the tab. The image must have 111 x 74 pixels dimension.

2.2 Creating an App in the FB App Factory Add-on

In the FB App Factory Add-on click the Application link in the sidebar. Next click the New button in top right corner and populate all required info for the app:

Title - enter that title of the app that users will see on your site.

State - choose Yes if you want the visitors of your site to be able to add the app to their Facebook pages.

Select Widget Type - choose which widget will be shown in the app. The widget must be previously setup in the WidgetFactory Add-on.

FB App ID - you will find the App ID in your app details on Facebook.

FB App Secret - you will find the App Secret in your app details on Facebook.

Description - description of the app that visitors of your site will see.

FB App HTML - anything you enter here will be displayed above the widget output in the app on Facebook.

After you populate all required fields, click the Save button. Next in the list of apps click the Grab URL for use in FB App button and you will get a new url for your Facebook App settings:

Next, go back to Facebook, edit the App that you created and in the App on Facebook and Page Tab replace the existing URLs with what FB App Factory Add-on generated:

For the Secure Page Tab URL enter the same URL, just use "https" instead of "http".

The setup is now completed.