Wednesday, 20 April 2011
Add an iFrame Application to your Facebook Fan Page
Do you like this story?
This post was updated on 3/19/11 to reflect change to Tab URL and Secure tab URL settings.
Facebook recently announced that on March 11, 2011, the Static FBML application will no longer be available to be added to Pages and that no new FBML applications can be created after that date.While Facebook indicates that current Static FBML and FBML tab applications will continue to function for now, it strongly encourages everyone to move from FBML to using iFrame applications.
Over the coming weeks, we will be posting a series of tutorials to help you get started with using iFrame applications on your Fan Page.
iFrames are now supported on Page tabs
Prior to February 10, 2011, Facebook had disallowed iFrames on Page tabs and, although allowed on Canvas pages, iFrames required a user to click activation text or an image to load the iFramed content.
However, as of February 10 iFrames are allowed on both Page tabs and Canvas pages AND they don't require an activation to load them!
What is an iFrame application?
An iFrame application you allows you to embed an external Web page in your Facebook Page tab (in the new Page layout, "tabs" have been moved from the top of the page to the left column.).
The good news is that the iFramed Web page, because it isn't hosted on Facebook, can use standard HTML, CSS, and JavaScript like any other Web page does. Interactions with Facebook content are done using the Facebook Software Development Kits (SDKs) and XFBML tags. (For this tutorial, the Facebook SDK is not required.)
The downside of this approach is that you need to be familiar with those technologies and you will need a Web-accessible server where you upload the files for your application page.
Setting up your server
On your Web server, create a directory for your iFrame application. In this example, we are going to create a new directory on the server called "facebook" and then a subdirectory called "mytestapp". The file path will look something like this in your FTP program:
You will want to put all of your files (HTML, CSS, Javascript, PHP, etc) in this folder or its subdirectories. If you don't know how to do this, read this FTP tutorial.)
Your HTML file
Remember, in your HTML file you can utilize CSS — and inlining styles with the <style> ... </style> tags works fine with iFramed HTML files — and JavaScript (Do not use FBML or FBJS!).
You'll want to set the main container DIV for your content to 520 pixels wide. Here's a very stripped-down example of your HTML file:
<!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">
<p>This is some HTML content</p>
</div>
</body>
</html>In the above example, I include both the code for an external stylesheet called with the <link /> tag, as well as inlined styles called with the <style> ... </style> tags, in case you want to do it that way. Either should work fine.
Installing the Facebook Developer Application
The first step in creating an application in Facebok is to install the Facebook Developer application.
To do that, log in to Facebook and then visit the URL http://facebook.com/developers
If this is your first time installed the Developer Application, you will see the Request for Permission dialog show below:
Click the Allow button to proceed.
Creating your iFrame application
Now that you have the Developer App installed, click on the Set up New App button.
Give you application a name, click the Agree bubble and then click the Create App button.
Enter the security phrase and then click Submit.
There are a lot of options you can tweak related to your application. In this post, we are going to focus on the basics needed to get your application up and running.
The "About" Tab: Name your application and set a small and large icon
Give your app a name that is short and descriptive. This name will appear on your list of apps on your developer page.
The icons are quite important, especially the small one now that it's shown in the left-column navigation. So make it eye catching. If you don't create your own icons, you'll get the defaults, as shown below.
The "Facebook Integration" Tab: The really important stuff!
Click on the Facebook Integration tab on the left to get started.
In the Page Tabs section, enter information about the location where you have stored your application files.
- The Tab Name is what will appear on the sidebar of your Fan Page. It can be up to 16 characters in width;
- The Page Tab Type should be set to iFrame;
- The Tab URL is the complete path, including file name, of the file that should be loaded first when the Tab is loaded into your Fan Page. It will generally end with index.html, index.php or something similar;
- The optional Secure Tab URL is the complete path, including file name, of the file that should be loaded first when the Tab is loaded into your Fan Page if the visitor is accessing Facebook over a Secure connection (https://facebook.com). It will generally end with index.html, index.php or something similar. This URL must begin with https:// so leave it blank if you don't have a SSL certificate for your server.
Note: If you do not enter a Secure Tab URL, visitors will not be able to access your Custom Fan Page Tab if they are connected to Facebook over SSL (https). The app will not be visible to them and they will see your Wall rather than your Custom Tab if they access your Fan Page.
Click the Save Changes button.
Installing your iFrame application on your Fan Page
Once your Facebook application has been created, you will need to add it to your Fan Page. To do that, click on the Application Profile Page link on the right side of your application page.
Now click the Add to My Page link on the left.
A dialog overlay will open and will show any pages that you are an Admin on.
Find the page that you want to add the Tab to and click the Add to Page button.
Your new iFrame app should now appear on your Fan Page. If you don't see it there right away, you may need to adjust your Page settings. From your Fan Page, click on the Edit Page link. Then click on Apps and find the application that you just added. Click on the Edit Settings link next to the app and Add link.
Troubleshooting
Based on feedback to this post, we are starting to compile some iFrame App Troubleshooting Tips. We will update this section as new questions some up.
Check your URLs!
Make sure that the URL you set for your iFrame is correct. Try accessing it directly, via your browser, instead of via your Page tab. Bad URL addresses are the most common problem. If the URL to the Web page or image you want in your iFrame Page tab is incorrect, obviously the tab won't work.
Make sure that the URL you set for your iFrame is correct. Try accessing it directly, via your browser, instead of via your Page tab. Bad URL addresses are the most common problem. If the URL to the Web page or image you want in your iFrame Page tab is incorrect, obviously the tab won't work.
You can also test the validity of your URL by right-clicking the area where your iFramed content should be and then select "This Frame: Open Frame in new window" or something similar (each browser presents this option a little differently).
Error messages from your server (error 405 - HTTP verb or similar)
If your server returns an error when Facebook tries to load the HTML page into the iFrame, you may need to change the file extension from .html to .php or .aspx (depending on the server platform you are using). When Facebook loads the iFrame, they do a POST to the index page in order to pass some data to your application and it looks like some servers are set up to not allow a POST to a file with the .html extension. We will be taking a look at how to access the data that Facebook passes in the next tutorial, but I wanted to mention this now since it caused issues for some people.
If your server returns an error when Facebook tries to load the HTML page into the iFrame, you may need to change the file extension from .html to .php or .aspx (depending on the server platform you are using). When Facebook loads the iFrame, they do a POST to the index page in order to pass some data to your application and it looks like some servers are set up to not allow a POST to a file with the .html extension. We will be taking a look at how to access the data that Facebook passes in the next tutorial, but I wanted to mention this now since it caused issues for some people.
Scroll Bars
If your iFrame content causes a horizontal scroll bar to appear, something is causing the width to exceed 520 pixels, which is the maximum that Facebook allows. Read our tutorial on troubleshooting and eliminating the iFrame scrollbars.
If your iFrame content causes a horizontal scroll bar to appear, something is causing the width to exceed 520 pixels, which is the maximum that Facebook allows. Read our tutorial on troubleshooting and eliminating the iFrame scrollbars.
We recommend adding some CSS (either inline as shown below or in your separate CSS file) to remove margin, padding, and border from elements by default. Many browsers add spacing around certain elements by default which can cause the scrollbars to appear unexpectedly.
<style type="text/css">
body {
width:520px;
margin:0; padding:0; border:0;
}
</style>Next Steps
If you are famaliar with HTML and CSS, you can begin building your tab page content right away. In future tutorials, we will be looking at adding interactivity to your Tab using the PHP SDK and XFBML tags.
We would love to hear what you would like to see in this series -- If you would like to know how to do something specific using iFrame applications, just note it in the comments and we will see what we can do.
Read more: http://www.hyperarts.com/blog/adding-iframe-application-to-facebook-fan-page/#ixzz1K6S0NUJV
This post was written by: kashif
For Suggestions and complains email us at pakcompany@yahoo.comTwitter
Subscribe to:
Post Comments (Atom)
0 Responses to “Add an iFrame Application to your Facebook Fan Page”
Post a Comment