Multi-Tab Template for Facebook Timeline Page Tabs!
Our TURNKEY template has all the code and files to create a website-like Page Tab.
See it in action, and learn more....


Tweet

It’s Time to Say Goodbye to Facebook’s Static FBML

June 16, 2011 By Tim Ware 63 Comments

NOTE: At the f8 Developer Conference in Sept 2011, Facebook announced that on June 1, 2012 FBML will be completely disabled:

“1. FBML Deprecation: FBML apps will no longer work on Platform. All FBML endpoints are removed as of June 1, 2012.”

And they have it listed on their Developer Roadmap.

We recommend TabPress to add a custom tab to your Page.

It’s time to convert your Static FBML tabs to iFrames

You may have been redirected to this page from one of our Static FBML articles or tutorials. We’ve decided to terminate the Static FBML tutorials because FBML is increasingly less reliable, which leads to confusion and frustration, and to help encourage users to move on to iFrames before Facebook pulls the plug and your Static FBML tabs and FBML tags cease working altogether. It was a good run, but it’s time to move on…

In March, Facebook made it clear that page admins should begin transitioning their Static FBML tabs to iFrame tabs.

Shortly thereafter, page admins discovered they could no longer add the Static FBML application to their fan page and, if they already had it installed, they couldn’t create new tabs.

Facebook continues to support existing installations of Static FBML, but users are finding that some FBML tags aren’t behaving like they used to and the truth is that the functionality of existing FBML tags will gradually diminish until it’s finally terminated altogether.

Page admins should immediately transition to iFrame tabs.

Although creating iFrame custom tabs is technically more difficult, involving creating a Facebook application, using FTP to upload files to a server, and making sure that all the iFrame page assets are hosted in a secure HTTPS environment, a number of free Facebook applications have arisen to help the less technical admins to create custom iFrame tabs without requiring all these skills.

TabPress: a Free Facebook iFrame Tab Application

Here at HyperArts, we developed TabPress, a free iFrame tab application that takes care of the secure hosting of the iFrame page itself.

And using a free secure-hosting service such as Amazon Web Services S3, admins can upload their images and other page assets to a secure server and avoid browsers displaying “mixed content” warnings when both HTTP and HTTPS are used in the iFrame page code.

And instead of having to deal with the eccentricities of using fb:visible-to-connection FBML to create the Reveal / fan-gating feature, TabPress automates the Reveal feature for you, allowing you to enter content for fans in one box and for non-fans in another.

Facebook iFrame Tab Application Tutorials for Coders

For those who are fine with creating Facebook applications and working with Web coding, HyperArts offers some excellent detailed Facebook iFrame tutorials:

Replace your FBML tags with XFBML Social Plugins

Several of Facebook’s Social Plugins, originally developed for use on external websites so they could integrate with Facebook’s Open Graph, can be used on your iFrame tabs.

Just go to the Social Plugins page, and navigate to either the Like Button, Send Button or Comments Box, and Facebook will generate the code you need via a simple interface.

Accept this Change — It’s a Definite Improvement

FBML always seemed like a pretty buggy and unsustainable approach to Facebook coding. The move to IFrames takes the load off of Facebook’s servers (iFrame “canvas” or “index” pages are hosted off of Facebook), and restoring the ability to use standard Web coding practices is a great relief to developers.

And you can use standard HTML, CSS, JavaScript, <embed>, jQuery and PHP to create your custom iFrame tabs, forever leaving behind FBML, FBJS and all the accompanying headaches.

Also, the new fan page layout, rolled out around the same time, has greatly improved the branding possibilities and options for page admins. (Read my Social Media Examiner article about taking advantage of branding possibilities with the latest Facebook page layout.)

Facebook is constantly growing and changing and when you think about it, it’s really quite amazing that it works as well as it does! It’s a free service, has created an amazing global community, and is approaching 700,000,000 users.

Whatever the case, it’ll be very interesting….

Technorati Tags: Facebook, facebook programming, FBML, HyperArts, iFrame applications, Static FBML

Filed Under: Facebook, Facebook Programming, Platform Updates Tagged With: Facebook, facebook programming, FBML, HyperArts, iFrame applications, Static FBML

Thomas

Are there any face to face classes that teach how to work with iFrames and other coding in Facebook?
Thanks!
- http://www.hyperarts.com/blog timware
  
  Hi Thomas. Well, it depends on where you live, of course. We’re in the San Francisco Bay Area and the only place I think *might* offer such a class is Academy X in San Francisco, but I don’t see a Facebook class in their schedule of classes.
  
  We at HyperArts are considering doing an online live training series. We’ll announce it on the HyperArts Fan Page, so stay tuned!
  - http://www.facebook.com/profile.php?id=100000565831709 DipEsh BalwAni
    
    hey buddy you are wrong there are still fbml left…here’s d link to add it
    
    https://www.facebook.com/add.php?api_key=fdfd01c9df7d644a68a4e989ae861e44&pages=1&page=102938863123295
    - http://www.hyperarts.com/blog/ Tim Ware
      
      I strongly discourage anyone clinging to Static FBML. Facebook announced on their Developer Roadmap that on June 1, 2012 FBML will be completely disabled:
      
      “1. FBML Deprecation: FBML apps will no longer work on Platform. All FBML endpoints are removed as of June 1, 2012″
      
      So even if there are tricks to get the app added to your Page, it’s doomed. You might want to take this advice, buddy….
http://facebook.com Admin

masti ki pathshla
psychodreamkids

A big thank to the best side in the world on Facebook bookmarks. Hi Timi. Can you send price list TabPress? My site has a 5k fans. I want to start using TabPres. I want to write myself the HTTP/CSS. HyperArts I read a couple of days and very helpful for me. Please wrote again where I put my CSS. Please take more examples of where I put my CSS. Once again, great respect for you. My English language is not as good. Sorry for language errors and greetings.
http://studio8fitness.com Matt Stevenson

Hi There I use the Tab press app and I am trying to include links on my “FAN Content” tab to link out to my website but it just open it in facebook and you cannot view the entire page. Is there a way to have links on the Fan content page that when clicked will open a new tab or window with my full website? Thank you!
- http://www.hyperarts.com/blog timware
  
  Add: target=”_blank” to your <href> tags so that the link opens in a new window or browser tab:
  
  <a href=”OUTSIDE-URL” target=”_blank”>linked text or image </a>
  
  Or add: target=”_top” or target=”_parent” to overwrite the Facebook page, replacing the Facebook page with the linked URL.
  
  Read more about using the HTML target tag.
http://www.icelandunlimited.is John

Great information! Are there classes available to learn iFrame either in person or online? If it’s something that needs to be done, then those classes would certainly be useful to many people, including myself.
Matt

Hello, I just wonder how to embed vimeo video in iframe fanpage? I also need to know how we can put activation image in embed vimeo video? Can anyone help me on this? I would really appreciate if anyone can provide me codes for embeding vimeo video and also activation image .
- http://www.hyperarts.com/blog timware
  
  Matt, With iFrame tabs you can just use the standard embed code that Vimeo provides. You don’t need an “activation” image … that was a Static FBML requirement, but iFrames can be coded like standard Web pages.
Matt

Thanks Timware for reply. I understand that all I have to copy embed code from vimeo and put in iframe fanpage it will work. but how can we put custom image which will activate vimeo video on embed fanpage?
- http://www.hyperarts.com/blog timware
  
  Matt, You’ll just have to check Vimeo’s documentation. That’s all I would do.
  - Matt
    
    I didn’t find any help on vimeo documentation
Alvaro

Hello,

I have just checked the facebook page of http://www.facebook.com/brendansirish , and I found so bright the way they pull you name on the welcome page. Do you know if there is any open code to do that?
I would love to include that on my page.

Thanks!
- http://www.hyperarts.com/blog timware
  
  Yes, that is nice. Unfortunately, it’s using the deprecated userlink FBML tag and the deprecated Static FBML app. You can do something similar with iFrame tabs — the way Facebook wants you to do custom tabs — but a user would first be presented with the “This application wants access to….” allow prompt which sort of ruins the experience and reduces the number of visits to your page.
hoodog

hello,

will we be able to use fbml: multi friend selector still?
barry

@timware,
Enjoying your blog.

I have a question about FB application and maybe you can help me out. When i create a FB app i set the width to 510px to be sure, but i notice some FB apps to have a width of 760px like http://apps.facebook.com/decidergame/

My question when can i use/create a 760px width app? Should i make two version of a FB app (510px and 760px)?

Any info/experience on this subject?

Kind regards
- http://www.hyperarts.com/blog timware
  
  If you want your FB app to live on a fan page as an iFrame tab, it should be 520px in width including all margins, padding and borders.
  
  If you want your FB app to live on a canvas page (with a URL of apps.facebook.com/my-app — and NOT a tab on a fan page), then it can be 760px in width.
http://www.winestein.fi Viini

I tried the new iFrame tab and I found it’s so much easier from a webdesigners point of view to make than fbml page.
http://www.candlecrest.com Judy

I am using FMBL, but now that it is no longer available, I can not edit ot delete it? Now what? I got to my “apps” and they are not there. Help!
Corinne

Is there a way to change the title on the side bar from “Welcome” to something more customized, like “Contest” or “Fans Content”?

Also, can you link more than one iframe tab link on the site bar? i would like to add 2 new ifrmae tabs o the side bar.

I find your posts very informative!
- http://www.hyperarts.com/blog timware
  
  Corinne, Just click the “Edit page” button at the top right, click Apps in the left menu, then “Edit settings” for the TabPress app. You can make a name up to about 30 characters.
http://www.cmlaw.com Justin

@timware
I am enjoying reading your blog. It is so hard to keep up with all of the changes at FB. Thanks for making this transition a bit easier. I’m also looking for face-to-face classes on this in my area (PA) and wondering what the best resources are to find these and get connected.
Tim

Excellent advice! It’s just that when people want to avail of Facebook’s finer functions, such as for content localization (something MANY businesses should consider), it doesn’t seem they can do this using existing XFBML.
http://www.hyperarts.com/blog/ Tim Ware
http://tech.jucktion.com Niroj Manandhar

Thanks for listing out some of these links for facebook pages. I needed them to iframe an swf to my page.
thanks
EJ

Is there any way on Facebook to unhide the “Welcome” tab for the free TabPress application? I hid the tab by mistake.
- http://www.hyperarts.com/blog/ Tim Ware
  
  You should be able to just click the “Edit Page” button at the top right, click the “Apps” in the left menu, locate the TabPress app and click “Edit settings” then, next to “Tab:” click “Add”.
Pingback: Facebook Fan Page Showcases and learning Resources - Wordpress Arena
Michaelb

I am a huge fan of iframes but I have trouble accessing it via my smartphone. Is there anyway to alievate this problem?

webmaster, bulbamerica.com
“Osram Bulbs”
Shawn Tucker

Nice Article, thank you.

Just a note about your comment at the end:
Nothing is free. You pay for Facebook with your time, actions and personal information.
http://www.moretablet.com MT-Francis

Thank you for sharing this.
We’ll give a try on this one.
Christina Humphries

Well, I think the iFrames for Facebook is a wonderful implementation. At least we don’t have to deal with the limited capabilities of FBML. LEarning FBML is a headache too, unlike iFrames wherein you just plug it in to any website. Hosting it externally makes it an easier job for Facebook too since they won’t have to deal with the maintenance.
http://www.businessinsuranceperth.com.au jodie parker

The iFrames concept is new to me. I like the idea for Facebook Tabs. It is good to know that this exists already. Facebook users can have an option with how their tabs look like.
http://www.optixbars.com/ Sam

Using iFrames instead of those silly tabs is a big step forward for designers. Now we can customize and edit freely and make Fan pages look just how we want.
Mikeb

Iframes is a blessing from the facebook gods, I can churn out fanpages in my sleeep now

Mike Bell
Webmaster, http://www.bulbamerica.com
“Light Bulbs”
http://healthytrim-reviews.com AlexVD

Hi, I’ve searched and searched for answer but whatever I found didn’t work.

I’m trying to figure out how to center an iframe that uses the Facebook “like” icon and count no. No matter what I do it stays flush left.

Specifically I want the “Like” icon and count no. to center under “For Facebook Members:”
ali shass

Found your weblog by accident for the second time these days so I considered I would have a nearer appear. I’ve just started producing my own blog site and modeling it right after what you have done. I hope mine is going to be as profitable as yours.
markkinointirekisteri
ali shass

The beauty of these blogging engines and CMS platforms is the lack of limitations and ease of manipulation that allows developers to implement rich content and skin
Dance wear Toronto
ali shass

I will note your feed to keep up to date with your approaching updates.Just striking and do uphold up the good work.
laser hair growth
ali shass

I’ve ever seen; you may include some more ideas in the same theme. I’m still waiting for some interesting thoughts from your side in your next post
a math
http://www.la-personal-trainer.com/ LA Personal Trainer

Thanks for this article! I was in the middle of doing a static fbml until I googled facebook fbml and found this!
http://www.conducirunferrari.es Mateo Fontaine

Ok, you’ve convinced me. I’m going to bite the bullet and make the transition this afternoon. Thanks for the useful tutorials – they are being printed right now

Mateo
Ammoskumar Bariaya

I hate Facebook, man they been changing and updating the features and it becomes really frustrating sometimes.. well this the only way to keep in shape : lol…
- http://www.hyperarts.com/blog/ Tim Ware
  
  That’s right. Roll with the changes. Facebook is in unexplored territory. 800M+ users. It’s amazing it all works as well as it does, IMHO.
http://www.facebook.com/profile.php?id=584341473 Guðmundur Jónsson

Facebook will Turn Off all FBML on June 01, 2012. Transition to iFrames Now! Last year, Facebook announced its plan to deprecate FBML as a Facebook page administration platform over time. This March, it followed up this statement with the announcement of a full transition to iFrames, phasing out FBML. Since March, page admins have not been able to create any new FBML apps, but apps which were already in existence remained functional until the deprecation was scheduled to begin. Facebook announced at f8 the official deprecation date of all FBML endpoints: June 1, 2012. This is the date when any remaining FBML modules inside of Facebook will cease to function. As the time has come to fully transition to iFrames and depart from the FBML standard completely, PandaCMS is a FREE iFrame software and can do the same as the old FBMLSEE APP HERE.https://www.facebook.com/apps/application.php?id=166054446814641
- http://www.hyperarts.com/blog/ Tim Ware
  
  Thanks for the update, Guomundur. Since we’re doing some plugging for free iFrame apps, I suggest TabPress.
  
  BTW, the June 1, 2012 FBML deadline can be confirmed on the Facebook Developer Roadmap:
  
  “June 1. FBML Deprecation
  FBML apps will no longer work on Platform. All FBML endpoints are removed as of June 1, 2012″
Anonymous

Good to know, I’ll check out TabPress and thanks for the https tip with amazon s3.
- http://www.hyperarts.com/blog/ Tim Ware
  
  Cheers, Scott!
Anonymous

When I translate my FBML page to the iframe layout it gives me a different app id and secret. So will I lose all my “Likes” on my page?

thank you
- http://www.hyperarts.com/blog/ Tim Ware
  
  If you mean Likes on your *tab*, you may. But you won’t lose Likes on page.
  I’m not sure what you mean by “it gives me a different app ID and secret”? Static FBML didn’t use App IDs or App Secrets, as I recall. You’re creating an iFrame Page Tab to replace your Static FBML tab, right?
Cheryl Mortensen

Hey do you know a place that does Facebook coding? If I have my design for my landing page, someone who can code it to be a FB landing page.
- http://www.hyperarts.com/blog/ Tim Ware
  
  We do Facebook coding from provided designs. Here’s a link to our project form:
  http://www.hyperarts.com/social-media/contact-smo.html
http://twitter.com/bosch_mike Mike Bosch

The HTML and FBML are same? can any body explain about the FBML? I want to custom FBML page.
- http://www.hyperarts.com/blog/ Tim Ware
  
  FBML is/was Facebook’s own version of HTML. However, it’s deprecated (doomed) and will not be supported after June 1, 2012.
  You want to create custom page tabs either manually (here’s our tutorial on how to do this) or by using an iFrame page-tab creator, like TabPress, where you input your HTML, JavaScript and CSS via text boxes and you don’t need to create an application yourself.
Analisa

HTML and FBML are not the same. I suggest you look at some of our older posts about FBML to learn the difference.
http://www.facebook.com/profile.php?id=100000227988200 John Doeling

FBML was nothing special. Good thing they took it out already
- http://www.hyperarts.com/blog/ Tim Ware
  
  Well, it facilitated programming tabs for Facebook fan pages. But it’s been made irrelevant and obsolete by iFrames. RIP.
http://www.hyperarts.com/blog/ Tim Ware

Just add target=”_blank” or target =”_top” to your <a href> tag.
http://www.hyperarts.com/blog/ Tim Ware

At the time, it was Facebook’s way of having a proprietary version of HTML and JavaScript that interacted with their API. But good riddance! Having to deal with these eccentric flavors of coding was a major drag.
http://www.facebook.com/Inclouddesigns Bobby Caron

Nice article, I just posted about this issue at my blog. One of my main concerns is the layout size for Flash templates used within an iFrame. Thanks for the post.

Trying to embed this:

http://inclouddesign.com/flash-fan-page/
- http://www.hyperarts.com/blog/ Tim Ware
  
  Your post says that “Before too long you will be able to use iFrames to embed your custom content.” But you can already use iFrame custom tabs to do this. Of course, at this point I’m not sure why anyone would want to have a custom tab in Flash.
  Although some iPad users may use the Facebook app which doesn’t show custom tabs anyway, there are many other reasons for avoiding all-Flash content.