• Skip to main content
  • Skip to primary sidebar
  • Skip to footer

Vestor Logic

Wyoming's first and only choice for click inspiring web design

  • Home
  • Services
    • Web Design
    • Brand Development
    • Content & SEO
      • Site Primer Service
      • Content Creation
      • Content Optimizer Service
      • 12 Week SEO Workshop
    • Email Marketing
  • Design Philosophy
  • Portfolio
  • Contact

Vestor Logic / February 21, 2011

Facebook: Convert your Static FMBL to iFrame – It’s not as painful as you think!

Facebook recently put into action the long anticipated change from Static FBML to iFrames, requiring all new custom content on Facebook Fan pages to be built as a Facebook iFrame application.

This new update will be forced though on March 11th but you can (and should) get a jump on it now. This is actually a really good thing for Page owners and developers. It means that you can use standard html, css and javascript becuase your content will be calling a page directly from your site. You will still need to plan and build for the limitations of 520×720, the depth/height limitation is new, but you can figure ways to work with it).

The previous Tabs we are all used to will be gone, but you could create your own tabs within your 520×720 framework, if you want a more multi-page feel (check out Trailsherpa’s facebook page here to see how I solved for that). Again, this is a great thing because you will have full control over the length, appearance and style of those tabs.

Alright so how do we do this thing?

I create and implement your new iFrame app you’ll need to do 3 things:

1)      Create a Facebook iFrame application and associate it with your Fan Page

2)      Create a PHP page on your website that you will call from your iFrame application

3)      Upload that PHP page and its related assets

Step 1: Create a Facebook iFrame application and associate it with your Fan Page:

1)      Login to Facebook and go to http://www.facebook.com/developers/createapp.php to create your new app

a.       Give your application a name (this name will not appear on your Fan Page) and agree to terms

2)      Add an icon and or logo, contact email and privacy policy links (if you don’t have those policies, just link to the main page of your site). Add an icon, it will show up next to your app in the left nav of your Fan page. The logo is more for if you intent to share this app with others (think Farmville). Save changes.

3)  On the Website Tab, add your site url (not actually neccesary).

4) Go to the Facebook Integration tab. This is where things get mildly complicated.

a.       For Canvas Page select a folder that makes sense as the base url for your application. This will need to be DIFFERENT for each application you create and can only contain lowercase letters, dashes, and underscores.

b.      Canvas URL: this is going to be the FOLDER on your site where you create your PHP page and its related assets. MUST HAVE TRAILING SLASH (i.e. be a folder).

c.       Select iFrame and autoresize (not that it will resize) or show scrollbar if you have a page deeper than 720. They are pretty unpleasant looking, avoid them if you can.

5)      Scroll down to Page tabs at the bottom.

a.       Create a page name, limited to 16 characters. This is the name that will appear on your fan page as a link on the left and at the top of the iFrame “page” .

b.      Tab url: this is the actual page that you will be calling for the iFrame content. Where is says CANVAS_URL, once you save that will change to the name of the folder you designated above. This page can be called whatever you want, as long as it’s .php (.html will not work). So in effect, based on my current inputs, my new iframe content will be pulled from: http://vestorlogic.commy_awesome_app_folder/index.php.

c.       Save changes. Your app is set up!

6)      You are now on your applications main edit page. Associate your new application with a Fan Page

a.       Click the “Application Profile Page” link on the right.

b.      Now you are on your apps public page, click “Add to My Page” from the left nav. This will bring up all the pages you admin. Select the correct one and add it.

That’s it for the Facebook integration!

STEP 2: Create a PHP page on your website that you will call from your iFrame application

1)      This is where things get a lot more standard. You’ll want to create a page on your site in the folder that you designated in your app. In mine it was: http://vestorlogic.commy_awesome_app_folder/index.php.

2)      If you already have a Static FBML tab, you can go to that tab, copy the code and paste that into a new .php file, save and upload. In the above example my file would need to be called index.php and it would need to live in the “my_awesome_app_folder”  folder.

STEP 3: Don’t forget to upload this page and its related assets!

Now you will see your new app listed as a link on the left nav of the fan page you related it to. You can see ours here.

See that little Welcome link on the left with the icon? Awesome!

Special shout out to Paul Kortman’s great post that helped me figure it out.

  • Facebook
  • Twitter
  • LinkedIn
  • Pinterest
  • Email

Filed Under: Social Media Tagged With: create a facebook iFrame app, facebook fan page, Facebook iFrame application, facebook tab, iframe app, iFrames, static fbml, static fbml to iframe

Primary Sidebar

  • Email
  • Facebook

Contact Us

  • This field is for validation purposes and should be left unchanged.

Footer

Work with us

We're proud of the work we do, the speed and effectiveness of our service, the personal connection we form with each client, and the impact we have on our clients' businesses.

Contact Us

Contact us for a consultation or call now to get the ball rolling. You can reach us at 702-321-0790.

Tim Miner

Tim is the founder of Vestor Logic, father of two, and calls Buffalo, WY home. He also manages Modern Steader, an edible education company he co-founded in 2013.

 

Jessica Ziegler

jessica ziegler headshotJessica is the Director of Design and one of the most entertaining moms you'll find anywhere on the web. Check out her creativity on Science of Parenthood.

Follow Us Online

  • Email
  • Facebook

© 2022 Vestor Logic | Site by Vestor Logic