Facebook Page in an IFrame 10 steps

While working on our WordPress to Facebook Plugin we discovered that from the 14th March 2011, we will not be able to add a page using the Facebook App and FBML, Facebook is moving to a more standard language.

So what does that mean for Facebook template page developers.

We can now create and add a Minisite in ten steps, it will require a minimal amout of editing, if you want to use a product like Artisteer to create a static html Minsite.

 The Template

One thing that has not changed is the width, Facebook allow us 520px of real estate, we do not want ugly scrollbars so we create a set of html template pages at 520px wide!

If you are using Artisteer set the width to 520px wide, in this example we have a simple three page site that we created with our WordPress to Facebook Plugin.

Here is the announcement from Facebook that introduces the Iframes, so here are the steps we took in getting our sample fan page live!

Step 1

We copied our html folder and renamed the files from html to php, we also renamed our home page to welcome!


Step 2

We opened up each of out three pages and made the following changes, added a line with the absolute stylesheet.css url of where we will be uploading our folder to, as we only have a 520px window and links we added the “target=”_blank” so links open in a new window!

Then we changed the page names from html to php in the menu to match the renamed pages, that was quite easy, remember we made the same changes to all three page files.


Step 3

We use our favourite ftp client to upload the folder, in our example we have a folder off the root with a couple of sub folders.


Step 4

Now we need to let Facebook know about out minisite pages, we do this not at our page with an app but over on the developers page.

We go to http://www.facebook.com/developers apps and Set Up a New App, this screen is already setup but the process is the same.


Step 5

On the About tab we give our Minisite a name and description, we do not get worried about the Application as we do not need special code or anything like that.


Step 6

Here we add our Website URL finished with the forward slash or we get an error on saving.


Step 7

We have two sections to fill in here, Canvas Page is not required but we added our page name, canvas URL is the absolute URL of our websites folder where we uploaded the pages to.

Set the Canvas Type to IFrame and the Iframe Size to auto-resize.


Step 8

Just two more setting in this section notice we add our home page file name in the tab URL, we save the settings, and we will be presented with a app box.


Step 9

From the App box we select Application Profile Page, that was an easy step!


Step 10

We now assign our template or minisite to one of our pages.


When we visit our page we have a new menu option with our minisite.


One last step?

You may also like to read Artisteer Beta 3 to Facebook to use an Artisteer template as our Facebook Minisite, or the Digital Raindrops Facebook plugin to create pages and a theme for our Facebook live WordPress minisite.

If you like this post then please Visit our page and add a like, there is a link to a YouTube Video that shows the plugin at work, that is the plugin that we are creating for WordPress, to make it easy to create sites like this.


We do require your feedback to improve our themes and tutorials, please leave your comments good or bad.

Code disclaimer information

If this document contains programming examples, www.DigitalRaindrops.net grants you a nonexclusive copyright license to use all programming code from which you can generate similar functions tailored to your own specific needs.

All sample code is provided by http://DigitalRaindrops.net for learning illustrative purposes only.

These examples have not been thoroughly tested under all conditions. www.DigitalRaindrops.net, therefore, cannot guarantee or imply reliability, serviceability, or function of these examples.

All programs contained herein are provided to you “AS IS” without any warranties of any kind. The implied warranties of non-infringement, merchantability and fitness for a particular purpose are expressly disclaimed.


Registration is now open: New Member Registration

Membership is now open: Existing Member Login

Visit the: Forum and Feedback

This website is a tool to support and promote WordPress and Artisteer theme development, please support, share and give credit for any benefits you gain from the tutorials on this website.

6 thoughts on “Facebook Page in an IFrame 10 steps

  1. Pingback: Artisteer Beta 3 HTML Site to Facebook Minisite | Digital Raindrops

  2. Hi

    I tried this and it works. However – it would seem that you must be logged in to facebook to see the page?

    I set the tab I created to be the default landing tab and its still not visible to someone not logged into facebook. Wall, Info, Discussions, and video are viewable by anyone.

    Perhaps I am missing something?

    I thought the whole purpose of this is to set a default landing page viewable by anyone?

  3. Ahhh thanks . . . I will remove that page for now and put it back later – Or is there a way to just hide it for now? I looked but did not see any way? Oh well – I did learn how to build html pages in Corel Draw in the process of following this guide and even managed to get something similar setup using the FBML plugin. Would like to use this method however since my design for the iframe page had multiple hotspot links and I could not figure out how to get that to work in the static FBML link.

  4. What am i doing wrong, this is what i get?

    HTML error while rendering tag “img”: Relative URLs not allowed here

    Cannot allow external script

    I can get that first error away, when i chance content link to http://…..

    I can sii this app in my apps page, but not in my fanpage. In fanpage css won´t load at all..

  5. It didn’t gave me the option of canvas type, what should i do, i have created the whole application but the same scroll tabs issues are there, i know you have given a good idea, but i am not sure this canvas type ?? can be found on myside or not :S its not shown over there

Leave a Reply


Connect with Us
Follow Digital Mobile on Twitter Join Digital Mobile on Facebook

Meet the Author

Articles by Digital Raindrops
Digital Raindrops admin is the author of the posts and this theme, WordPress development is a hobby taking more time than it really should.
Read More

Related Posts