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.
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!
We copied our html folder and renamed the files from html to php, we also renamed our home page to welcome!
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.
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.
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.
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.
Here we add our Website URL finished with the forward slash or we get an error on saving.
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.
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.
From the App box we select Application Profile Page, that was an easy step!
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 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.