Adxstudio Portals is capable of hosting Facebook Apps in the context of a Facebook Page Tab. This is achieved by employing features such as Login with Facebook and ASP.Net MVC Display Modes.

Prerequisites

Start by setting up a standard portal.

Configuring IIS

The same website used to host the standard portal is also used to host the Facebook App portal. However, the website must be configured to respond to Facebook specific site bindings in addition to the existing bindings. The specific site bindings should contain a host name value that distinguishes it as a Facebook App portal. For example, a standard portal hosted from the domain contoso.com can specify the domain facebook-contoso.com for hosting the Facebook App. 

Type Host Name Port Notes
http contoso.com 80 The standard portal.
http facebook-contoso.com 80 The Facebook App portal.
https facebook-contoso.com 443 The Secure Facebook App portal.
Example IIS Configuration utilizing a website named "contoso.com"

Configuring the Display Mode

The MVC Display Modes feature allows the Facebook App to present a customized user experience. The Facebook display mode is enabled by adding the following site setting.

Site Setting Name Value (examples - replace with your Page Tab URL) Website
DisplayModes/Facebook/HostName
  • facebook-contoso.com
  • facebook-*

Note: The host name of the Facebook App portal. Accepts wildcard.

Lookup Field: Specify Portal Website

Testing the Site Bindings

View the portal through each of the site bindings in a web browser to ensure that the bindings are functioning correctly. Verify that the Facebook site bindings render a customized view distinct from the other bindings

Setup the Facebook App

  1. Go to the Facebook Developers site and sign-in with a Facebook account. Under the My Apps drop down menu click the "Add a New App" button, then click "Skip and Create App ID".
  2. In the resulting "Create a New App ID" dialog, specify a valid Display Name, Namespace, and, Choose a Category  (such as Apps for Pages) since this is eventually required to publish and app to the public. The Namespace can be left blank. Click "Create App". Submit the following Security Check (captcha) dialog as well.
  3. After landing on the Dashboard, navigate to the Settings area in the left column navigation.
  4. Complete the Basic form by entering the fields shown in the following example:

Basic

Display Name Contoso Portal
Contact Email administrator@contoso.com
App Domains

portal.contoso.com facebook-portal.contoso.com

If the domain values cannot be successfully set, leave this field blank for now, complete the next step to specify a Site URL, and then return to this field.

Click the + Add Platform button and click Website from the Select Platform dialog. Enter a Site URL.

Website

Site URL Example - http://contoso.com

Again, click the + Add Platform button and this time click Page Tab. Complete this new section based on the following fields.

Page Tab

Secure Page Tab URL https://facebook-contoso.com/app/facebook
Page Tab Name Contoso Portal

The Page Tab URL should have the /app/facebook path appended to the App domain URL. The portal uses this endpoint to launch the App portal.

Click Save Changes.

Take note of the App ID and App Secret values of the new app. Use these values when configuring the site settings. The two Authentication Site Settings that need to be configured are:

Authentication/OpenAuth/Facebook/AppId

Authentication/OpenAuth/Facebook/AppSecret

The Value and Website of each site setting must also be added into the site settings. ***The Facebook Authentiation Site Settings may require the Website's Applocation Pool to be recycled before they are functional***

Publish the App

Click over to the Status & Review area (under Settings area). The first option of the Status tab asks: Do you want to make this app and all its live features available to the general public? Change this setting to YES.

Add the Facebook Page Tab to Your Facebook Page

If you do not have a Facebook Page, follow THIS LINK to create one. If you will be using an existing page, the current Facebook user must have sufficient permission to add a Page Tab to the Page. If your Facebook Page does not already have the Page Tab functionality enabled, you must enable it by browsing to a specific URL (substituting the relevant App ID and “next” URL value). The URL below can be used if you substitute the App ID and encoded URL with your information. Further details can be found here and here.

https://www.facebook.com/dialog/pagetab?app_id=0123456789&next=http%3a%2f%2ffacebook-contoso.com%2F

This displays the Add Page Tab dialog to select the Page that will contain the Page Tab and app. Browse back to the Page and the app should be available in the grid of added Page Tabs. Click the Page Tab to view the Facebook App portal framed within the Facebook Page. 

By default, Internet Explorer does not allow third-party cookies to be created for portals/apps that are rendered in an iframe of another host portal. This is the case of a Facebook App portal hosted from a Page Tab. A side-effect of this cookie blocking is that an app is unable to create and maintain an authenticated session. This is resolved by updating the App portal to publish a Platform for Privacy Preferences (P3P) policy. There are various options for achieving this one of which is to update the web.config of the App portal to include a custom header. For Example:

<configuration>
   <system.webServer>
      <httpProtocol>
         <customHeaders>
            <add name="P3P" value='CP="ALL ADM DEV PSAi COM OUR OTRo STP IND ONL"'/>
         </customHeaders>
      </httpProtocol>
   </system.webServer>
</configuration>