WARNING 1: There is currently a bug that prevents iframe content from appearing for users who are not logged into Facebook. Get the latest status on this issue from Facebook dev.
WARNING 2: Iframe content does not currently display if you try to view the custom tab over https. Get the latest status on this issue from Facebook dev.
IMPORTANT: You have to upgrade your Facebook Page to the new layout before you can add a custom tab containing iframes. You will see a banner at the top of you Facebook page, if you have not yet upgraded.
FBML is Facebook’s proprietary markup language that can be used to create custom tab layouts on your Facebook Page. This was done by adding the Static FBML app to your Page.
On March 11, 2011, you will no longer be able to add the Static FBML app. However, all existing Static FBML apps will continue to function so if you’ve created a custom tab on your Facebook Page already, then you do not have to take any action at this time.
Instead, you will need to use iframes to create your new custom Facebook Page tabs.
Using Iframes to Create a Custom Facebook Page Tab
The process for using the iframes app to customize a tab on your Facebook Page is different than using the Static FBML because you’ll be using the Facebook app development process. Enabling the custom Facebook Page tab is a three step process:
1) Installing the Facebook Developer Application
2) Creating Your Custom Iframe App
3) Adding Your Custom Iframe App to Your Facebook Page
Installing the Facebook Developer Application
1) Got to http://facebook.com/developers
2) If this is your first time visiting the Developer App, you will need to allow it to access your personal information by clicking on the “Allow” button on the popup box
This procedure only has to be performed one-time. You’re now able to create as many apps as you want.
Creating Your Custom Iframe App
1) Now, click on the “Set Up New App” button in the upper right corner of the page
2) Give the new app a name such as “My Custom Tab App”, click the “Agree” radio button, and click the “Create App” button
3) Enter the Captcha text in the security check
4) Enter a description for your app
5) Click on “Facebook Intergration” from the left menu
6) In the “Canvas” section, enter the location on your server where you will host the application files
7) In the “Page Tabs” section, enter information about your Page tab
8) Leave the other settings with their default values and click the “Save Changes” button
Your custom tab iframe app has now been created. The next process is to add it to your Facebook Page.
Adding Your Custom Iframe App to Your Facebook Page
1) Click the “Application Profile” link from the right menu on the new app you just created
2) Click the “Add to My Page” link in the left menu
3) Click the “Add to Page” button for the Facebook Page to which you want to add the new iframe app
4) Click the “Close” button on the popup window and navigate to the Facebook Page to which you just added your new iframe app
5) Your new iframe should appear in the list of tabs on the left side of the Page
Next Steps
You can now use HTML and CSS to create content for your custom iframe tab on your Facebook Page. The HTML and CSS will be hosted on your server in the location specified in the iframe app settings and will appear on Facebook within a iframe. With this option, you now have the ability to create very customized tab content fro your Facebook Page.
Sample HTML/CSS
Here’s sample HTML/CSS that you can use to wrap your own content. This wrapper will take care of removing any unnecessary margins or padding:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<style type="text/css">
body {
width:520px;
margin:0; padding:0; border:0;
}
</style>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
</head>
<body>
<div id="container">
[YOUR HTML GOES HERE]
</div>
</body>
</html>
Feel free to post questions and feedback below.
Free Social Media Strategy Template
Are you overwhelmed by the number of social media sites and don’t how to integrate social media into your sales and marketing plans?.
If you don’t have one already, here is a free template that will help you clearly identify and align your business goals and social media marketing activity.
The post Facebook Change from FBML to Iframes for Custom Tabs appeared first on Accelerated Online.
