This guide explains -- step-by-step -- how to create a Facebook application, into which you can publish a Zmags Publication directly from the Zmags Publicator tool.


Prerequisites
You must complete the following before creating a Facebook App:

• Have access to a Facebook "person" account that will act as the admin of the Facebook Page.
• Register a Facebook Page where the Zmag publication will be displayed.
• Ensure the Facebook page has the newest Facebook page design. New pages automatically get the new design, but if you are using an existing Facebook page, it may not be upgraded. Visit the site http://www.facebook.com/pages/status to check and upgrade your existing pages. It is suggested Facebook Pages are set as Brand / Product pages when created.

Step 1: Login to the Facebook developer portal

Start by logging into Facebook on the person account that will be acting as the main admin for the Facebook Page. Next, go to the URL http://developers.facebook.com, which is Facebook's developer portal. Click on the "My apps" link in the navigation bar at the top of the page.
 

Facebook's Developer area


Step 2: Authorize the Facebook Developer App

If this is the first time using the Facebook Developer Area a request to authorize the Facebook Developer App will be displayed. Click "Allow".

 
To create an App the developer App must be authorised


Step 3: Start creating the App

After granting permission to the Facebook Developer App you will be taken to the "My App" homepage. To create the new app, click the "Create New App" button in the top right.


Click to create a new App in Facebook

If a Facebook App hasn't yet been created by this account a prompt may be displayed requesting verification of the account using a mobile phone number or credit card. Select the preferred method, complete the steps and then refresh the page to continue.


Verify you details if required as a first-time user
 

Step 4: Application name

Following verification you will presented with the "Create Application" page. Choose a name for the app and agree with the Facebook terms to continue. The App name is not the text displayed on the Facebook page, so it can be descriptive, using words that might easily help identify the application in the future, such as 'ZBC eCatalogs'.


Set an application name

Facebook also requires completion of a CAPTCHA process as a security check.


Complete the CAPTCHA check
 

Step 5: Edit application

The "Edit My Application" page is for editing the app that has just been created. Here you can adjust a variety of  settings however, none of these settings are required for the Zmags feature to work. When finished, click the Settings > Basic section.


Select the "Basic" settings options
 
The "Page Tab" section (below) is where you configure the Facebook app, so it can find the Zmags viewer and open the correct publication. You can also edit the icon that is displayed next to the Tab name on your Facebook Page.


Edit the icon that will be displayed next to the App on the Facebook Page

In the "Page Tab Name" field, enter the display name for the App when it is added to a Facebook Page. Page administrators are able to customize this name after adding the App to the page, so this is just a default value. If you change this value after adding the app to a page, the name will not automatically update on the page.

In the "Page Tab URL" and “Secure Page Tab URL” fields, enter the full URLs displayed in the Page Tab URL and Secure Page Tab URL fields on the Facebook App page in the Zmags Publicator. It will look something like this:


The Edit URL fields under "Page Tab" are not needed. For the "Website" section enter the contents of the SITE URL field from the Publicator. After verifying the settings, press "Save Changes".


The fields to complete when creating the App using details from the Publicator

The other field you need to select an option for relates to the width of the App in the new Facebook Timeline layout.




Step 6: Update the Support Contact Email Address for the App and the Privacy Policy

These are mandatory fields for creating a Facebook App.

To update the Support Contact Email click the "Advanced" option for the App.


Select the "Advanced" settings option for the Facebook App

In this settings area scroll to the bottom of the page and find the "User Support Email" field. Complete this with a valid Email Address and then click the "Save Changes" button at the bottom.


User Support Email field, mandatory from April 1st

Above the User Support Email field is a field for Privacy Policy. This field will also need completing and the URL for a corporate privacy policy should be entered. Once entered click the "Save Changes" button again to save the contents of this field.


Privacy Policy field that requires a valid URL


Step 7: Copy the App ID displayed in Facebook to the Application ID field in the Zmags Publicator.


Copy the App ID from Facebook in to the Publicator

Click the "Add to Page" button to select the Facebook Page to add the App to

 This will open a new window from Facebook where the Facebook Page can be selected that the App is to be used on.


Select which page to add the App to


Step 9: Test the publication

Navigate to the Facebook Page where the App has been installed. Select the App from under the Cover Photo area and test it displays the Publication correctly (Narrow or Wide view) in the main Facebook Timeline layout.



Test your publication displays correctly

Note: If selecting the Wide view (2 page spread), the first page will act as a cover page (single page) and subsequent pages will be displayed as a 2 page spread. It is therefore suggested this 1st page be visual to draw users in to the experience.

This completes the tutorial for how to create a Facebook App and add a Publication to a Facebook Page.