Custom Facebook pages with iFrames | 8 steps for non-developers
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:
- 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.
- Use the following link to create a new Facebook app.
- Name the app (this is just so you can identify it from a list), agree to the terms of service and create.
- Fill in the ‘about’ and ‘web site’ information as requested.
- 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.
- 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’.
- 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.
- 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’.
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?