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.

21 Comments

  1. Nice post – but tried it and ran into an issue – since you didn’t specify I put the same thing in the “secure tab URL” field as I did in the “tab URL” field, and when I saved changes got the following error:

    Validation failed. Secure Tab URL must be a URL with a valid domain.

    Any thoughts?

    • Hi Phil,

      For the ‘secure tab URL’ you should be able to fill it in the same way you filled in the field for ‘canvas URL’ and ‘secure canvas URL’ – meaning entering the exact same URL again, only using ‘https://’ this time instead of ‘http://’.

    • Hi Phil,

      For the ‘secure tab URL’ you should be able to fill it in the same way you filled in the field for ‘canvas URL’ and ‘secure canvas URL’ – meaning entering the exact same URL again, only using ‘https://’ this time instead of ‘http://’.

  2. Hi! Did you know that you can create a custom tab for free without iFrames knowledge? Go to http://hy.ly and sign in with your Facebook account and you dont have to mess with building your own iFrames tab. Hy.ly makes it easy to customize your tab so that it reflects your brand. I use it and love it. Thought I’d pass it along 🙂

  3. Is there any way you can have the “landing page” be a custom tab rather than the “wall” after someone has “liked” the page? I changed the default landing page to my “welcome” page, but after you like the page it automatically lands on the “wall”.

    • Unfortunately, you can only choose the landing page for Facebook users that haven’t already ‘liked’ your page. There is currently no way to change the landing page for existing fans.

  4. Hi, this was a great help, but my problem is that my webpage don’t show AT ALL. 🙁 It’s really frustrating.

    I’m using http://webs.com as a host at the moment for my webpage. Is it possible that that’s the cause?

    • It’s strange that it isn’t showing up, using http://webs.com to create your webpage shouldn’t be a problem.

      When you look at the URL of your webpage it should be ‘http://webs.com/yourcustomwebpage’, did you make sure to only include http://webs.com/ in the ‘canvas URL’ field? Don’t forget to include the trailing slash because that tells Facebook there is more to the URL. Then, only include the ‘yourcustomwebpage’ section of the URL in the ‘tab URL’ field.

  5. Hi,

    Is it possible to use this approach to redirect multiple facebook fan pages to a single facebook fan page.

    The same way you would redirect a website url using dns or javascript, etc.

    I’ve been struggling this one for a while. Is it possible?

    Regards,
    Sam

  6. Pingback: What You Need to Know About Facebook's Promotion Guidelines | Out-Smarts Marketing Inc

  7. Thank you so much for this fantastic article. I have now got my tab up, however wondering if it is possible to have it visible only to fans (like an IFRAMES landing Page can be)? I would like to run a competition that only fans can enter. Any help would be greatly appreciated!

  8. Pingback: Biggest Mistakes You Can Make with Your Facebook Page | Out-Smarts Marketing Inc

  9. if you want to build custom iframe tabs on Facebook, then check out iframe tab plus application from hostFB – https://apps.facebook.com/buildiframetab/

  10. Pingback: Our Most Popular Blog Posts of 2011 | Out-Smarts Marketing Inc

Leave a Reply

Your email address will not be published. Required fields are marked *