Learn More About :
Home FAQ How to Create a Facebook Iframe Tab for your Page?
Friday, 18 May 2012 10:09

How to Create a Facebook Iframe Tab for your Page?

Rate this item
(0 votes)

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:
  1. A Facebook page
  2. A web server (where your iframe content will be hosted)
  3. 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).
Because this iframed page isn’t hosted on Facebook, it 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. 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:

nonsecure-fb-error

 

The other assets called into your page (images, JavaScript, CSS, video, etc.) will also have to be hosted under HTTPS

 

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:

file_path

 

You will want to put all of your files (HTML, CSS, Javascript, PHP, etc) in the “mytestapp” folder or its subdirectories.

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 or 810  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 scoped="scoped" 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 the first time you’ve installed the Developer Application, you will see the Request for Permission dialog show below:

permission

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.
create-new-app
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.

iframe-app_new-app-dialog

On the next screen, enter the security phrase and then click Submit.

security


 

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.

iframe-app_basic-info

 

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:generic-tab-icon

Basic info:

 

  • 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.


Cloud Services


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.

iframe-app_select-how

 

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;

If you intend to use calls to the Facebook JavaScript SDK on your tab – Add “App on Facebook” values
If you want to use the Facebook JavaScript SDK in your Page Tab — for example, our Share Button for Page Tabs — you will also need to select the “App on Facebook” integration, and add the same URL values as for “Page Tab”:

iframe-app_pageapp

NOTE: The “App on Facebook” URL MUST be a directory, not a specific file: http://www.myDomain.com/facebook/mytestapp/

NOT

http://www.myDomain.com/facebook/mytestapp/mycanvaspage.php

So if you need to specify an “App on Facebook” URL, you’ll need to use “index.html”, “index.htm” or “index.php” for the file name of your canvas page.

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:

https://www.facebook.com/dialog/pagetab?app_id=YOUR_APP_ID&next=YOUR_URL

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:

Screen-Shot-2012-01-15-at-3.46.13-PM


This material is avaliable in English Only..



Last modified on Friday, 18 May 2012 11:30

1 Comment

  • Comment Link home page Monday, 04 February 2013 01:35 posted by home page

    you are in reality a excellent webmaster. The web site loading velocity is incredible.
    It kind of feels that you're doing any unique trick. Also, The contents are masterwork. you've done a wonderful
    process on this subject!

Leave a comment

Make sure you enter the (*) required information where indicated.
Basic HTML code is allowed.