Facebook have made a major change to the way you add tabs to your Facebook Page, FBML is out and now a much simpler system using good old iframe is the way forward.
This does take a little bit of setup but once you do iframes make it really easy to change the content in your Facebook tabs without having to know complex FBML (unless you want to!) It also means you can build more dynamic tabs because you can control everything from your web server rather than messing about inside an FBML box.
You can see an example on the High Lan Technology Application on Facebook Page
What you need:
- A Facebook page
- A web server (where your iframe content will be hosted)
- 20 – 30 minutes of your time
What is an iFrame application?
An iFrame application you allows you to embed an external Web page in your custom Facebook Page tab. Your “index” or “canvas” page is actually hosted on a non-Facebook server and is surrounded by Facebook “chrome” (the Facebook elements on the page).
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. Or you can add an iFrame-creation application to your page, such as TabPress, freeing you from having to create a Facebook application but more restrictive in that you can’t control the icon that appears next to the tab name in the left navigation.
Setting up your server
Facebook’s HTTPS / Secure Hosting Requirement
The first thing to know is that wherever you host the index page of your Facebook iFrame application, the server will have to be secure, i.e., have an SSL Security Certificate for the domain under which it’s hosted.
If your index page is not hosted on an SSL secure URL, or you don’t specify a Secure URL in your app settings, your tab will not display for those using Facebook under Secure Browsing. Instead, the user will see:
Create your iFrame application
On your secure Web server, create a directory for your iFrame application. In this example, on our server we create a new directory called “facebook” and then a subdirectory called “mytestapp”. The file path will look something like this in your FTP program:
Your HTML file
You’ll want to set the main container DIV for your content to 520 or 810 pixels wide.
This is some HTML content
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.
Click the Allow button to proceed.
Creating your iFrame application
Now that you have the Developer App installed, click on the Create New App button.
Give your application an “App Display Name” (the name displayed to users) and a “Namespace” (for use with Open Graph — 8-character minimum; alpha, dashes and underscores only — keep trying until you get a Namespace that hasn’t been used). Then tick the “I agree to Facebook Platform Policies” box; then click the Continue button.
On the next screen, 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 iFrame tab application up and running.
The Settings Tab
This is where you do the basic set up for your app.
First, at the top, you’ll see the App ID and App Secret values. Most frequently you’ll be using your App ID to integrate with Facebook.
Second, notice the “edit icon” below the App Secret. This is the icon that will appear to the left of your tab’s name in your page navigation, so make it eye catching and make the dimensions 16 x 16 pixels. If you don’t create your own icon, your tab will have a generic Facebook-tab icon:
- App Display Name: Make this the same as the original value you provided;
- App Namespace: Make this the same as the original value you provided;
- Contact Email: Where you want Facebook to send emails regarding your app;
- App Domain: just put “mydomain.com” where “mydomain.com” is your secure hosting server;
- Category: Select a category from the pulldown list.
Since Facebook instituted their HTTPS requirement for all applications, they started offering cloud hosting solutions for those who find setting up a hosting account and secure server too much bother, expense or both.
But click the Learn More if you’re interested.
Select how your app integrates with Facebook
This is where you select the type of application you’re creating and how it integrates with Facebook.
An explaination of the Facebook-integration values
For the purposes of this tutorial, you will select “Page Tab” from the various integration options. It’s the last one listed but once you’ve saved your changes it will be listed first (as in the above example).
- Page Tab Name: The displayed name of the tab in the Page navigation;
- Page Tab URL: The unsecure URL (HTTP) of your index page — if the index page is named either “index.html” or “index.php” you can just put the directory with a trailing forward slash (as in my example above); OR you can specify a file name in the directory, eg myapp.html or myapp.php;
- Secure Page Tab URL: Same as the “Page Tab URL” but with HTTPS instead of HTTP;
- Page Tab Edit URL: You can create any URL at your domain here and then set up that URL to redirect to the Edit Page for the Facebook tab. This is commonly done using a 301 or 302 Redirect. I’m not covering 301/302 redirects in this tutorial;
NOTE: The “App on Facebook” URL MUST be a directory, not a specific file: http://www.myDomain.com/facebook/mytestapp/
The “Canvas Page” value is autofilled by Facebook, with your Namespace value. Click “Save Changes” and you’re done! Installing your iFrame application on your Fan Page
Installing your iFrame application on your Fan Page
If your App is only to add a Page Tab to your Facebook Page, and not an App that you want to make available to multiple pages, you can simply navigate to this URL in your browser:
Replace “YOUR_APP_ID” with your App ID and “YOUR_URL” with your App’s Canvas URL, both of which values are available in your app settings.
You’ll see a page similar to this the one below when you navigate to that URL:
This material is avaliable in English Only..