Today I needed to embed (iframe) a web page into facebook. Pretty simple idea, really - doing so should help improve conversion rates for visitors who are landing from Facebook. And, of course I want to do it as simply as possible so we can test the idea before investing more time into fancier features this might have (a facebook-like theme, facebookconnect to pre-fill user data, etc.)
So...I did a ton of searches for how to create embed a page in a very simple way. I don't want to use an SDK. I don't want to have any OAUTH or interactions. Just show my page inside the facebook header and sidebar! But...how to do it.
Facebook Static HTML Iframe App
Well, several tutorials and videos recommended using a third party app that would insert my iframe inside of the Facebook page.
This is indeed a very popular path to take. There are dozens of apps in use by tens of millions of people each month. WAT?
Of course, Facebook Canvas apps are just iframes...so...why do I need an APP to iframe my iframe? And how safe is your data when a 3rd party iframe is around your site? No, this solution simply will not do.
Make your own super simple Facebook App
Here's what you want to do.
- Go to Facebook Apps site. You might need to agree to some terms of service or something.
- Click "Create New App"
- Fill in the basic info - skip hosting.
- Fill in the "Basic Info" section. If you are unsure, leave it blank or read the help blurb. All you really need is a Display Name and Contact Email.
- Check the green box for "App on Facebook"
- Input your site URL for the Canvas URL and Secure Canvas URL. On October 1, 2013 all apps will be required to have https.
- Select fixed or fluid width and height and click save changes
- That's it! You can test it out either by going to the facebook.com homepage and searching for the app name (you filled that out in step 3) or find the App ID in the Basic Settings area and go to apps.facebook.com/APPIDHERE/
Once you're satisfied that it's working you can change it from being in Sandbox to "Sandbox Disabled" and then it will be live for anyone to use. You can also let other people build and help test out the app by giving them "Developer Roles" under the Basic area.