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!

step1

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.

step2 

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.

step3

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.

step4 

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.

step5

Step 6

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

step6

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.

step7

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.

step8

Step 9

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

step9

Step 10

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

step10

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

step11 

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.

Notices

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.

Membership

Registration and Membership is no longer required for downloading files or interacting with Digital Raindrops, posting a comment or topic in the forum does use Captcha to reduce spammers.

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.

8 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

  6. Fantastic site. Plenty of useful info here. I?m sending it to a few pals ans also sharing in delicious. And of course, thanks in your sweat!

  7. I think I’m coming into this kind of late but after hrs + hrs on youtube looking for a way to turn my site into a Fb fan page I finally came across the tutorial here… OMG guys thanks so much for the step x step. I just got started with this but I should be done in an hr or so. Please make a youtube video on the tutorial so ppl like me (visual learners) can watch and follow along. But still thank you so much for the tutorial here and for future ppl coming here to do this click on the button at the fan page for Digital Raindrops!

Leave a Reply

Connections

Connect with Us
Follow Digital Raindrops on Twitter Join Digital Raindrops on Facebook
Share

Related Posts

Posted in Facebook

plugin9.png

What a rollercoaster ride this has been, after the announcement that Facebook were deprecation the FBML pages and changing to IFrame this meant a lot of research and a re-write of some of the functions. Bad News is the plugin … Continue reading

Read More

Posted in Tips

colorizer-1_thumb.png

We thought we would use the WordPress Twenty Eleven theme and the the Farbtastic color picker to colorize our theme from the website front page instead of the admin area. We have been looking at the $_SESSION variable, so we thought … Continue reading

Read More