Making a simple html file a Facebook canvas iFrame hosted for free(ish) on Google App engine
Want to build a custom page in Facebook but you are lost with the new layout, removal of tabs and depreciation of FBML, read the following.
1. Create a Facebook page, or update your existing page to the new layout. Its simple. Go here http://www.facebook.com/pages/create.php?campaign_id=372931622610&placement=pghm&extra_1=0
2. Create an HTML file. I’d advise centre aligned, 520 wide and 900 tall for best results. Link any images using a relative path like <img src=”images/imagename.png”>
3. Register your Google App Engine (or hosting account ;p) http://code.google.com/appengine/
The name you register becomes your domain, write it down as you will need it.
“http://my-new-page-on-facebook.appspot.com”
4. Download the Google app launcher. This is like an FTP program for your website. http://code.google.com/appengine/downloads.html
5. Open App Engine Launcher enter the details of your new Google App. Click Deploy to test your app. This will create a folder that with some .py and .yaml extentions. Just leave them as they are configuration files.
6. Browse to your appengine folder on your local machine and then your “my-new-page-on-facebook” folder, create a folder called files and put your website html, css and images into this folder. This files folder will become the root path of your App Engine.
7. Rename the html file you wish to see in Facebook page is index.htm, we will create a rule later to force this if you wish to call the file something different ensure you update the next step to reflect this.
8. Click Edit in the Launcher and update the handlers to enable static web content. This will deploy into a folder called “files” is the location of your website and any images. There is a rule that will handle the correct handling for your index.htm. Filenotfound.htm is the file you will create and upload with an error message to help you if you chose to have multiple pages on your app engine.
handlers:
- url: /files/
static_dir: files
- url: /
static_files: files/index.htm
upload: files/index.htm
- url: /(.*)
static_files: files/\1
upload: files/(.*)
- url: .*
script: files/filenotfound.htm
9. Click deploy and test by browsing to your site “http://my-new-page-on-facebook.appspot.com”
10. Create a Facebook application. Don’t stress, you don’t need to know anything beyond HTML for this example. To create an application you will need to register at http://developers.facebook.com/ then click My apps from the top menu and Set Up a New App.
11. Click to app settings, under facebook integration give the app a url name and under website tab add our new site http://my-new-page-on-facebook.appspot.com
12. Give the application a Page Tab Name and Tab Url, this will then allow the page to be added to the navigation for your fan page.
13. Your app has been created! Now we need to link it up. Go to my apps, click Application Profile Page and just under the logo you will see Add app. You can now add your app to your Facebook page
14.
My Iframe is scrolling. Load the SDK before the <HTML tag
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js" ></script>
<script>
FB.init({
appId : '183455155031048',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
</script>
And load this before the </head> tag
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.Canvas.setSize({ width: 520, height: 1500 });
}
// Do things that will sometimes call sizeChangeCallback()
function sizeChangeCallback() {
FB.Canvas.setSize({ width: 520, height: 1500 });
}
</script>
