Ever wanted to add some of your own content to your Facebook page? Now you can! You just need to create a simple Facebook application and embed an HTML document in it. Don’t worry, it’s easier than it sounds.

Basically what we are doing is placing an HTML document that you create inside of a Facebook page. Since you can’t upload HTML files to Facebook, you’ll either need to upload to S-Drive or to your own web server. We’ll use S-Drive as our example because it’s easier, and we like it.

This can be broken down into four sections:

  • Creating/uploading an HTML file
  • Installing the Facebook developer application
  • Setting up a new app
  • Embedding the app on your page

Create and Upload an HTML File

Whichever method you use to accomplish this is up to you. Of course, we prefer to use our HTML Editor, but since this will be a simple example, we’ll just use a text editor.

  1. Open your text editor and paste in this code (you may need to ensure that your text editor is in “Plain text” mode):

<html>
<head>
<style type="text/css">
body {width:520px; margin:0; padding:0; border:0;}
</style>
</head>
<body>
<p>Wowee, my homemade content in a Facebook page!</p>
</body>
</html>

  1. Save the file as [yourfilename].html, giving the file any name you want. Just make sure it ends with .html.
  2. Either upload this file to your web server or to S-Drive.
  3. To upload to S-Drive, go to the S-Drive Dashboard, click Images and Media on the right side, and click [+] Add new file.
  4. Click Browse... and choose the HTML file you just saved in the last step. Now click Add File. You should see a message that says, “Your file was successfully added! You can find it here:” with a URL to the file shown below. Copy this URL and hold onto it for right now. Our example file has the URL http://you.coffeecup.com/_sdrive_media/newapp.html

Install the Developer Application on Facebook

When you include your own content on Facebook, you are effectively making your own app to display that content. Don’t worry, it’s not difficult at all, it just involves filling out a few fields. But to make an app, we first need to install the Facebook Developer Application.

  1. Log in to Facebook and visit http://facebook.com/developers to install the application.
  2. You will see a dialog asking you to allow the application permission to access your information. Click Allow.

Set Up a New App

When you clicked Allow in the last section, Facebook should have redirected you to the Developer page. If it didn’t, or if you already had the application installed, simply visit http://facebook.com/developers again.

  1. Click the button that says + Set Up New App in the upper right corner of this page.
  2. Give your application a name in the App Name field. This name won’t be shown anywhere on your page, and can be changed later. It is only used for reference purposes.
  3. Agree to the Facebook Terms and click Create App.
  4. Enter the security words from the Captcha box and click Submit.
  5. Click Facebook Integration on the left menu.

Remember the URL to that HTML you uploaded earlier? Let’s take a look at that a little more closely.

This is the URL we uploaded:

http://you.coffeecup.com/_sdrive_media/newapp.html

For the sake of this application we are creating, newapp.html is the file name, and everything before it is what we will refer to as the Canvas URL.

  1. Enter this in the field marked Canvas URL. In our example, we’re entering http://you.coffeecup.com/_sdrive_media/ and ensuring that the final / is present.
  2. Scroll down and enter the file name in the field marked Tab URL. For our example, we’re entering newapp.html.
  3. Click Save Changes.

Now, to Embed That App on Your Page!

Once you clicked Save Changes in the last section, you should have been redirected to a page that says My Apps. If you have multiple apps, ensure that the correct one is selected from the list on the left side of the screen.

  1. Click Application Profile Page from the right side menu on this screen.
  2. If you are prompted to upgrade this page at the top of the screen, do so by clicking Upgrade This Page.
  3. Click Add to My Page from the menu on the bottom left side.
  4. Choose the page you would like for your content to appear on by clicking Add to Page to the right of it.

Your page should now have a new tab on its left menu featuring the name that you attributed to it earlier. Go ahead and click it to see your results. Congratulations! Your content should now be visible on your Facebook page.