Loading...

Blog

How to Set Up a Facebook Application for your Custom IFrame Tab

Since Facebook has decided to end the creation of any new FBML custom tabs, Facebook users are now forced to create custom tabs using the ‘new’ updated Facebook IFrame method. In the past, adding FBML custom tabs was a simple process which almost anyone could accomplish; the same cannot be said for the IFrame method which requires the creation of an actual Facebook Application. Many Facebook users have no idea what a Facebook Application is, let alone know how to set one up. This tutorial will teach you, in 6 easy steps, everything you need to know in order to properly set up your Facebook Custom IFrame Application.

*Please Note: This tutorial is only for setting up a Facebook Application to be used for a Custom IFrame Tab on your Facebook Fan Page. If you are creating a Facebook Application for any other purpose these steps may not work for your desired application. Please refrain from asking for any support other than for a Facebook Custom IFrame Tab Application.

Step 1: Create the Basic Facebook Application

Log into your Facebook account and visit https://www.facebook.com/developers/, then click on the ‘Set Up New App’ button and complete the following steps:

  1. Name Your Application – *Cannot contain Facebook trademarks or have a name that can be confused with an app built by Facebook.
  2. Agree to the terms by clicking ‘Yes’.
  3. Click on the ‘Create App’ button.
  4. Complete the ‘Security Check’ on the next page.

Step 1 - Create the Basic Facebook Application

After successfully completing the ‘Security Check’ you should now be inside the main editing area for your Facebook application. You should see a tab menu on the left side containing the following links; About, Web Site, Facebook Integration, Mobile and Devices, Credits, and Advanced. Only the first 3 tabs (About, Web Site, and Facebook Integration) will require any type of editing in order for the Facebook Custom IFrame Tab Application to work properly.

Facebook Application Menu Tabs

Step 2: About / Basic Information

The first tab that should already be selected is the ‘About’ tab, the only section on this tab that we will need to edit is ‘Basic Information’. Complete the following steps:

  1. Application Name – This should already be filled in according to what you named your app in Step 1. If this is blank, fill in your unique application name.
  2. *Icon – This is the small icon that will actually appear next to your tab name on your Facebook Fan Page, think of this in the same way as a favicon for a website. You will need to create a small icon that is 16 pixels X 16 pixels, just like a favicon this icon should represent the branding of your tab and not contain too much detail because of the small size. After you have created your icon, click on ‘Change your icon’ and upload it from your computer.
  3. The email address that you use for your Facebook Account should already be used for the ‘User Support Address’ and the ‘Contact Email’, you may change this to any email address you like but note that it is not necessary for the application to work properly.
  4. Description and Logo are optional and will not show up anywhere on your actual Facebook Fan Page.

*Do not worry if the icon is left blank, it will default to the Facebook icon, however we recommend that you do add a custom icon to improve your tabs overall look and feel.

About / Basic Information tab

Step 3: Web Site / Core Settings

After you have completed Step 2, click on the ‘Web Site’ tab. This tab is where we will actually reference our website to allow Facebook access to the core domain. Complete the following steps:

  1. ‘Application ID’ and ‘Application Secret’ are created specifically by Facebook for your application and cannot be changed.
  2. Site URL – Enter your site’s full base URL, make sure to include http://www or http:// depending on your site. (Examples: http://www.yoursite.com/ or http://yoursite.com/) *Be sure to use a trailing slash(/) after the url.
  3. Site Domain – This will be your site’s full base URL minus the http://www or http://. (Example: yoursite.com)

Web Site / Core Settings

Step 4: Facebook Integration / Canvas

After you have completed Step 3, click on the ‘Facebook Integration’ tab. There are two sections that need to be edited for this tab; the first section is ‘Canvas’. Complete the following steps:

  1. *Canvas URL – Facebook pulls the content for your app’s canvas pages from this base URL. This URL can be anywhere on your site domain listed in Step 3 but must contain the full link. The easiest way to set this up is to create a folder named ‘facebook’ and use’ index.php’ as your main file (Leave this file blank for now, this will be covered in more detail in the actual Custom IFrame Tab tutorial.). When using this set up your ‘Canvas URL’ will look like this; http://www.yourdomain.com/facebook/. *Be sure to use a trailing slash(/) after the url or the file name and extension(index.php).
  2. **Secure Canvas URL – Facebook uses this secure version of the Canvas URL when your app is accessed by a user over a secure connection (https). Will be set up the same way as Step A but contains the https secure connection. Your site must have an SSL certificate to use this, if your site does not have an SSL certificate leave this item blank. (Example: https://www.yourdomain.com/facebook/) *Be sure to use a trailing slash(/) after the url or the file name and extension(index.php).
  3. IFrame Size – Switch to Auto-resize. This is important to allow our IFrame to expand to any height and not be constricted to the default height set by Facebook, which will produce unwanted scroll bars. This will be covered in more detail in the actual Custom IFrame Tab tutorial.

*Please note that it is important that you use php files because core Facebook php code may be required depending on the complexity of your Custom IFrame tab. This will be covered in more detail in the actual Custom IFrame Tab tutorial.

**Since the addition of the secure login for Facebook, any user who is logged in on a secure connection will not be able to access your Custom Facebook Tab unless your tab uses the ‘Secure Canvas URL’. If you want all users of Facebook to be able to access your Custom Facebook Tab regardless of their login method you must purchase an SSL Certificate for your site and set up the ‘Secure Canvas URL’.

Facebook Integration / Canvas settings

Step 5: Facebook Integration / Page Tabs

The next section in the ‘Facebook Integration’ tab that needs to be edited is ‘Page Tabs’. Complete the following steps:

  1. Tab Name – The title of your tab on your Facebook Fan Page. This title will show up in the Facebook Fan Page menu along with the ‘Icon’ that we set in Step 2B. Currently the max amount of characters allowed for this title is 16.
  2. Tab URL – Facebook pulls content for your tab from this URL. Use the same URL that you used for the ‘Canvas URL’. *Be sure to use a trailing slash(/) after the url or the file name and extension(index.php).
  3. *Secure Tab URL – The secure version of the Tab URL. If your site has an SSL Certificate, use the same URL as the ‘Secure Canvas URL’ otherwise leave this item blank. *Be sure to use a trailing slash(/) after the url or the file name and extension(index.php).

*Since the addition of the secure login for Facebook, any user who is logged in on a secure connection will not be able to access your Custom Facebook Tab unless your tab uses the ‘Secure Tab URL’. If you want all users of Facebook to be able to access your Custom Facebook Tab regardless of their login method you must purchase an SSL Certificate for your site and set up the ‘Secure Tab URL’.

Facebook Integration / Page Tabs

Step 6: Save Settings

The final step is to save all of your app settings by clicking the ‘Save Settings’ button. If you encounter any issues trying to save your settings recheck all steps and make sure you have filled in the items correctly.

Troubleshooting

If you are having problems getting this tutorial to work please reread the tutorial and try again, if you still cannot get it to work please leave us a comment below and we will respond as soon as possible. Please do not email us with problems regarding this tutorial, only comments will be responded to.

Leave a Comment

20 comments
Hmza
Hmza

Hi Thanks for this great tutorial, I want to create a tab on my own FB page with static html app I code the form in html and php the problem when run the page it shows " the file not found " the php code not recognized. so how could I solve this prob. your help will be very appreciated. thanks in advance

Jen
Jen

I've been making iframe tabs for my work's facebook page. I'm a little confused about this new "secure" certificates thing. I got my IT team to put a certificate on a subdomain of our website, but it has to be accessed through https:// instead of just http://. We have the unsecure tabs hosted in one place and the secure tabs in another. If I put the unsecure tabs on the secure server, will that break for people that don't use SSL? I noticed you don't have https:// typed in for the "secure server" input. That's why I'm wondering if it make a difference.

chirag
chirag

i have created the application and it is running,now i need to set a page such that it will display wall contents when a visitor hit LIKE button??please help.

Rob
Rob

On steps 3you mention domains, do I have to go and purchase a domain name? I don't understand this part.

Kristina McInerny
Kristina McInerny

Thanks! Got my first Facebook App up and running. Just need to tweak the CSS.

Alex
Alex

Hi there, After a long struggle i got success Now i can see my App working and also can see tab ... Just one thing left .. and that is i want to load my app as default page ? as i have select it in the page settings .. but didn't work

hiten
hiten

I did your steps twice, but iam facing error "HTTP Error 405.0 - Method Not Allowed The page you are looking for cannot be displayed because an invalid method (HTTP verb) is being used."

Andrew
Andrew

Can I use a direct .jpeg link as my canvas url for my app? My apps will be primarily a .jpeg link and looking to get this working as soon as possible. Thanks!

Kim
Kim

I've followed the directions a few times, but my Welcome page displays my company website's invalid link page. Do you have any advice? My Canvas URL and Tab URL are the same. I can view the page if I go directly to the URL, but http://apps.facebook.com/mycanvaspage gives the error page like the new tab does. Thanks.

admin
admin

you should be able to get to same location with or without the https

daddydesign
daddydesign

yes, the iframe needs to reside on an actual website. The Facebook application pulls in the URL path from your domain.

daddydesign
daddydesign

have you set up an application before? you might have to get approved..

daddydesign
daddydesign

It is set as the landing page, you are an admin so it does not show for you. Log out of your account then go to your page, you will see the correct landing tab.

daddydesign
daddydesign

I don't think that's possible. Your best bet is to insert the jpeg into a plain php file. Once you make the php template, it should be pretty easy and fast to create multiple ones for the future.

daddydesign
daddydesign

what is the direct url to the php page?

Kim
Kim

I am having the same problem. I was verified this morning but nothing yet, it just pulls me up to my main facebook page without option to set up a new app anywhere...any ideas?

Kim
Kim

Yes, I clicked on the link and then it told me to click on the link to get the developers app and when I do that, I takes me to my facebook page, starting with the admin panel at the top. Nothing about downloading the developer app.