Welcome to WebProNews Breaking eBusiness and Search News
Advertise | Newsletter | Sitemap | News Feeds News Feed 
Part of the iEntry network iEntry inc. 

How To Create A Tab Page For Facebook IFrames

Janet Driscoll Miller
Expert Author
Published: 2011-02-15

WebProNews RSS Feed


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

View All Articles by Janet Driscoll Miller



Receive Our Daily Email of Breaking eBusiness News


About the Author:
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.

WebProNews RSS Feed

More Top News Articles

Contact WebProNews
Advertisement





TOP NEWS

WebProBlog
The official blog of WebProNews.

Go to WebProBlog

Targeted Information for Business
WebProNews is part of the iEntry network

Internet Business: Marketing: Small Business:
WebProNews MarketingNewz SmallBusinessNewz
WebProWorld AdvertisingDay PromoteNews
EcommNewz SalesNewz EntrepreneurNewz

Software: Search Engines: Web Design:
WebMasterFree Jayde B2B DesignNewz
NetworkingFiles SearchZA FlashNewz
SecurityConfig SearchNewz WebSiteNotes

Developer: IT Management: Security:
DevWebPro ITManagement SecurityProNews
DevNewz SysAdminNews SecurityConfig
TheDevWeb NetworkingFiles NetworkNewz

The iEntry Network consists of over 100 web publications reaching millions of Internet Professionals. Contact us to advertise.
eBUSINESS RESOURCES






 Advertise | Contact Us | Corporate | Newsletter | Sitemap | Submit an Article | News Feeds
 WebProNews is an iEntry, Inc. ® publication - $line) { echo $line ; } ?> All Rights Reserved
WebProWorld
Ten most recent posts.


SearchBrains.com
NetworkingFiles
Featured Software


About WebProNews
WebProNews is the number one source for eBusiness News. Over 5 million eBusiness professionals read WebProNews and other iEntry business and tech publications.

WebProNews provides real-time coverage of internet business.

Free Email Newsletters:
WebProNews SearchNewz
WebProWorld DevWebPro
Marketing SecurityNews
Plus over 100 other newsletters!

Send me relevant info on products and services.


iEntry.com WebProWorld RSS Feed WebProWorld Contact WebProNews Print Version Email a friend Bookmark us SearchBrains.com SearchBrains RSS Feed