Get Latest Update Basic Setting Bootstrap on Blogger

Learn More

Contributors

  2. Blogger and Widget
  3. How to Access Graph API Connection With FB.api And Jquery
Monday, August 6, 2012

How to Access Graph API Connection With FB.api And Jquery

example graph api explorer
In the previous topic, I have discussed how to use FB.api. At the core essence, FB.api function to get the JSON output from the Graph API. I also gave examples of how the Graph API access Facebook users with jquery and without access token. However, not all the Graph API can be accessed without access token, especially access Graph API Connection. For this purpose, then I will discuss how to access the Graph API Connection. As what I have stated before, you can access the Connection via two ways, first by Graph API Connection, second with the Graph API Selection. Suppose, I want to access my friends, then format the Graph API is as follows

Graph API Selection → https://graph .facebook.com/me?fields=friends 
Graph API Connection → https://graph.facebook.com/me/friends

Although both Graph API above has the same goal, but the form of JSON output of each is different. So you have to be careful in applying the javascript code. Consider the example of JSON output from each Graph API

JSON Output Graph API ConnectionJSON Output Graph API Selection
{
"data": [
{
"name": "Pramutadi Sagni",
"id": "521472496"
},
{
"name": "Rahmat Wahyudi",
"id": "522162905"
},
{
"name": "Windi Meidiana",
"id": "534183569"
},
{
"name": "Mendy Gergassi",
"id": "534499678"
},
{
"name": "Muhammad Miftahuddin",
"id": "545743944"
}
],
"paging": {
"next": "https://graph.facebook.com/1571482874/friends?limit=5&value=1&base_amount=1&offset=5"
}
}		 {
"friends": {
"data": [
{
"name": "Pramutadi Sagni",
"id": "521472496"
},
{
"name": "Rahmat Wahyudi",
"id": "522162905"
},
{
"name": "Windi Meidiana",
"id": "534183569"
},
{
"name": "Mendy Gergassi",
"id": "534499678"
},
{
"name": "Muhammad Miftahuddin",
"id": "545743944"
}
],
"paging": {
"next": "https://graph.facebook.com/1571482874/friends?
metadata=1&limit=5&value=1&base_amount=1&format
=json&access_token=XXX&offset=5&__after_id=
545743944"
}
}
}

If you want to get the name and id of your friends, here is an example of javascript code with jquery

Graph API Connection Graph API Selection
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<script type=”text/javascript”>
$(document).ready(function(){
window.fbAsyncInit = function() {
FB.init({
appId : 'Your-App-Id',
status : true,
cookie : true,
xfbml : true,
oauth : true,
});
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
// the user is logged in and has authenticated your
// app, and response.authResponse supplies
// the user's ID, a valid access token, a signed
// request, and the time the access token
// and signed request each expire
var uid = response.authResponse.userID;
var accessToken = response.authResponse.accessToken;
$(‘#loginfb’).css(‘display’,’none’);
$(‘#logoutfb’).css(‘display’,’block’);
getYourFriends(accessToken);
} else if (response.status === 'not_authorized') {
// the user is logged in to Facebook,
// but has not authenticated your app
$(‘#loginfb’).css(‘display’,’block’);
$(‘#logoutfb’).css(‘display’,’none’);
} else {
// the user isn't logged in to Facebook.
$(‘#loginfb’).css(‘display’,’block’);
$(‘#logoutfb’).css(‘display’,’none’);
}
});
$(‘#loginfb’).click(function(){
FB.login(function(response) {
if (response.authResponse) {
console.log('Welcome! Fetching your information.... ');
var accessToken = response.authResponse.accessToken;
getYourFriends(accessToken);
} else {
console.log('User cancelled login or did not fully authorize.');
}
},{scope: 'email,user_likes'});
});
$('#logoutfb').click(function(){
FB.logout(function(response){
window.location = 'http://www.threelas.com/';
});
});
function getYourFriends(token){
var YourFriendsID = new Array();
var YourFriendsName = new Array();
var FriendsHTML = “”;
FB.api(‘/me/friends’, ’GET’, function(response){
FriendsHTML = ‘<ul>’;
for(var i = 0; i < response.data.length;i++){
YourFriendsID[i] = response.data[i].id;
YourFriendsName[i] = response.data[i].name;
FriendsHTML += ‘<li>’;
FriendsHTML += YourFriendsID[i] + “ “ + YourFriendsName[i];
FriendsHTML += ‘</li>’;
}
FriendsHTML += ‘</ul>’;
document.getElementById(‘output’).innerHTML = FriendsHTML;
});
}
};

 // Load the SDK Asynchronously
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId= Your-App-Id ";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
});
</script>
<button id=”loginfb”>Login</button>
<button id=”logoutfb”>Logout</button>
<div id=”output”>Result</div>
</body>		 <head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<script type=”text/javascript”>
$(document).ready(function(){
window.fbAsyncInit = function() {
FB.init({
appId : 'Your-App-Id',
status : true,
cookie : true,
xfbml : true,
oauth : true,
});
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
// the user is logged in and has authenticated your
// app, and response.authResponse supplies
// the user's ID, a valid access token, a signed
// request, and the time the access token
// and signed request each expire
var uid = response.authResponse.userID;
var accessToken = response.authResponse.accessToken;
$(‘#loginfb’).css(‘display’,’none’);
$(‘#logoutfb’).css(‘display’,’block’);
getYourFriends(accessToken);
} else if (response.status === 'not_authorized') {
// the user is logged in to Facebook,
// but has not authenticated your app
$(‘#loginfb’).css(‘display’,’block’);
$(‘#logoutfb’).css(‘display’,’none’);
} else {
// the user isn't logged in to Facebook.
$(‘#loginfb’).css(‘display’,’block’);
$(‘#logoutfb’).css(‘display’,’none’);
}
});
$(‘#loginfb’).click(function(){
FB.login(function(response) {
if (response.authResponse) {
console.log('Welcome! Fetching your information. ');
var accessToken = response.authResponse.accessToken;
getYourFriends(accessToken);
} else {
console.log('User cancelled login or did not fully authorize.');
}
},{scope: 'email,user_likes'});
});
$('#logoutfb').click(function(){
FB.logout(function(response){
window.location = 'http://www.threelas.com/';
});
});
function getYourFriends(token){
var YourFriendsID = new Array();
var YourFriendsName = new Array();
var FriendsHTML = “”;
FB.api(‘/me/friends’, ’GET’, function(response){
FriendsHTML = ‘<ul>’;
for(var i = 0; i < response.friends.data.length;i++){
YourFriendsID[i] = response.friends.data[i].id;
YourFriendsName[i] = response.friends.data[i].name;
FriendsHTML += ‘<li>’;
FriendsHTML += YourFriendsID[i] + “ “ + YourFriendsName[i];
FriendsHTML += ‘</li>’;
}
FriendsHTML += ‘</ul>’;
document.getElementById(‘output’).innerHTML = FriendsHTML;
});
}
};

 // Load the SDK Asynchronously
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId= Your-App-Id ";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
});
</script>
<button id=”loginfb”>Login</button>
<button id=”logoutfb”>Logout</button>
<div id=”output”>Result</div>
</body>

To find out the JSON output from each of the Graph API, you can use the Graph API Explorer. When a user login, then the output of the example program above is

• 521472496 Pramutadi Sagni
• 522162905 Rahmat Wahyudi
• 534183569 Windi Meidiana
• 534499678 Mendy Gergassi
• 545743944 Muhammad Miftahuddin

Post a Comment

Subscribe to: Post Comments ( Atom )

Creative Commons LicenseThreelas by Ibnu Syuhada is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.
Based on a work at http://www.threelas.com.
Permissions beyond the scope of this license may be available at http://www.threelas.com/p/privacy-policy.html.

Sitemap