Custom Facebook pages with iFrames | 8 steps for non-developers

facebook navigation

Facebook have more formally announced they’ll be phasing out the use of FBML for custom Facebook pages (or ‘tabs’ in the old look – more about the new look) and switching to the use of iFrames and embedded Facebook apps.

“Damn”, you may be thinking, “I only just worked out how to create a landing page with FBML”. Well, don’t be so downhearted; this change should give brands and sites a lot more freedom in what you can now do on your Facebook pages:

  • Couldn’t invest in making a fancy Facebook app?
    With iFrames just embed your site’s functionality. E-commerce, signups, you name it!
  • Never able to easily track a Facebook page?
    Just put Google Analytics on the page you are drawing through it’s being tracked!

FBML is still going to be around for a little while but Facebook won’t let you create new pages through it from 11 March apparently, so it’s worth getting up to speed.

The added flexibility means more content is likely to stay on Facebook rather than leading off to external sites, which is better for Facebook. It could also be better for you, as some research has shown that users convert better from Facebook ads if they remain within Facebook. Wow, I said ‘Facebook’ a lot in that paragraph…

How to create a Facebook iFrame page

in 8 easy steps

First things first – you need to create the new iFrame Facebook tabs/pages by making an ‘app’. It sounds daunting but it’s relatively straightforward with the steps below:

  1. Create the content you wish to be have on your Facebook custom page on your own website or server, but ensure that it is max 540 pixels in width as otherwise you’ll need to scroll across, which is plain nasty.
    Let’s say you’ve put it on http://www.attacat.co.uk/FBtest.
  2. Use the following link to create a new Facebook app.
    facebook create app
  3. Name the app (this is just so you can identify it from a list), agree to the terms of service and create.
  4. Fill in the ‘about’ and ‘web site’ information as requested.
    facebook app about

  5. In the ‘Facebook integration’ section enter the following – this is where it gets a bit more tricky:Canvas page: This is basically the page where your ‘app’ will be stored in Facebook, so name it something relevant such as the name of your app.

    Canvas URL:
    Enter the domain of where your content is located on your own website or server.  In our example this would be http:www.attacat.co.uk.

    Canvas type:
    Select iFrame.

    Tab name:
    Enter the name of what you want your tab or custom page to be called in the navigation.

    Tab URL:
    Enter the subfolder or directory where your content is located on your own website or server. In our example http://www.attacat.co.uk/FBtest this would be FBtest. Include any file extensions such as .html or .php.
    facebook app page
  6. Save your changes and go ‘back to my apps’. Select your newly-created app from the list and then from the minor navigation on the right select ‘application profile page’.
    facebook app profile
  7. From the resulting ‘application profile page’  select ‘add to my page’ from the navigation on the left. Select the page you wish it to add the app to.
  8. Baboom – your new tab/page is added and should show in the navigation! If you want to set it as your default landing page go to ‘edit’ your company page then ‘manage permissions’.
    facebook navigation

Now it’s quite likely that this still seems a little daunting, but just leave a comment if you’re having any difficulties and we’ll see if we can help. We’re not super-skilled web developers mind! Alternatively, please do get in touch if you’d like us to be involved in your Facebook presence. I’d love to hear your thoughts on how this will change Facebook for companies – will you be integrating more functionality?

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

4 thoughts on “Custom Facebook pages with iFrames | 8 steps for non-developers”

  1. John Lamont says:

    Joel,nnThanks for this, I didn’t realise it was so easy. Do you know if I have flash on the page that I pull in will work ? I’m looking to demo interactive 360 panoramas currently based on flash in Facebook ?

    • Tim Barlow says:

      Hi John. Thanks for kicking off a discussion. Joel is away this week with only limited access to www. He will get back to you, I’m just not sure when….

  2. Andrew_8imon says:

    hi there, I found this useful, as I am also having problems with this, but I believe after looking for an answer to my problem, its down to the server, I put everything into the newly created app, and now after changing to verified I am not have a meltdown. I found that if I put into my browser the direct path as ..ftp://username@user-site.eu/index.htm from this it will ask for user name, and password. after entering this there is my page. If then I change the (ftp) for (http) then I get 404 not found as the reply. This apparently is because the doc root is set wrong at the Apache server. so my question is this, do you know if this correct?…

  3. […] found an excellent post by the team at Attacat that kind of gives a mini tutorial on the subject. Custom Facebook pages with iFrames in 8 steps for non-developers | Attacat of Edinburgh Hopefully others will find this useful. It would also be good to see any examples of what people […]

Like the Brain? Sign up for the packed-full-of-tips monthly newsletter