How to Create a Facebook Calendar or Canvas App

This is a step-by-step guide to create your Teamup Calendar app to be displayed on Facebook.  Click here to see a live example.

Step 1: Have Your Calendar Link Ready

If you already have a Teamup Calendar and want to make it easy for your Facebook group members to access it, have a read-only link of this calendar ready. If you are brand new to Teamup, create a free calendar and populate it with your events.

For calendar administrators: To locate a read-only calendar link, go to Settings > Sharing.  Here you may find a pre-configured read-only link named Reader (or create a new link and assign the read-only permission to it). Right-click the ‘Reader’ link, and ‘copy link address’.

Check out here if you want another permission such as add-only or share only events of selected sub-calendars. Be sure NOT to copy an administrator link. It is not recommended to use any link with modifying permission.

Step 2: Log In to Facebook as a Facebook Developer

Go to https://developers.facebook.com/apps. You’ll be able to log in with your normal Facebook credentials.

Step 3: Create and Name Your New Tab

Click the button “Add a New App“:

Add a new app to Facebook

Fill in the Create New App ID screen:

Create App iD

Step 4: Configure Your Facebook App

1)  Once you have created your App ID, you’re in your App Dashboard. Go to Settings, then locate and click “+ Add Platform” at the bottom.

Configure your app

2) When prompted, select ‘Facebook Web Games‘ (formally known as Facebook Canvas) as your platform:

FB Add platform dialog

3) Next, add your calendar link you obtained in Step 1 and enter it under Facebook Web Games URL and Mobile Site URL. Be sure to add a / at the end of your URL as shown below:

Facebook Web Game configuration

Configure your canvas app. Don’t be deterred by the gaming terminology

4) When you’re done editing the contents of this section, click the ‘Save Changes‘ button at the bottom right.

Step 5: Make Your App Public

Make app public

Turn the switch to Yes and confirm when prompted.

Step 6: Access to Your Facebook App

Visit the link found under “Canvas Page” which has this pattern: https://apps.facebook.com/YOUR_APP_ID

YOUR_APP_ID is the ‘App ID‘ shown on the screen in Step 4.

Here is an example:

https://apps.facebook.com/675794799212429

Facebook app example

An example of Facebook calendar app

Now bookmark  your calendar canvas app for easy access later. If this is the calendar for your Facebook group, share the link on your group timeline.  When your users click the link the calendar is loaded within their own Facebook canvas.  Encourage everyone to bookmark it.

Bonus: Options to Promote the Events on Your Calendar Tab

  • Share your Facebook calendar app URL in your timeline or elsewhere.
  • Click an event to view the event, or right-click an event on your calendar to open the context menu, then click Share.  Now you choose any of the options to share further or save the event to your personal calendar:
    event context menu

    Event context menu: Options for sharing

     

Please note the app you create will not display on mobile devices due to Facebook restrictions.  If you find a way to display it on mobile devices, please drop us a note at support@teamup.com and we’d be happy to share with other users.

Rate This Article

(19 out of 27 people found this article helpful)