Main Content

How to create a Facebook application or convert your old FBML Facebook pages.

So you want to create a Facebook application? Well the good news is it’s relatively simple.

What I’m going to show you here is the very basics. I’m not going to go into APIs or anything like that.

This is also how you go about converting your FBML tabs to Facebook iFames. Since Facebook is killing off FBML tabs soon, you’ll want to get these converted ASAP.

You can use this tutorial as a starting point for something bigger or as a way of adding some basic HTML to a tab on your Facebook page; like a ‘Like us on Facebook’ page for example.

Prerequisites

There are some things you must have before you can create a Facebook application.

  1. A Facebook account.
  2. You have to be a verified Facebook developer. This is easy to do with a cell phone or a credit card. More information here: https://www.facebook.com/help/?faq=167551763306531
  3. You need to be an administrator of the Facebook page you want to add the app to.
  4. You have to have your own hosting for files and images. Nothing will be stored on Facebook.
  5. Your host must have SSL up and running on your server. Ask you host if you have any questions on this one.

Build out a web page.

Facebook tabs are 810px wide and as tall as you’d like them to be. So go ahead build a page and put it on your server. 810px is the size for the new timeline pages, old tabs were 510px wide and you can still use that if you want.

There are no limitations on coding. Use CSS, HTML, jQuery, PHP, ASP, or whatever you want. You’re free to build anything. Just keep it to 810px wide and you’ll be all set.

Done? Good. If not, you can always tweak it later. For the purposes of this tutorial, you can just write “Hello World” on your page and call it good enough.

Setup an App

  1. Go to developers.facebook.com
  2. Click ‘Apps’ at the top.
  3. Click ‘+ Create New App’
  4. Name your app, namespace and agree. Your name and namesace can be almost anything as long as it doesn’t contain ‘book.’
  5. Add the icons for the tab.
  6. Add yourDomain.com to the app domain box.
  7. Click the ‘Website’ check mark towards the bottom and enter the URL where you built your page. Make sure to start it with https://.
  8. Click the ‘Page Tab’ check mark.
  9. Enter in the ‘Page Tab Name.’
  10. Enter in the ‘Page Tab URL.’ This is the http:// URL to the page you created.
  11. Enter in the ‘Secure Page Tab URL.’ This is the https:// URL to the page you created.
  12. Skip the ‘Page Tab Edit URL’ box.
  13. Hit Save Changes and you’re almost there.
  14. To add your new app to a page you administer, use this handy tool I created.

That’s it, you’re done!

Feel free to edit your HTML at any time. You can also change app settings if you want but you’re on your own if something breaks.

There is a lot more you can do from a coding standpoint if you want to dig into the world of Facebook via the APIs. Or you can just stick with what you know and build out your page with the skills you already have.

There you have it, the ground work for creating your own Facebook application that can be added to a page.

One thing to note however is that Facebook changes things quite often. If things don’t work right, I apologize. It worked when I posted this.


3 Responses

  1. Chris S says:

    WOW, what a cool ‘handy tool’ you built! Thanks for sharing!

  2. This is SO helpful, thanks so much!

  3. Rudy Mendes says:

    Great Job! Thank you.

Leave a Reply