Creating An iFrame-Based Facebook Tab Page

Janet Driscoll Miller By Janet Driscoll Miller
Expert Author
Article Date:

My last post explained the benefits of the new iframes-based Facebook tab pages, so are you ready to set one up? It can be a little tricky, so here’s my steps to walk you through creating a Facebook iframe tab page (to enlarge screen shots, click on them):

  1. On your Facebook page, click on “Edit Info”.
  2. Click on “Apps” at the left hand side. This will show a list of the tabs you currently have along with other installed applications.
  3. At the very bottom of the Apps page, click on “Browse More Applications”.
  4. In the search box, enter “Developer” to search for the Facebook Developer app.

    developerfbapp How to Create an iFrame Based Facebook Tab Page

  5. Click on the Developer app, then select “Add to my Page” under the logo at left. A box will pop up to show which pages you can install the app on. If you do not already see your page listed there, the app is likely already installed. If your page IS listed, click on “Add to Page” to install. After you have installed the app or if it is not listed, close the pop up window and click on the “Go to App” button under the logo on the left.
  6. Click on the “Set Up New App” button at the top of the page. 

    createafbapp How to Create an iFrame Based Facebook Tab Page

    You’ll need to have a name for your page. This name will be what displays on the “tab”, so choose wisely.

    fbcreateapp2 How to Create an iFrame Based Facebook Tab Page

  7. There are three screens you will need to fill out in the app setup to get your tab page working properly:
    • About Screen
      The About screen contains basic information about your page/app. You can upload a logo for the page and you will need to add your privacy policy and terms URLs to this page. NOTE: You MUST add either a trailing slash or a ? after your URLs for privacy and terms. Not sure why, but it is required by Facebook to submit the form. I suggest using a variable, such as I have below, to identify to your website that the page you are accessing should be formatted for Facebook tabs (see my example below).

      fbappabout How to Create an iFrame Based Facebook Tab Page

    • Web Site Screen
      The Web Site screen contains information about your own company domain. NOTE: Like on the About screen, you will need to enter a trailing slash on your website URL (as I did in the example below).

      fbappwebsite How to Create an iFrame Based Facebook Tab Page

    • Facebook Integration Screen
      This screen is where the beef of your tab page is set up.  Enter all of your page information, and be sure to choose the iFrames “canvas type”. On this page, “canvas” refers to your page that will appear within the Facebook iframe. NOTE: Like on the About and Web Site screens, you will need to enter a trailing slash or ? at the end of the URLs (as I did in the example below).

      fbappintegration How to Create an iFrame Based Facebook Tab Page

      Once you have completed these three screens,  click “Save Changes”. You will be able to come back later and edit these settings as needed.

      fbappsaved How to Create an iFrame Based Facebook Tab Page

  8. Now take a look at how your tab page will look by copying the “Canvas Page” and pasting it into another browser tab. Voila! There’s your web page! However, don’t get too excited yet? there’s likely more work to be done.

    fbtabbefore 752x1024 How to Create an iFrame Based Facebook Tab Page

  9. The next thing you’ll want to do is create a version of your canvas page that fits the dimensions of the Facebook tab screen. While the Canvas Page looks pretty wide, the reality is that once you place the tab page in your company page, it will be more narrow. In the example that follows, I used an existing page on my website and used a different style sheet based on the variable “ls” appearing in the URL. This variable serves as an alert to the page that the layout should use the Facebook layout, not the normal website layout. Here’s the steps I took to reformat my page:
    • Create a separate style sheet for Facebook.
      Since I’m using an existing page on my website for this page, I created a separate Facebook style sheet, limiting the width of my page to 500 px, which fits nicely in the Facebook tab area on my company page.
    • Use dynamic programming language, such as PHP, to display or hide certain things from the Facebook version.
      Again because my Facebook tab page is so narrow compared to my regular web page, I decided to use PHP to declare which pieces of the page should be shown or hidden when the page was being displayed in Facebook. First, I captured the “ls” value from my Canvas URL in a variable by using $_GET[“ls”]. Then I simply added conditional statements throughout the page in different areas to say that if the variable for ls was equal to (in my case), “fb”, then show or don’t show this element. I also used this approach to have the page select the Facebook style sheet when appropriate.
    • Test the version in your separate browser tab.
      To see how the tab will display, keep refreshing your open browser tab with the Canvas Page in it.Once you’re all set, you’re ready to add the app to your Facebook page.
  10. Next, click on the “Application Profile Page” link to add the new Facebook tab page to your Facebook page.
  11. Once on the Application Page, click on “Add to My Page” to add the tab page to your Facebook page. A pop up window will appear. Click on the “Add to Page” button adjacent to your Facebook page name.
  12. Go to your Facebook page. If you don’t see the Tab Page listed under the logo, you may need to change the order. Simply click on “More” then “Edit” and drag your Tab page higher in the order to ensure it is a page that shows in the menu there by default, if you prefer that. In my case, the page was a “Careers” page, so I wanted to ensure it was always visible.
  13. Preview the tab page by clicking on it. Make sure that the layout works the way you want. If it doesn’t, you can always edit your style sheet or page on your own website to ensure it fits properly.

    fbcareerstab 1024x958 How to Create an iFrame Based Facebook Tab Page

That’s it! Now you’re ready to promote your page!

NOTE: You do not ever need to publish your app to the directory. You can keep it private, so if you don’t want to share, don’t submit it to the directory. It’s not necessary to use the app.

Comments

About Janet Driscoll Miller
Janet Driscoll Miller brings over ten years of search engine marketing experience to Search Mojo and is considered a leading expert in her field. Janet has spoken at search engine conferences including SMX Advanced, Search Engine Strategies and Pubcon, has published articles in B2B Magazine, Visibility Magazine and others, and contributes to several blogs, including Search Marketing Sage, Marketing Pilgrim and Search Engine Journal.

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

  • 152×252
  • 160×600
  • Newsletter Signup
    Get The Email Newsletter! Please subscribe using your company email address
  • 336×280
  • 336×130