Goodbye Old Facebook Welcome Pages… Hello to the New and Improved Version

Oh, the times they are a changin’ at Facebook. As fate would have it, just about the time that I got comfortable adding Facebook Welcome Pages, a monkey wrench was thrown into the works. My first clue was that the Add Static FBML To My Page link was no longer available from the FBML app page. FBML, or Facebook Markup Language, was the method that Facebook offered to add Welcome pages and other content to a Facebook page.

So I thought to myself, better to go to Google to see what’s up. What I found was that on  March 11, 2011, Facebook officially turned off the ability to add a Welcome Page using FBML (Facebook Markup Language), that FBML had been deprecated, and that creating custom Facebook applications using iFrames became the new way to add Welcome pages. For those of you who are not IT professionals, this makes about as much sense as listening to the teacher speak in the Peanuts classroom.

Not to worry, In this article, I break down what this means for you, including what to do if you already have a Welcome page, the improvements offered by using the new method (iFrames), and the hard (and easy) way to add a Welcome page to your Facebook page.

I already have a Facebook Welcome Page? What Does This Mean to Me?

If you have a Facebook Welcome page, and it was created prior to March of this year, it was probably created using FBML. Since FBML has been deprecated by Facebook (in English, this means that they no longer support it and are planning to get rid of it) you will want to migrate your Welcome Page to the new version as soon as possible. On a positive note, you are still able to update your Welcome page, as Facebook has not removed this functionality (yet).

What are iFrames?

iFrame stands for In-Line Frame, and is used by web designers to integrate content from another web page into a section of an existing web page.  They are generally integrated into a web page without scrollbars (although they can have them) so that the content seamlessly integrates into the existing page. Facebook uses iFrames to integrate your Welcome page content hosted on your web server into your Facebook page.

What are the benefits offered by using iFrames for Facebook Welcome Pages?

Honestly, the benefits are almost limitless. Pretty much anything that you can do with a traditional or WordPress web site, you can do with a your Facebook Welcome page. This includes incorporating Contact Us forms, YouTube videos, Slideshows, and multiple pages with integrated navigation that works like a regular web site! Want to create your Welcome page with branding that perfectly matches your web site and marketing materials? This is not a problem with the new iFrames functionality.

How tall and wide can I make my Facebook Welcome page?

The maximum width for a Facebook page is 520 pixels. There is no maximum height, although the default height is 800 pixels. The web applications discussed below incorporate functionality to properly size your Welcome page without scollbars. If you create your Facebook Welcome page with a Customer Facebook Application (for technically savvy people, or those who choose to have their web designer do this), additional JavaScript code will need to be added to your Welcome Page in order to display the page on Facebook without scrollbars. I describe how to do this in the I am a techno geek – tell me how to do this on my own section.

I’m not a techno geek (like the author of this article). Tell me the easy way to add a Welcome page.

There are several Facebook applications that make it easy to add a Facebook Welcome page to your Facebook page. They include Lujure (http://assemblyline.lujure.com/) and iFrame Engine (http://fanpageengine.com/). Both of these services offer a 100% FREE option for your Welcome page. Of course, with FREE, there’s always the fine print. As is the case with both of these services,  FREE means that you get to display Lujure’s or iFrame Engine’s logos and “Powered by” links on your Welcome page (not exactly ideal, but of course good if you are on a budget). For an additional fee (and in some of the plans, annual fees) you can have their branding removed. A big benefit of going with one of these 2 applications is that you do not need to host your Facebook Welcome page content on separate web server. All of the content for your Welcome page is hosted by these companies. You can add the content to your Welcome page using easy to use editors, including text scrollers, video and pictures, text and more.

I am a techno geek – tell me how to do this on my own.

1. Create a new web page in WordPress or on your web site. This will include the content that you would like to display for your Welcome page.
2. Save the web page as a PHP, ASP, ASPX, JSP, CFM or similar file format. In other words, save it in a server side format other than HTM or HTML. If you save your file with an HTM or HTML file extension, your Facebook Fan page will display the following error message when integrated into your Facebook page: HTTP Error 405 – The HTTP verb used to access this page is not allowed.
3. Go to www.facebook.com/developers, and log-into Facebook, if necessary. Allow the developer application if  you have not already done so.
4.  Click the + Set Up New App button.
5. Enter a name for your App (welcome page). I suggest the  naming the application as follows:  Company Name – Welcome Page. Agree to the terms, then click the Create App button. You will be presented with a Security Check screen. Enter text that matches the letters in the image, then click the Submit button. Content in the About tab will be displayed.
6. Enter a description for your Facebook app in the Description field. This can be as simple as Welcome page  for my company.
7. Load an icon (16 x 16 pixels) for your application. This is especially useful as it will be displayed adjacent to your Facebook page’s Welcome page link.
8. Upload a logo, if desired (75 x 75 pixels). This logo is displayed in authorization dialogs, search results, and the app directory
9. Click the Facebook Integration button.
10. Enter the URL to the Welcome page that you created in step 1 (minus the file name) into the Canvas URL field. For example,  www.yourdomain.com/WelcomePageDirectory/.
11. Select “Auto-Resize” for the IFrame Size.
12. Enter “Welcome” into the Tab Name field. If you would like  to name your tab differently, that’s ok. You can make it anything that you want as long as you stay under 16 characters.
13. Enter the complete address to your Welcome page in the TabURL field (for example,  www.yourdomain.com/WelcomePageDirectory/index.php
14. Click the Save Changes button. This will take you back to the My Apps main page.
15. Select your new Welcome page app (on the left side of the page), then click the Application Profile Page link.
16. Click the Add to My Page link.
17. Select the page you want to add the custom iFrame tab.  That’s it – the Welcome Page link should now be visible on your Facebook page.

My Welcome Page is taller than 800 pixels. How do prevent scrollbars when displaying my Welcome Page in Facebook?

NOTE: This applies to Welcome Pages created and added via a custom Facebook application.

How do I change the default tab (the part of my Facebook Page that users who have not Liked my Page are defaulted to when they visit for the first time)?

To change the default tab of your Page:

1. Click “Edit Page” underneath the profile picture when viewing your Page.
2. Select “Manage Permissions” from the left sidebar.
3. You will see an option called “Default Landing Tab.” From there, you can select which tab your Page will default to. Be sure to save your changes to ensure that this is what people will see when they visit your Page for the first time.

The features that can be incorporated into a Facebook Welcome page are limitless. Best of all, you can integrate your branding and incorporate advanced features much more easily than was ever possible before. If you have questions about Facebook Welcome pages, drop Leon a line at leon@odanieldesigns.com. We look forward to answering your questions and to seeing your new Welcome pages.

Save

Save