CODEWITHSUNDEEP
phpjavascriptjqueryhtmlfacebook
mauzilla
mauzilla

Reputation: 3592

Facebook application development 101

I am busy creating my very first Facebook application, and although I have PHP and Javascript experience, I am struggling to understand how the logic of setting up an application for Facebook works.

From the bare minimum I understand that I need to:

  1. Setup some opengraph items which appears to be nothing more than some meta tags.
  2. I need to include a script as written below just after my body tag:
  3. I have to run a script: just below the
  4. My HTML requires some code listed below.
  5. I can include the Facebook PHP library.

1) What is the purpose of the opengraph meta tags? Does this influence my application at all?

2) The script:

<!-- Load the Facebook SDK -->

    <div id="fb-root"></div>
    <script src="http://connect.facebook.net/en_US/all.js"></script>
    <script>
      // IS IT FAIR TO ASSUME THIS AREA BELOW CREATES THE FACEBOOK OBJECT? 
      window.fbAsyncInit = function() {
        FB.init({
          appId      : 'APP ID', // App ID
          status     : true, // check login status
          cookie     : true, // enable cookies to allow the server to access the session
          oauth      : true, // enable OAuth 2.0
          xfbml      : true  // parse XFBML
        });

      };

      // WHAT DOES THIS DO?

      (function(d){
         var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
         js = d.createElement('script'); js.id = id; js.async = true;
         js.src = "//connect.facebook.net/en_US/all.js";
         d.getElementsByTagName('head')[0].appendChild(js);
       }(document));
    </script>

3) The script (also above). What does this do? Can I assume this works similiar that the jQuery framework and is required for me to load the code above?

<script src="http://connect.facebook.net/en_US/all.js"></script>

4) My HTML tag is changed to the code below. What and why is this required?

<html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:og="http://ogp.me/ns#"
  xmlns:fb="https://www.facebook.com/2008/fbml">

5) Although I understand the logic behind including the PHP library, what is the difference between the Javascript and PHP library? Does it effectively do the same thing?

Sorry for the stupid questions, but in reality, I find Facebook not very user friendly for someone to try get into the application development, as their documentation feels "scattered" and not really up to date?

Upvotes: 0

Views: 233

Answers (1)

Abby
Abby

Reputation: 3209

1 - open graph protocol is explained quite well in the documentation actually. The data in there is what facebook will index for your page, so what is displayed when someone interacts with the page (e.g. a like)

2 - In the space you have written '// WHAT DOES THIS DO?', you can put methods and functionality which you want to run as soon as the facebook api has loaded. So you may want to hide all your facebook divisions etc until this point, or take some action to get the user's login state as soon as the api is ready. Note also that you dont need this bit in your code above:

<script src="http://connect.facebook.net/en_US/all.js"></script>

This is already being loaded in your '(function(d){...' bit at the bottom. Check out the documentation on loading the js api.

3 - That is the script tag that loads the facebook js api

4 - This is the namespace you need to tell your page about in order for it to read the og metadata. Again, this is explained well in the open graph protocol documentation

5 - JS is client side. Php is server side.

Upvotes: 1

Related Questions