Socialize your website with Facebooks API

Today, the world is surrounded by web’s social activities, which makes the long distances to become too short by reducing the communication barriers between people. Even businesses also use these social networks to increase their business networks and customers by giving one all the stuff under a particular hub.
Facebook is one of the most popular social hub now-a-days. It provides websites and business various development tools to socialize their contents with Facebook. These tools include Graph API & Open Graph Protocol. Graph API is about to get the personal data and post on the behalf of the user on Facebook by using some simple GET and POST URL queries. And Open Graph lets you build rich web applications which enhances your social experience by with that application.

Facebooks API

Here’s a quick demo to integrate a web page with Facebook in JQuery, to show the basic information of a logged user…
1. First of all, create an app on Facebook. Click on Create New App and go through the instructions there. Link: https://developers.facebook.com/apps
2. Once created an app on Facebook, note down your your APP ID and APP SECRET after creating the account.

3. After you get your APP ID & Secret Successfully, the next step is to make the user logged in your app. For this, the user must be redirected to the Facebook login dialog of the app. Redirect the user to the URL:

https://www.facebook.com/dialog/oauth? lient_id=YOUR_APP_ID &redirect_uri=YOUR_REDIRECT_URI &scope=PERMISSIONS&response_type=token

4. Now the user clicks on the login box, after that a permission dialog box appears to the user. And if the user accepts it, the user will be redirected to the REDIRECT_URI, The URI specified in upper login URL. And there will be the access token with that REDIRECT_URI, which help the app to fetch the FB user’s information. The URL is in the following format:

YOUR_REDIRECT_URI# access_token=USER_ACCESS_TOKEN &expires_in=NUMBER_OF_SECONDS_UNTIL_TOKEN_EXPIRES

Now after getting the access token, you can fetch any information of the user based on the permissions granted by the user to the app. ( NOTE: Don’t use this information for any illegal action or which harms user )
Here’s the JavaScript/JQuery code to fetch the name and picture of the user:

if(window.location.hash.length==0)
{ 
 var path = 'https://www.facebook.com/dialog/oauth?';
 var queryParams = ['client_id=YOUR_APP_ID', 'redirect_uri=' + window.location, 'response_type=token'];
 var query = queryParams.join('&;');
 var url = path + query; window.location=url;
}
else
{
 var accessToken = /access_token=[^&$]+/.exec(window.location.hash)[0];
 var path = "https://graph.facebook.com/me?";
 var query = accessToken;
 var url = path + query;
 var picurl="https://graph.facebook.com/me/picture?"+query;
}
$.getJSON(url,function(results){
 $.each(results,function(i,f){
 if(i=="name"){
 $fbint=$('<img src='+picurl+' /> <strong> Welcome '+ f +'</strong>');
 $("body").append($fbint);
 } 
 }); 
});

In the upper demo code, I used the getJSON function to fetch data from Facebook. Because the Facebook API return the requested data in the JSON format then $.getJSON fetch each record of the JSON data and we can filter the each record. As in the above code, if the field name is NAME then print the value of that field and I also fetch the picture by “https://graph.facebook.com/me/picture?access_token=….” URL.
That’s All Folks. Thanks For Time