Create a Custom iFrame Tab for your Facebook Page

Recently, Facebook updated their business pages and in the process they replaced FBML with iFrames for creating custom tabs. This means that instead of using FBML to create custom content on your page, you will now need to create a custom application and use an iFrame. Basically, an iFrame allows you to use content across different web domains through code which tells the website browser to request content from a different location. This enables you to display content from one webpage on another website, such as embedding a youtube video or flickr photo on your Facebook business page. IFrames are a bit more complicated than FBML, but we’ll walk you through the basic steps below.

 

1. Create the webpage you will be integrating with your Facebook page and upload it to your web server – making sure that the page will fit within the 520px wide size limit of Facebook. The iframe application that you will be creating will pull this content from your web server directly to Facebook.

2. Go to the Facebook Developers site to begin creating your application. Click ‘set up new app’ in the upper left-hand corner. This will take you to a screen that looks like the one below:

Fill in your application name – it’s easiest to make this the name of the custom tab you are creating, and click ‘create app’.

3. Now that you have created your app, you will be taken to the About Tab for your application. There are many options with your new application, but for basic custom tabs, our one recommendation is to change the icon. This way an icon of your choosing will show up on your page navigation bar under your page profile picture, instead of the default iframes icon. For best results, make sure the photo you upload is 16px x 16px.

4. Next, click ‘facebook integration’ on the upper left-hand side of the page.

These next steps are the most important in creating your custom iframes tab. It is where the integration happens between your webpage and Facebook. You will see a screen that looks like this:

5. Canvas URL: This is the url where the file you wish to integrate is located – remember to include ‘http://’. However, do not include the actual name of the file here. In other words, fill in everything but the name of your iframe file, instead the URL must have a trailing slash at the end. For example, if you webpage is hosted at http://www.mysite.com/webpage, only include http://www.mysite.com/. (You will fill in the name of the iframe file in a later field).

6. Secure Canvas URL: Re-enter the same URL as above, this time using ‘https://’ instead of ‘http://’.

7. Canvas Type: select iframe.

8. Iframe Size: Select ‘auto-resize’. This ensures that your webpage will fit neatly onto your Facebook page without users have to scroll left to right and up/down.

9. Tab Name: This is the name of your tab, such as ‘Welcome’ or ‘About’, you are limited to 16 characters here.

10. Tab URL: This is the name of the file you wish to integrate with Facebook. It is what you didn’t include in the above ‘canvas url’ field. For example, if your webpage is hosted at http://www.mysite.com/webpage, only include ‘webpage’ here.

11. Save your changes. You have created your first Facebook application!

12. The next step is adding your new application to your page. The screen you should see now includes the information on your new application. Do not submit your application, unless you want everyone to be able to add your custom iframe to their page through the Facebook Application Directory. Instead, click ‘application profile page’.

From here, you will be taken to an empty business page. On the left side under the profile image, click ‘add to my page’ and, if you have multiple business pages, click the appropriate one.

13. Go to the page you just added your application to, and hit refresh. Your new custom tab will appear in the list under your business page’s profile picture. Done!

You can make your custom tab the default landing page by going to ‘edit page’ and clicking ‘manage permissions’ on the left hand list. From here, use the drop down menu to choose your new application in the default landing tab field.

As you can see, iframes are a bit trickier than FBML. If you are looking for more guidance or have any questions, contact us at Out-Smarts Marketing.