Getting Started With Facebook Javascript API

Now a days, most of the web-based developers, whatever platform they works/specialized on (backend/front end/php/asp.net etc), do posses some JavaScript knowledge. Also, in almost all third-party apis, JavaScript implementation is very common. Facebook API isn’t different from that also. They do have a robust implementation of JavaScript API to access their data. In this tutorial, I will try to give an overview on the Facebook JavaScript api and show some examples that may help you to have a quick start.

Introduction To Facebook JavaScript SDK:

Among the all other platforms for developing Facebook application , JavaScript platform is very easy to use,integrate and light weight and can be used asynchronously, so can be used on external sites with minimal speed performance effects. There are also a several JavaScript ready code available for webmasters to use Facebook’s various functionality to integrate on their website without having to know any knowledge in JavaScript at all.

Implement Facebook Authentication Using JavaScript API:

Although, as like on other platforms, JavaScript also can access public data without any authentication, however I will start from authentication that will work as 2 in 1 solution, I guess. So, First step comes to use Facebook api is to authentication. However, although, Facebook authentication implementation on other languages like PHP/c# may seem a little complex to some developers. A matter of big relied is that, it’s really very simple and easy to implement authentication in case of JavaScript SDK. To begin, first register your Facebook application (by clicking the ‘Create New App button’). Now, go to the web page, on which, we need to implement the authentication. import the Facebook JavaScript SDK library on that page. Although it will work if you import it anywhere, but it’s always best practice to use import any js files(including this) at the bottom of the html body, just before closing the body tag(according to yahoo’s research of JavaScript performance).

use this code for importing the JavaScript SDK:

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

Easiest way to authenticate is to use a facebook button , where user need to click for authentication. simple implimentation is as follows:

<fb:login-button autologoutlink="true" onlogin="OnRequestPermission();">
</fb:login-button>
<script language="javascript" type="text/javascript">
    FB.init({
        appId: 'Your_Application_ID',
        status: true, 
        cookie: true, 
        xfbml: true 
    });    
</script>

The above code will render as a Facebook branded button which will show whether a user is logged in or not on your application/website. If not, it will show login text, after clicking on it, a small pop-up window will appear to the user with the request permission page. After use allows the permission, this window will close, the button will show logout text as user is now logged in after allows the permission.

Now, lets focus on the different parts from the above code. “<fb:login-button autologoutlink=”true” onlogin=”OnRequestPermission();”>” is a xfbml code blog which is rendered to functional html entity by JavaScript. Of course you need to tell fb that you are going to do this and thus, you will need to set the “xfbml” parameter to “true” on initialization. If you wish, you can also use your own designed button also. FB.Init() is the method triggered at document loading and it initializes the Facebook JavaScript api with your given settings like “appid”, “xfbml” etc. By the “status” parameter, you can tell the fb api whether to check the “login status” or not. By the “cookie” parameter, you are can tell whether to use cookie for saving the session state or not. Its important in the case, where you may want something to implement via server code. In those cases server will be able to get/retrieve the session status via cookie variables.

You can also implement this login functionality on some other way, on some other events. For that, please use “FB.Login()” method.

Call To Facebook Graph API From JavaScript:

Lets take a simple example to retrieve the user information who is currently using the application. Use the code as follows:

<button name="my_full_name" onclick="ShowMyName()" value="My Name" />
<script language="javascript" type="text/javascript">
function ShowMyName() {
        FB.api("/me",
                function (response) {
                    alert('Name is ' + response.name);
                });
        
    }
</script>

The above code in turns calls the “https://graph.facebook.com/me” url and sets the returned JSON object to the ‘response’ variable. If you need to call some other type of api calls along with some parameters, then the first argument above will be a little different. Here is a javascript code samples that publish data to user’s Facebook timeline(user must have allowed ‘publis_stream’ access for this purpose. See facebook authentication guide for more about authentication details):

var message_str= 'Facebook JavaScript Graph API Tutorial';
FB.api('/me/feed', 'post', { message: message_str}, function(response) {
  if (!response || response.error) {
    alert('Couldn't Publish Data');
  } else {
    alert("Message successfully posted to your wall");
  }
});

References:

Here I have tried to give you a very basic introductory overview and examples for facebook javascript API. You can refer to the official facebook javascript API documentation for more details options you can use. Also, you will be able to test and run your javascript api code in the javascript test console. Here are the links to those resources:

• Official Facebook Documentation On JavaScript SDK
• Javascript Test Console For Facebook API

Happy coding 🙂