Configuring your Facebook app as a Canvas Page

Last Updated: 27 November 2013

facebook

The Facebook Cloud Integration service has been discontinued. No new applications can be created through this service. Existing applications will continue to operate.

Apps created through the Facebook Cloud Services integration are configured as websites which will display as standalone pages. If you would like your app to display inside the Facebook Chrome as a Canvas Page all you need to do is change a few settings.

Start by going to the Developer app and click on your desired app. You should now see its configuration page:

Facebook app configuration page

Currently the “Site URL” is configured with the URL of your Heroku app. Copy that URL, and click the “X” in the right corner of the box to delete the Website configuration. Then click the “App on Facebook” tab and paste the Heroku URL into the “Canvas URL” and “Secure Canvas URL” fields. Be sure to change the protocol to “https” for the secure URL:

App on Facebook tab

Finally, you need to give your Canvas app a “Display Name” and a “namespace” within Facebook. The Display Name is what will show up in searches and listings while the namespace will be used in the app’s URL within Facebook:

Basic Facebook app settings

After clicking “Save Changes” this app will know appear as “My Super New App” inside Facebook, and will be located at https://apps.facebook.com/mysupernewapp.