Add an iFrame Application to your Facebook Fan Page

Prequisites

  • HTML
  • Javascript
  • PHP

01. Become a "Verified Facebook Developer"

Go to the Facebook Developer website.

Also, make sure that you are the administrator for the fan page you want to add the applications in.

02. Prepare the php files

Ok. Say that you want to create 3 app pages. These will eventually be added to the desired fan page. This is the folder structure I prefer.

  • facebook

    • css 
    • js   
    • pages

      • home

        • index.php
      • products

        • index.php
        • images
      • contact

        • index.php

Let me come clear.

css: holds all the necessary css files.

js: holds all the javascript files

pages: holds all the pages you want to create for your fan page.

Avoid error 405 using php files

As you may notice, I only use index.php files. Why? To make sure that my app loads fine and no annoying error 405 comes. Some web servers don't allow POST or GET verb on .html pages, f(acebook calls your page via POST/GET verb). So save your files as php to be sure!

Navigation button links

You will possible want to include a menu that helps you navigate through your apps. Do not use relative paths. Use only the paths that facebook provides for each app (copy it from the browser). And that's because you want the whole facebook page to be refreshed when you press a nav button. And consequently the left app menu to respond to the pressed button. So use something like this:

<div>
    <ul id="list-nav">
      <li><a id="home" href="http://www.facebook.com/grafixdesignstudio?sk=app_11111111111" target="_top"><span>HOME</span></a></li>
      <li class="products"><a id="products"  href="http://www.facebook.com/grafixdesignstudio?sk=app_22222222222"><span>PRODUCTS</span></a></li>
      <li><a id="contact" href="http://www.facebook.com/grafixdesignstudio?sk=app_333333333"><span>CONTACT</span></a></li>
    </ul>
</div>

03. Upload the files to a hosting server

Now it's time to upload the files to our server. Later, we’ll give Facebook the route for the directory so we need to create it first. Access your server via FTP and create a new folder, in this case "facebook" (with all its subcontents).

04. Configure your facebook apps

Go back the Facebook Developer website. Let's configure the "home" facebook app first.

Press the "create new app" upper right button.

Give an "App Name", eg. "Home".

The Settings Tab

This is where you do the basic set up for your app.

Notice the “edit icon” below the App Secret. This is the icon that will appear to the left of your tab’s name in your page navigation, so make it eye catching and make the dimensions 16 x 16 pixels. If you don’t create your own icon, your tab will have a generic Facebook-tab icon.

Fill in the "App Domain" field with the domain that you hosted all the files before, eg. www.my-domain.com.

Click the "App on Facebook" tab and in the "Canvas URL" insert the home page hosting url.

http://www.my-domain.com/facebook/pages/home/

Click the "Page tab" tab.

  • Page Tab Name: The displayed name of the tab in the Page navigation;
  • Page Tab URL: Give the same as above.
http://www.my-domain.com/facebook/pages/home/

05. Install your facebook apps

Navigate to this URL in your browser:

https://www.facebook.com/dialog/pagetab?app_id=YOUR_APP_ID&next=YOUR_URL

Replace:

  • “YOUR_APP_ID” with your App ID and
  • “YOUR_URL” with your App’s Canvas URL.

Both of these values are available in your app settings.

A new page will appear. Choose the facebook fan page in which you want to add the app.

If you' re not sure that the app works as expected, unpublish the fan page, until you 've made your tests. When you 're sure that everything works fine, re-publish the fan page.

Learning Resources

Check this great tutorial, or this.

Post A Comment

Anti-Spam Quiz: