HostGator Sale

How to Create and Add Custom iFrame Tab to Facebook Page

HostGator Sale

[UPDATED 25/12/2011] If you want to Insert your external Web Page as one of your Page tabs, now this can be done easily with ready–made custom iframe apps. This will also solve the Secure Hosting requirement for your custom apps to display properly in ‘secure browsing’ on Facebook.

Below method is ONLY useful for those who wish to create iframe application for other Facebook users to add to their Facebook Pages:

It has been almost two weeks since the official launch of iframe app, replacing the good old static FBML tabs on our facebook pages. For those who aren’t sure what is an iframe, basically it is a standard HTML tag to enable a HTML document to be inserted into another HTML page. The benefit of iframes over FBML is that it accepts a wide range of web coding (Javascript, CSS etc) that used to be non-compatible in static FBML to create dynamic content for our custom tabs. Best of all, you can even import your custom made web page to be included in your fan page! Imagine how convenient that would be for your promotional effort!

Since no more NEW static fbml applications can be added to our managed pages, it’s important to know exactly how to work from creating the app to adding it to your facebook page successfully. I will try to be as thorough as I manage:

How to Create and Add Custom iFrame Tab to Facebook Page


Firstly, you need to prepare a html page to be inserted into your facebook page. You may use Dreamweaver for the job and upload the html file to your web server so to be pulled into your fan page later. Or, we can do this the easy way with less complication via a wordpress plugin named Facebook Tab Manager. What I love about this tab editor is that it saves time and keeps the custom tab size limit of 520px wide so no resizing is needed afterward.

Add Facebook Tab Manager to your WordPress Blog


1.  Login to your blog and add Facebook Tab Manager to your plugins.

2.  Activate it and look for ‘Facebook Tabs’ at your sidebar -> click ‘Add New’. Notice that to create the iframe tab content is as easy as how you normally write a new post.

create iframe content with facebook tab manager

3.  When done, hit ‘publish’. New instructions will appear at the bottom of the post on configurations to register your content on facebook:

configuration for facebook integration tab


Customize Facebook Tab with iframe App


4.  Go to Facebook Developer and start setting up your new iframe app.

create iframe app for your facebook page at developer page

[UPDATED Image: 25/12/2011]

create new app on facebook developers

[END]

Note:

Some of you who are creating your facebook application for the first time, verification process may be required. If you had already verified your facebook account before this, you can bypass this step. Otherwise, you need to go ahead and select to verify your account with mobile phone or credit card. Or, if you are not comfortable with this step, add an admin who is already done the verification to work on the new iframe application.

5.  The ‘About’ section consists of some necessary fields besides filling in your app name. Add image to your icon and logo so it’s recognizable.

basic information for your iframe app

[UPDATED Image 25/12/2011]

Edit your app icon: Settings -> Basic -> Edit icon:

edit icon for your iframe app

[END]

Tips: Why icon/logo image is important?

‘Icon’ image will show up next to your app name when added as a new tab to your facebook page. ‘Logo’ image will appear in app directory, for example:  you can have a look at your ‘Edit Page -> App after you added it to your page :

app logo for your iframe app

6.  At ‘Facebook Integration’ section is where all the hard work landed. Here are some important fields that required to be filled correctly:

In Canvas Section:

  • Canvas Page – the base URL of your application on facebook.
  • Canvas URL – this is the URL where facebook pulls in your iframe content.
  • Secure Canvas URL – the secure version of Canvas URL with ‘https’. Basically the same info you entered in your ‘Canvas URL’.

Complicated? No worries. Refer back to step #3 above and locate the ‘Facebook Integration Tab’ in your blog and copy/paste the links given to you, for example:

Canvas URL and Tab URL given by your facebook tab manager plugin

[UPDATED Image/Instructions 25/12/2011]

Go to Settings -> Basic -> Select how your app integrates with Facebook -> Save Changes:

select how your app integrates with facebook

To create and associate a new (community) page with your app, go to Settings ->Advanced ->Contact Info ->App Page (Create Facebook Page) (optional) :

create community page for your iframe app

[END]

Below is the example of how Canvas section is filled:

canvas info for iframe app in Facebook Integration section

*Caution*:

If you are unable to see the iframe app after installed to your page (regardless if you’re in ‘http’ or ‘https’), leave the ‘Secure Canvas URL’ field BLANK. Your iframe tab should be able to work in ‘http’ (non-secured browsing) and in order to view that, you need to go to Account -> Account Settings -> Account Security -> UNCHECK Secure Browsing. This is believed to be caused by a known issue on how our custom app is not visible when viewed in secured browser (https) as described in this bug report.

The bug occurred in February and was said to be fixed in mid March, however it seems that the bug is back again recently and affecting some of my pages. Will follow up on this issue and if you know how to fix this, do share.

In Page Tabs Section:

The important parts are ‘Tab URL’ and ‘Secure Tab URL’. Both links are referring to the html file location including its file name -> Save Changes:

Information for Page Tabs

*Caution*:

Again, if your app tab is not viewable, leave the ‘Secure Canvas URL’ field BLANK until the bug issue for secured browsing (‘https’) is fixed.

So now, your new iframe app is created!


Add Your iFrame App to your Facebook Page


[UPDATED 25/12/2011]

Refer to the documentation on how you can add a page tab dialog, or the one near to the end of this post. Clearly there is no longer a view app profile page link available in Developers apps section. No idea why though. [END]

7.  Now go back to your ‘My Apps’ page and select ‘Application Profile Page’.

application profile page for your iframe app

8.  Then as how you normally add application to your page, click ‘Add to My Page’ -> then Add to the page you want:

add iframe app to your selected facebook page

9.  See that a new tab is added at your page sidebar. Rearrange the tab [#2(c)] to a preferred location or set it as your landing tab.

iframe tab successfully installed to page

*Caution*:

For some web developers who intends to import their external web pages to facebook pages, be sure to check if your page consists of any disallowed ad providers. Thanks to Kim for providing this info so not to violate facebook Terms of Use (refer to the part about ’9. Special Provisions Applicable to Developers/Operators of Applications and Websites’).

10.  You can rename your custom tab by going to Edit Page -> App -> your app name -> Custom Tab Name -> after edit, click Save:

customize your iframe tab name

 

So whenever you wish to create a new custom tab, you need to go through all the steps again to get it done. Time consuming isn’t it?

To make things easier, if I could I will try to find other alternatives or ready-apps so even facebook beginners could enjoy as much privilege without having to go through the lengthy steps. Be sure to follow close and don’t miss upcoming posts!

Updated Post to check out:
7 Free iFrame Applications to Create Welcome Tab (Custom Tabs) for Your Facebook Page.

Now Is Your Turn…


How is your experience with iframe app so far? Has it been more useful for your page or not? Do you have any special tips to add? Feel free to do so in the comments.

Like what you’re reading ? Subscribe via RSS Feed or email so you won’t miss a thing:

Enter your email address:

 


Web Hosting
7 Comments

Add a Comment

Your email address will not be published. Required fields are marked *