Facebook Application Setup for Dummies

Let’s start with some booring. Let’s have a look at how to setup a Facebook Application. This is the part that you will have to do whenever you publish a new Facebook Application to anywhere on Facebook. This tutorial replaces my iframe solution I posted a couple of months back. This is also within the Facebook guidelines – well, depending upon what you put on your tab it is. Read them through. So let’s look at some of what you need before you start:

  1. Facebook Account – you can use your own
  2. Knowledge of what an FTP is – File Transfer Protocol
  3. Some knowledge in HTML or “cut and paste” – I will give you all the source code you need so if you can cut and paste you should be fine
  4. Patience – things WILL go wrong and you will have to redo and then redo again to make things work for you
  5. Some kind of web hosting – I use HostGator as my solution, but you can use any kind of webhosting that runs a WordPress blog

If you got that set for you, this will be one of the more interesting and learning weeks for you when it comes to Facebook Application development. To make it easy for you I have made a video that shows you how to set up your first application. There is some language in the tutorials that you might not understand. Facebook actually offers you an explanation to each and every form you have to fill in, but I will make an attempt to explain what the different fields we enter information into actually does for you and how you can use them to optimize your presence on Facebook.

What this application does is that it writes HTML to a standard Facebook Canvas Page. This means you can more freely create tabs for your company/blog page on Facebook. I will show you how to fully utilize the available standard features in coming posts, but this takes aim as setting you up to strike the ball. So bare with me!!

Resources

Now, these files that I am about to share with you have been co-developed by me and several others. I just made them as available as they are right now. Ie. I rearranged them so that you will need to know a very limited portion of coding to actually follow this tutorial. I will provide source code as we go and you need to be able to cut and paste to follow along.

Steps in this tutorial:

  1. Give your application a name
  2. Create application and get API key
  3. Upload files to your server
  4. Complete registration
  5. Make the application information available on a tab on a page

Remember that you can always follow these tutorials and their progress at facebook.com/jesperastromcom. Enjoy the video.

No excuses anymore 🙂

73 thoughts on “Facebook Application Setup for Dummies”

  1. Hi Jesper,
    thanks for your awesome tutorial. I followed it right the way through and put up a “Toms Hello World” app here:
    http://www.facebook.com/pages/Tomachi/208943667047?v=app_143498255685266

    However, I am not seeing the “Hello World” tag that I had put into the index.php appear. I have updated the aplication secrets and api key before uploading to my server, but I have a feeling that since my sever supports PHP, the fact that the server is executing the PHP code back-end and is not passing the values to FB properly? Like is the server supposed to execute the php or simply store the file and hand it over?

    You can see my server is trying to execute the PHP here:
    http://www.funk.co.nz/facebook/

    And here is the error from my server:

    Warning: main(/home/tomachi/funk.co.nz/content/facebook-platform/halebop/facebook.php) [function.main]: failed to open stream: No such file or directory in /home/.ruffian/tomachi/funk.co.nz/facebook/appinclude.php on line 2

    Fatal error: main() [function.require]: Failed opening required ‘/home/tomachi/funk.co.nz/content/facebook-platform/halebop/facebook.php’ (include_path=’.:/usr/local/lib/php’) in /home/.ruffian/tomachi/funk.co.nz/facebook/appinclude.php on line 2

    I guess I probably need to update this line of code in the appinclude.php file on my server to something different:

    require_once ($_SERVER[“DOCUMENT_ROOT”] . ‘/content/facebook-platform/halebop/facebook.php’);

    I tried changing this to the proper path on my server:

    require_once ($_SERVER[“DOCUMENT_ROOT”] . ‘/facebook/facebook.php’);

    But then I got:

    Parse error: syntax error, unexpected T_NEW in /home/.ruffian/tomachi/funk.co.nz/facebook/facebook.php on line 4

    So I had a look in facebook.php to find the problem… but got lost as the file 761 lines long and I couldn’t see anything special on line 4 other than this:

    if (!function_exists(‘curl_init’)) {
    throw new Exception(‘Facebook needs the CURL PHP extension.’);
    }

    * Maybe my server doesn’t have this installed?* Cheers!

    Reply
    • Well your server needs to have PHP5 and MySQL installed. Once that is done, it should be fine 🙂

      Try changing the ending of the file from index.php to index.html. Another person had the same problem and got it solved that way.

      Reply
      • I had the same problem and changing to .html worked although I ahve PHP 5 and MYSQL installed. I can send you a link to my phpinfo file if you need.

        Reply
        • I’m also having the content/facebook-platform/halebop/facebook.php problem.

          It looks fixed if I change the file to .html
          But that is a kludge.

          In fact it functions exactly as you’ve showed in your tutorial… but it’s passing the .php
          down to the browser which is just ignoring it. So it definitely isn’t ‘working.’ In fact it makes
          it look as if appinclude.php is entirely unnecessary to perform the functionality you’re showing.

          Thoughts?

          Reply
  2. Hi Jesper,

    Thanks for the helpful tutorial on adding a custom Facebook tab. This is surprisingly hard information to find (that’s what I determined, anyway).

    What with Facebook changing things regularly, you won’t be surprised that only about 45 days later your tutorial would benefit from some updating :). Most people should be able to follow along fairly well but they should note that Facebook has changed several details. To their credit, Facebook has mostly made it easier to do the setup.

    For example, they’ve consolidated several previous sections (like “Canvas” and “Profile” and “Authentication”) into “Facebook Integration”.

    When I get a chance, I’d like to piggyback on your tutorial with one of my own (with credit to you) if that’s alright. The only “trouble” I ran into with your tutorial was having to modify the ‘require’ line in ‘appinclude.php’ because it was hard-coded to a server location. I got my tab alright, but it was showing PHP errors… made me chuckle.

    Great stuff! Thanks again.

    David

    Success Steps Made Easy
    – Turning dedicated people into internet and network marketing Success Stories every day.
    http://facebook.com/SuccessStepsMadeEasy

    Reply
    • Hey m8,

      Yes, and I am about to post new tutorials on the topic, but on a different platform as this one is going to change somewhat.

      It’s the comments that make a blog post better that I enjoy the most. Thnx for this one!

      Reply
      • My pleasure, mate! I’m (very) slowly digging my way through your excellent blog content, now that I’ve come across it. You’ll be hearing more from me :).

        Thank *you* for the details about Facebook Application Setup. I tweaked it a bit, put my own spin on it and just posted my video tutorial to my Facebook Fan Page.

        Have an awesome day!

        David

        Success Steps Made Easy
        – Turning dedicated people into internet and network marketing Success Stories every day.
        http://facebook.com/SuccessStepsMadeEasy

        Reply
  3. I am not seeing the option to ‘add to your page’ such as you show in your video, I see the same list but only ‘add to page favorites’. Does anyone else get this?

    Reply
    • Hey m8!

      There is a check box in the application settings that you need to check to get that option.

      Goto –> http://www.facebook.com/developers/
      Your applications are visible in the right hand pane.

      Click –> more (next to the app name)

      Click –> Facebook Integration

      At the very bottom of that page there are two checkboxes.

      Make sure the one that reads “Facebook Pages” is checked. By default it is not.

      Cheers,
      Jesper

      Reply
  4. Hey Jes,

    First up – great work …..thanx a lot …..saves many – hours-weeks-lives i think…
    …i am having this same issue……on the application profile page

    i don’t see ~
    “Add to my page”

    i only see ~
    “Edit Application
    Promote with an Ad
    Suggest to Friends
    Block application”

    any clues asto where i could check…

    Thanks
    Hk

    Reply
    • Hey,

      See the above reply.

      There is a check box in the application settings that you need to check to get that option.

      Goto –> http://www.facebook.com/developers/
      Your applications are visible in the right hand pane.

      Click –> more (next to the app name)

      Click –> Facebook Integration

      At the very bottom of that page there are two checkboxes.

      Make sure the one that reads “Facebook Pages” is checked. By default it is not.

      //Jesper

      Reply
  5. Hi Jesper,

    Great tutorial, much more simplified than others I’ve looked at. I have a question though, how would you suggest placing a SWF into the index.php (or .html, I had to change mine). Facebook returns errors for everything I’ve tried.

    Also, the flash I want to include has a PHP based contact form, is that going to work with facebook or do I have to jump through some more hoops? I received a runtime error about external scripts/files.

    If you can’t tell, I’m a bit new to all this.

    Much appreciated,

    Cody

    Reply
    • Hello again,

      Just wanted to say I figured it out with a bit more hunting and error deciphering, so thought I’d post what I found for others.

      In index.php (or .html – if you needed to switch it), replace Hello with

      As for the PHP contact form inclusion, in the flash, make sure your ‘submit’ button is pointed to an absolute location, ex. http://yoursite.com/facebook/email.php rather than just locally. If it’s local, your app will look for the email.php on facebook, rather than your own server where it is actually located.

      Sure, most everyone probably know that, but maybe this will help the few that don’t.

      Cheer and thanks again, Jesper!

      Reply
  6. Hey Jesper,
    I found yours tutorial problematic. I’m looking for (for 10 days, so I’m a little bit confused) code of simple application in Google, and it’s first good made tutorial. But when I uploads files on the server, they aren’t working! I change API Key, Secret etc. – nothing. I read suitable content in documentation, too. I only want to get user ID. I need help! :/

    It’ll be good idea to make tutorial about authorization etc.

    Kikert.

    Reply
  7. Has anyone had a problem where the application sets up fine but then once you click on ‘add to page’ it adds the application but not on the tabs? For some reason, the application I have set up installs on a facebook business page but does not display as a tab. 🙁

    Reply
    • Have you clicked the >> button to the right in your tab section. If you have too many tabs additional tabs are hidden in there. That might be a simple solution. I’ll try to post an update this weekend with the information you require.

      Reply
  8. Jesper,

    a question from a pure layman’s point of view:
    I have customers in a specific industry, for whom I am hosting content, which I want to allow them to display in a new tab in their business facebook pages.
    For that I need to build an app to allow them to sign up/identify themselves (so that I pick up the correct content for them) and then I need to create a tab on their facebook where the content will be displayed.
    I have come across the OpenTable app on facebook, which is similar – signup, which then puts up the “reservations” tab with the booking screen).

    My main question is what the maximum width of the iframe is (I assume the content will be shown in an iframe). This is critical for me as I have to format the content accordingly.

    Thanks in advance for your advice. Maybe you could also tell me “how big” my job is – how long should it take for someone who knows what they are doing to put this together?

    PS: I notice you use ishowu HD for your screen capture – do you use the basic or the pro version? Are you happy with it or would you recommend a different tool based on your experience?

    Reply
  9. Hey Jesper,

    Thanks very much for this tutorial! I never thought I’d have to make a Facebook application, but I’m experimenting with Facebook Page tabs, and this appears to be the best way to do it (since FBML is being done away with).

    Your tutorial is easy to follow along with, but I’m not sure where you downloaded the files (appinclude.php, facebook.css, facebook.php, index.php) from. When I’m at http://www.facebook.com/developers/editapp.php I see an option to Download the Client Library (which links to here: http://github.com/facebook/php-sdk/), but this does not contain the same files that appear in your tutorial.

    Since I’m an extreme beginner, this step has me stumped.

    I’ve read the comments and noticed that this tutorial might be due for an update. Are the files I downloaded the new way to do things or am I looking in the wrong place for these files?

    Also, I’d be happy to do an updated video tutorial once I’ve completed the process once.

    Thanks,
    Derek

    Reply
    • Hey Derek,

      I will update the files during the weekend. Rumors say that Facebook won’t make any major changes to this area for a while now so it is worth the effort.

      The files you download from this page are different from the ones available at the /php-sdk/ location. I have removed some stuff that didn’t work in those files as well as start off the html-code in a way that does not return an error about the “illegal body-tag” which I am sure you have sumbled upon already whilst testing the sdk-code.

      So, yes the code here is different but I i will update it with the new info as soon as I make the new video tutorial. Hopefully it will solve all of your problems. 🙂

      Cheers,
      Jesper

      Reply
  10. Hi,

    Thanks for the tutorial!

    I’ve followed all of the instructions but I seem to be getting a “FBML Error (line 4): illegal tag “body” under “fb:tab-position”. The app works on its own URL but now on a tab.

    I had to change the .php to index.html as well. I’ve been searching for hours for a solution and have not found one!

    Thanks,
    Taylor

    Reply
    • Hey m8. I have to do something about this soon. The problem I am facing is that of time. Haven’t been able to really work on my tutorials for the past two-two/half months. I will get to it asap.

      Best.
      //Jesper

      Reply
  11. Hi Jesper,
    Great guide! I tried to include a iFrame with this solution. I know that FB will open for iFrame Q4 2010, but I had to try this now 🙂

    Here is what I got after all the steps:

    Warning: require_once(/home/iarkivet/public_html/content/facebook-platform/halebop/facebook.php) [function.require-once]: failed to open stream: No such file or directory in /home/iarkivet/public_html/facebook/appinclude.php on line 2

    Fatal error: require_once() [function.require]: Failed opening required ‘/home/iarkivet/public_html/content/facebook-platform/halebop/facebook.php’ (include_path=’.:/usr/lib/php:/usr/local/lib/php’) in /home/iarkivet/public_html/facebook/appinclude.php on line 2

    OP

    Reply
    • Hi Jesper,

      Thx for all the info!

      Is it correct to say that today (23.11.2010) it is not possible to show a canvas app in a page tab. My only workaround that I can see is to create an FBML page (with a tab) and then on that FBML page just link to the application URL. I would really appreciate it if you could tell me if, as of today, if there is any way I can get a canvas app accessible from a page tab.

      Thx,
      -Fredrik

      Reply
  12. Thanks a lot for the tutorial. I’ve been looking around for something like this.

    One question: as soon as I went into the Developers section, I was prompted with this:

    “Your account must be verified before you can take this action. Please verify your account by adding your Mobile phone or Credit/debit card.”

    Is this a normal security check?

    Reply
    • hi jesper,

      i got same problem..after I clck the ‘Mobile phone’, i was prompted with this:

      “Your mobile phone has been successfully verified, and you are signed up for Facebook Mobile.”

      Then nothing happen. when i tried to create the application one more time, i was prompted again with

      “Your account must be verified before you can take this action. Please verify your account by adding your Mobile phone or Credit/debit card.”

      i would really appreciate if you can help me to solve this matter..

      thnx

      Reply
  13. Hi,

    I load the files you have here and configure my facebook account but for some reason I have this error:

    Application Temporarily Unavailable

    Received HTTP error code 500 while loading http://wordgeist.com/fb/

    Sorry, the application you were using is experiencing a problem. Please try again later.

    Can you please help me to find what is going on ?

    Reply
    • That error is a server error which says that your page cannot be reached. I would look at my server security settings if I were you. Perhaps contact your hosting provider. What hosting provider do you have?

      Reply
  14. Hello!
    Great tutorial!
    I got this message when I test my app (apps.facebook.com/blabla);
    The application “xxx” is temporarily unavailable due to an issue with its third-party developer.

    My canvas-url is Ok when I check it!

    What can I do? Is it a server issue?

    Can you please give me a hint?

    Tova

    Reply
      • Thank you for feedback!
        I am using non-free host, PHP 5.1, cURL is approved… what settings do I need to check in this case?

        Is there any free host I can use only to be able to run my app? If that’s the situation that my current host doesn’t work.

        /Tova

        Reply
        • I actually don’t know what would be the problem then. I will create some new apps during Christmas and update this tutorial as a result. Hopefully I’ll bump into the problem and show you how to solve it. Otherwise you can always e-mail me some more info. You find my e-mail under the Contact Info tab.

          Reply
  15. I am having problems with my facebook app for blackberry curve 8330 …. I have the app installed but I can not get into it.. when I go to it, all it says is reviews, screenshots, & recommend. can somebody please tell me how I can get into this app. ??/

    Reply
  16. Curious, I have several clients that want me to create a “tab” on their site for them. Do I need to create a developers account for each of them on their account to set up, or can I use mine?

    Reply
  17. I appreciate your tutorial and please forgive me for interupting your day but I am getting this error ………

    Fatal error: require_once() [function.require]: Failed opening required ‘/home/myserver/public_html/public_html/fb/facebook/rrfeed/’ (include_path=’.:/usr/local/php52/pear’) in /home/myserver/public_html/fb/facebook/rrframe/appinclude.php on line 2

    Is this telling me my server doesn’t have the right php?

    Reply
  18. Jesper,
    I appreciate you freely sharing your work here. It is proving extremely useful as I ascend the learning curve of customizing facebook.
    I have followed through the steps in your video, am certain that I have my settings correct, and that my host-server is OK, but am getting a message returned:
    “The application “onewalrusfbtab” is temporarily unavailable due to an issue with its third-party developer. We are investigating the situation and apologize for any inconvenience.”

    Here’s a screenshot of my app settings page (if screens show up here. (?)
    http://onewalrus-ink.org/Vault/pics/fb-app-settings.jpg

    Any help you are able to provide is most appreciated.

    Happy Sailing,.
    Paul

    Reply
    • Resolved: Bad eyes, need new ones, or new glasses, missed a redundant “/”.
      Note: relative urls not allowed in html
      Now, to solve how to get the tab to allow a swf file.

      Reply
  19. Hi,

    I’ve an iFrame application which runs fine as separate Canvas page. But am not able to get it running from my page. I added the app on the tab. But when I click on the tab, it shows nothing…the page is blank.

    Please help.

    Regards,

    Reply
  20. awesome!!! dude you rock, just uploaded this and presto 🙂

    the only problem i have is that the app only displays to users logged into facebook… does anyone happen to know of a way to have the ‘Tabbed’ app to display regardless of visitors login state with facebook? if i go straight to the app.facebook… url it displays but the tabbed version on my pages is blank until the user logs in.

    now i just have to figure out a way to make a ‘facebook’ template to incorporate into my wordpress blog so it doenst simply load the home page

    Reply
  21. Great Stuff Jesper 🙂

    this is so much better than the dumb ‘click to view’ hack… only problem i have is that the frame doesnt display on the page unless the user is logged in ? other than that i love this setup, now i just have to fragment my wordpress blog to only load the entried of my blog without the header, sidebars, and footer

    Thanks again mate – du bist ein König 🙂

    Reply
  22. This was really helpfulll to me but have only one question. Im use my app not like iFrame im use it in the FBML option. And all working nice but there is something on the bottom of the pages that im still cant remove it from there..

    So maybe you can help me out what that is! Here is it im just copy it here to show you:

    you can seen it on my tab direcly: http://www.facebook.com/techno.minimal.live.sets?sk=app_167034333348113

    or here:

    App Temporarily Unavailable
    Parse errors:

    CSS Error (line 90 char 13): Error in parsing value for property.: ‘display’ Declaration dropped.

    CSS Error (line 99 char 15): Error in parsing value for property.: ‘display’ Declaration dropped.

    CSS Error (line 260 char 15): Error in parsing value for property.: ‘display’ Declaration dropped.

    CSS Error (line 276 char 15): Error in parsing value for property.: ‘display’ Declaration dropped.

    CSS Error (line 290 char 15): Error in parsing value for property.: ‘display’ Declaration dropped.

    CSS Error (line 312 char 15): Error in parsing value for property.: ‘display’ Declaration dropped.

    CSS Error (line 326 char 15): Error in parsing value for property.: ‘display’ Declaration dropped.

    CSS Error (line 341 char 15): Error in parsing value for property.: ‘display’ Declaration dropped.

    CSS Error (line 357 char 15): Error in parsing value for property.: ‘display’ Declaration dropped.

    Runtime errors:

    HTML error while rendering tag “link”: There is a hard limit of 2 css link tags on profile tabs in order to remain under the IE 31 tag limit.

    HTML error while rendering tag “iframe”: iframes forbidden by flavor TabFBMLFlavor

    Reply
    • Yepp. I know. Sorry about that. I will update it as soon as I get a breather from the nasty workload I’m experiencing right now.

      Reply
  23. Hi,

    i am getting the following error, please help me.
    Warning: require_once(/home/pshartpi/public_htmlfacebook.php) [function.require-once]: failed to open stream: No such file or directory in /home/pshartpi/public_html/Works/facebook/01/appinclude.php on line 2

    Fatal error: require_once() [function.require]: Failed opening required ‘/home/pshartpi/public_htmlfacebook.php’ (include_path=’.:/usr/lib/php:/usr/local/lib/php’) in /home/pshartpi/public_html/Works/facebook/01/appinclude.php on line 2

    Reply
  24. Hi
    …. no wonder you´re video starts jiggling around so much…

    I´m about to start to create my first app. Hope it works!
    Thanks for the tutorial.

    Reply
  25. Hi.

    How are you?

    Thanks for the tutorial.

    When I am at one of the first steps, on the page after I type in the name of the application, I get this message :

    Sorry, something went wrong.

    We’re working on getting this fixed as soon as we can.

    Any idea how I get around the problem? It happens in IE, FireFox and Chrome over multiple days.

    Thanks.

    Reply
  26. Hi

    how are you?

    thanks for the tutorial.

    I have two questions.

    – I want the scrollbar disappears my fanpage page. how can i do that?

    *fanpage url: http://www.facebook.com/?ref=logo#!/escape2exit?sk=app_217272218305402
    *app url: http://apps.facebook.com/jeroenstik/
    *iframe url: http://www.escape2exit.nl/facebook/index.html

    did i something wrong i the html or is it something others?

    my second question is, how can i create the app with the name “welkom” as the first page that my visitor see ?

    I hope you can help me.

    kind regards

    Jeroen Stikkelorum

    Reply
  27. Hi, Jesper

    Thanks for the great info!

    I have a question about width of the facebook app. It seems the iframe width has been limited to 520px versus having a full with option when creating a web app. However, there is a company seemingly over-riding this limit and embedding auto-resized webpages successfully.

    Here’s a link to the iframe approach:

    http://www.facebook.com/pages/Top-Value-Cycle-Tours-affordable-luxury-for-the-pedaling-adventurer/139469179427321?sk=app_209491825759132

    And here’s one to the Webees approach:

    http://apps.facebook.com/mywebees/tvctours.com/

    Any ideas how they may have accomplished this? I’m not a fan of having my web or facebook solutions dependent on some intermediary service.

    Any ideas appreciated. I get the basics of setting up an FB app…(thanks to your tutorial!) .. but I can’t sort out how they did this.

    Cheers!
    or Skol!
    or Aloha from Hawaii..
    Jim

    Reply
  28. Sorry..forgot to include one other question:

    Is there a way to include a like/reveal function in an FB app design so that a firstime visitor sees one type of contnet .. but a user who has liked the page is directed to expanded or different content? I know this has been done in at least one app..like Static Html .. but that also seems to have the width limitation.

    My goal would be to have a default landing tab or page which is full width (no left side column) and has a “Like” option, the selection of which would direct the “liking” user to another full width page.

    Thanks for any ideas or pointers,
    Jim

    Reply
  29. I found that my App ID and API key are now the same. I change the appinclude.php to my own. After adding the changes my app doesn’t work I get the following errors

    Warning: require_once(/home/users/web/b952/nf.ccmcguirecom/public_html/content/facebook-platform/halebop/facebook.php) [function.require-once]: failed to open stream: No such file or directory in /hermes/bosweb25b/b952/nf.ccmcguirecom/public_html/facebook/appinclude.php on line 2

    Fatal error: require_once() [function.require]: Failed opening required ‘/home/users/web/b952/nf.ccmcguirecom/public_html/content/facebook-platform/halebop/facebook.php’ (include_path=’.:/usr/local/lib/php-5.2.17/lib/php’) in /hermes/bosweb25b/b952/nf.ccmcguirecom/public_html/facebook/appinclude.php on line 2

    ummm, anysuggestions

    Reply
  30. Hi Jesper

    Good tutorial but FB seems to have moved on… Any chance of updating for the current FB…

    Got my first FB app running, wonder if you offer FB services as well?

    Thanks

    Jerry

    Reply

Leave a Comment