Yesterday Facebook announced some major changes to Facebook Pages. A Quick hit list of some of the things that changed:
- Page layouts now appear like the new profile layouts (pictures at top, “tabs” in the left column under pic)
- Admins can be publicly displayed
- Page Admins can comment on public users timeline and other pages’ walls
- Lighbox for Picture viewing
- FBML is going away March 11. Welcome iFrames
This post is aimed at the non developer (or dare I say the web developer not familiar with developing on Facebook) in an effort to give the bare minimum of what is needed to get your first custom “tab” via iframe deployed.
Facebook Custom tab?
In the new page layout there are no longer tabs, so we’ll shortly stop calling them tabs and move towards Custom applications, or Custom app. The Landing tab nomenclature will probably move to a Page’s custom landing application, or landing app. But for now even Facebook is still calling them tabs (strange?)
When we created custom tabs using FBML we actually added an application called Static FBML which supposedly is going away March 11. Facebook has had trouble deprecating things like FBML in the past so I take this as a warning but not a hard deadline. Oh and if you are reading this before March 11 2011, please please please add a couple Static FBML apps to your page, at a minimum it leaves your options open. We don’t fully know what we’re loosing yet.
Now that Static FBML is going away we will still need to add an application to our page to develop the custom tab. But instead of it being FBML, we need it to be an iframe. Since there is no “Static FBML” equivalent in the iFrame world below is a description of how to create your own custom Facebook application to use the iFrame capabilities.
What is an iFrame and why do I want it on Facebook?
An iFrame allows you to display content from page A on page B. Typically iFrames are used to cross domains. So I can embed a YouTube video on my site via iFrame. The code for the iFrame simply tells the browser to request the content from this location (server).
The key for you and your Facebook page is now you can use your company’s CMS and integrate with your database, or provide ecommerce information on this “tab” without having to go to Facebook. Once the iFrame is established all you have to do is change the content of the page it’s pulling in (typically on your company’s website, though I recommend you hide it from the general public)
How To add an iFrame to Facebook page
Go to facebook.com/developers and click on the “+ Set Up New App” button. (Or click the “Create one” link) which takes you to: http://www.facebook.com/developers/createapp.php
Give your application a name. And agree to the Facebook Terms of Service.
Verify your humanness. Robots need not apply.
Welcome to the craziness! What I will focus on here is the bare minimum to getting your Facebook custom iframe app up and running. However there is a lot more to these apps than what I will cover. Bonus: Not needed for this to work, but it makes you look good: Change the Icon (click Change your icon) to upload a 16px x 16px icon for your “custom tab” Everything else on this page is 100% optional for today’s objective.
The “Facebook Integration” link in the left column is where the rabbit trail goes even deeper.
The most confusing section for a non-facebook-developer is the Canvas Page and Canvas URL fields. The hint is this: Facebook combines a setting below with your Canvas URL to create the URL it requests for the iFrame. For now fill out the Canvas page, and in the Canvas URL fill in everything but the page for your iframe, ex: http://myhost.com/iframe-content-here will break into the Canvas URL of just http://myhost.com whereas http://myhost.com/cat1/date/funURL/iframe-content-here will break into the Canvas URL of http://myhost.com/cat1/date/funURL/ Always have a trailing slash in this field.
This took me a little while and some 404 logfile reading to figure out, because Facebook does not make it clear how these are used.
Then We finally get to the important part: The Tab settings. Simply give the tab a name (keep it really short, limited to 16 characters) Choose iFrame and give it a Tab URL. The Tab URL is the final part of the iframe content request URL from above. So if your iframe content lives at http://myhost.com/iframe-content-here your Canvas URL would be http://myhost.com and your Tab URL would be iframe-content-here. Even if your content lived at http://myhost.com/cat1/date/funURL/iframe-content-here your Tab URL would be the same iframe-content-here (your Canvas URL should however be different)
Save these changes. Congratulations, you’ve made your first Facebook application. Now we need to add it to the page of your choice.
Add the App to your Page
In the resulting page you have the option of Editing the Settings which allows you to dive deeper into these or fix any problems you may have encountered. But to add it to the page you will need to click the “Application Profile Page”
On the Application Profile Page choose “Add to my Page.” Under the Profile image (which should be the default Facebook grey toned image) Choose the page you want this iFrame to appear on and click the “Add to page” button next to it.
Done!
When you visit that page you will now see the Welcome! as a link under the profile picture.
Make the iFrame Tab the Default for Viewers
To make it the default click Edit Page in the upper right hand corner.
Choose Manage Permissions
In the default Landing Tab: Drop down selector choose your new application: Welcome! and Save Changes.
Follow Up?
These directions might not be 100% accurate, however please let me know if you find the useful, or if you se any problems here.
Yeah I miss FBML already ;)