This guide details the process for setting up a Facebook App to which you may publish an activated Zmags Publication.
Note: For customers using our CommercePro solution, the process varies slightly. If that is the case, please see the following tutorial instead:
Creating a CommercePro Facebook App
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.
- Optional but highly recommended: for best results, ensure that your publication is using individual pages and not spreads stuck together into one page each.
Part 1: Create or Edit an App on Facebook
1) Start by logging into the Facebook Developers Portal. Hover over "My Apps" on the top right hand side of the screen and select "Add a New App" or edit one you've created already (see below). Choose one of the two now.
2) If this is your first time using the Facebook Developer Portal, a request to authorize the 'Developer' App will be displayed. Click 'Allow' to continue.
3) 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.
4) Following verification you will presented with a platform select dialog. Choose "website".
After that, you will see the Facebooks "Quick Start" wizard, which for our purposes you will want to skip:
5) Next you will be presented with the "Create New App ID" popup. Choose a name for the application, select a Category, add your email address, 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'.
Facebook also requires completion of an image security check as seen below (images will vary):
5) You will be taken to the application dashboard page at this point. Click "Settings" on the left to access the basic settings page, as pictured below.
Part 2: Create or Edit an App on Zmags
1) In a separate browser window, log into the Zmags Publicator.
2) Click "Facebook Apps" on the left side.
3a) Click the green "Create a Facebook App" button...
3b) ...or if you already have the app created, click the pencil in the "Edit" column.
4) Type an "alias" to use for this App in the Publicator's list.
5) Select the publication you want to display from the "Publication" drop-down menu.
Part 3: Transfer Settings between Facebook and Zmags
1) In the Facebook settings, start by clicking "Add Platform" and then "Website". Click "Add Platform" a second time and then "Page Tab".
2) Once you've done that, you'll see there are more places available to fill in Application settings. Copy the settings between Facebook and Zmags as pictured below:
3) You'll want to fill out these settings as well:
- Display Name: The name used for your application on the Facebook apps website.
- Page Tab Name: The customer-facing name used on your application's page.
- Contact Email: Address at which your readers may reach you for assistance.
4) Additionally, be sure that you select the same page width on both Zmags and Facebook:
5) You may at this point choose an image to be displayed next to the tab name on your Facebook page. Simply click the icon below "Page Tab Image" on Facebook and choose a file to upload. It should be a JPG, GIF, or PNG with 1MB filesize and dimensions of 111 x 74 pixels.
6) Once all that is done, click "Save Changes" on Facebook and "Save" on Zmags. (You will then need to re-open the Zmags settings by clicking the pencil icon in the "Edit" column.)
7) After you have saved changes in Facebook Developer you will need to publish the app you just created. You can do this by selecting "App Review" on the left hand navigation bar and then you can publish/unpublish the app from here.
Note: If you preview a publication using the 'Narrow' view option, it will display the publication in a single page view in the old Facebook Page layout. If you wish to preview a publication with the new width (Wide), you will need to click the Preview icon on the Facebook Apps page after saving the settings in Publicator.
Part 4: Add Facebook Application to a Page
1) In the Zmags Publicator, again, 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 a Facebook Page can be selected to place the App on.
2) Navigate to the Facebook Page where the App has been installed. Select the App, which should be below the Cover Photo, and test that it displays the publication correctly.
When 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 first page be visual to draw users in to the experience.