Level: Advanced

Adding your nuCloud interactive map to your Facebook fan page is a pretty quick and painless process. The most important thing to do before you get started is to embed the map on a bare HTML page. You can include header and footer wrappers on this page along with call to actions, but otherwise it should include nothing else. (e.g. http://www.nucloud.com/canvas/ ) Contact nuCloud if you need any assistance with creation or hosting of this page.

*Update: Facebook now enforces https support so your bare HTML page must support SSL. Also the embed URL for your map will also change to support https.

Instead of
http://cdn.nucloud.com/maps/**MAP_ID**/index.html

It should be.
https://d30240hr1l6ehu.cloudfront.net/maps/**MAP_ID**/index.html

*Note this also means any embeddable content in your map also needs to use SSL (https) URLs or they won’t display in Facebook.

Once you have this page created you are ready to start following the steps below to create a basic app for your interactive map and include it on your Facebook Fan Page.


Step 1: Initial App Creation and Settings

  1. Go to https://developers.facebook.com/
    1. In the header, click on the navigation item for ‘My Apps’
    2. Click on the ‘Add a New App’ button
  2. Type the Display name of your new app; e.g. nuCloudMap-{your organization name} and add your contact email address
  3. Click Create App ID
  4. In the ‘Create New App’ popup:
    1. Set create test app option to ‘No’
    2. Set the category to ‘Apps for Pages’
    3. Click Create App ID

Step 2: Developer Dashboard Settings

  1. Select ‘Settings’ from the left side menu
  2. Choose “Add Platform”
  3. Select “Facebook Web Games”
  4. On the next page, scroll down until you see ‘Where is your app hosted?’
    1. Note the Facebook Web Games Page URL, you’ll need this later
    2. Facebook Web Games URL – should point to the page with your iframe embed code, and any other wrapper options you want include (e.g. http://www.nucloud.com/canvas/ )
    3. The other options can be ignored or configured to your preferences
  5. Save Changes

Step 3: Setup Page Tab

  1. From the Developer Dashboard, select ‘Settings’ again
  2. Click the ‘+Add Platform’ Button
  3. Select ‘Page Tab’
  4. Reenter the entire secure URL into the ‘Secure Page Tab URL’ input box
  5. Enter the ‘Page Tab Name’
  6. Click on ‘Page Tab Image’ to select an icon for your page tab app
  7. Save Changes

Step 4: Publish App and Add to Your Facebook Page

  1. From the Dashboard, select ‘Status & Review’ from the menu and make your app live to the general public.
  2. You need to visit a URL with your App ID and your App URL. Both your APP ID and your APP URL can be found under ‘Settings’. Below are two examples:
    App ID = 271189062989449
    App URL = http://apps.facebook.com/nucloud-map
  3. Now that we have this information you need to visit the following URL inputting your information where YOUR_APP_ID and YOUR_URL were just defined.
    https://www.facebook.com/dialog/pagetab?app_id=YOUR_APP_ID&next=YOUR_URL
    NOTE: Please be sure include a trailing slash on your URL. This is documented but people have had problems not doing it. So an example using the parameters above would be.
    https://www.facebook.com/dialog/pagetab?app_id=271189062989449&next=http://apps.facebook.com/nucloud-map/
  4. When inputing this information you will be presented with the following screen. Select your Facebook Page that you would like to add your interactive map too.add-fb-page-tab
  5. Visit your Facebook Fan Page to see your interactive map live as a new page tab. Reminder, if you have more than four apps you will need to click on the down arrow to the right in order to display all the apps. Learn how to reorder your apps on your Facebook Page.

 

For a completed example please visit: https://www.facebook.com/TrinityPrepFL