Publishing on Facebook

Facebook is an online social network with over a billion users. This tutorial demonstrates how to add HTML animation to a Facebook page, and also how to create a Facebook Canvas.

You will first need to create some HTML animation, a game or an application.

Upload the HTML file and any media files to a web server.

Important! Facebook requires any external HTML pages to be hosted on a secure web server (HTTPS).

Adding HTML Animation to a Facebook Page

You will need a Facebook page, this is different from a Facebook account.

Follow the instructions to create a new page. We've created a blank page. You might already have a Facebook page for your business.

Next, create a Facebook app. You will need to register as a developer. This is free.

Create a new app. Choose www. Give the app a name, create an app ID and set the category to 'apps for pages'. Skip the quick start.

In the app dashboard you can manage all the app details, screenshots, analytics and images. Most of these settings are not needed, for now.

In the settings menu, set a contact e-mail address. You can't make your app go live until you have set an e-mail address.

Choose 'Add Platform' and select 'Page Tab'.

The 'Secure Page Tab URL' is the location of the HTML animation you have created.

This must be hosted on a secure web server.

This also must be a server page. This is simple to do. Change the file extension of your HTML page from .HTML to .ASPX or .PHP depending on the type of web server you are using.

Set a name for the page tab and set an image.

Press 'Save Changes'.

To add the page tab to your Facebook page, the following URL needs to be copied into a web browser. Replace YOUR_APP_ID with the ID of the app and replace YOUR_URL with the secure URL of the app.

For example:

Choose the correct page and press 'Add Page Tab'.

The tab containing your HTML animation has been added to the page. It will start in the 'More' menu. Press 'Manage Tabs' to make it more prominent.

When you are ready, you can make the app live. Goto 'Status and Review' in the app dashboard. You need to do this before other poeple can see it.

Creating a Facebook Canvas

Facebook Canvas are full page apps, rather than an app within a tab.

Create a new app. Choose Facebook Canvas. Give the app a name, create an app ID and choose a category. Skip the quick start.

In the app dashboard you can manage all the app details, screenshots, analytics and images. Most of these settings are not needed, for now.

In the settings menu, set a contact e-mail address. You can't make your app go live until you have set an e-mail address.

Choose 'Add Platform' and select 'Facebook Canvas'.

The 'Secure Canvas URL' is the location of the HTML animation you have created.

This must be hosted on a secure web server.

This also must be a server page. This is simple to do. Change the file extension of your HTML page from .HTML to .ASPX or .PHP depending on the type of web server you are using.

Finally, Facebook requires a '?' to be added to the end of the URL.

Press 'Save Changes'.

View the app by copying the Canvas page URL into a web browser.