Welcome! Here's an example showcasing the use of Facebook API Graph v2.2 for simple social network access:
Let's display some feed information:
function fetchFacebookData(id) {
$.ajax({
url: 'https://graph.facebook.com/v2.2/' + id + '/feed?limit=1&access_token=443213172472393|l2IEt1tuyYta_278fR5NAg8V1jI',
crossDomain: true,
dataType: 'json'
}).done(function(json) {
var data = json.data[0],
photo = '',
html = '';
if (data.picture != null && data.picture != undefined) {
photo += '<img src="https://graph.facebook.com/' + data.object_id + '/picture" class="media">'
}
var url = {
link: 'https://facebook.com/',
tag: 'https://facebook.com/hashtag/'
}
html += '<div class="post facebook">';
html += ' <div class="content">';
html += ' <div class="left">';
html += ' <i class="fa fa-facebook-official"></i>';
html += ' </div>';
html += ' <div class="right">';
html += ' <div class="top">';
html += ' <a class="user" href="https://facebook.com/' + data.from.id + '" target="_blank">' + data.from.name + '</a>';
html += ' <a class="date" href="' + data.link + '" target="_blank">' + relative_time(data.created_time) + ' ago</a>';
html += ' </div>';
if (data.message != null && data.message != undefined) {
html += ' <div class="bottom">';
html += urltag(data.message, url);
html += ' </div>';
}
html += ' </div>';
html += ' </div>';
html += photo;
html += '</div>';
$('#feed').append(html);
});
}
Now, let's proceed to post feed data to the API:
Javascript
var FacebookLike = {
// This is just an example, avoid using globals
fbAppId: '{YOUR API}',
objectToLike: '{YOUR URL}'
}
// More JS functions can be added here
window.fbAsyncInit = function() {
FB.init({
appId: FacebookLike.fbAppId,
status: true,
cookie: true,
xfbml: true,
version: 'v2.3',
});
};
// Asynchronously load the SDK
(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/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
function login(title, id) {
FB.login(function(response) {
if (response.status === 'connected') {
alert("Logged in successfully. You can share on your FaceBook page.")
postLike(title, id)
} else if (response.status === 'not_authorized') {
alert("Please authorize the application");
} else {
alert("Please login to FaceBook and authorize the application");
}
});
}
function postLike(title, id) {
var stats = false;
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
stats = true;
} else if (response.status === 'not_authorized') {
var success = confirm("Please click 'Ok' to authorize the application!");
if (success) {
login(title, id);
}
} else {
var success = confirm("Please click 'Ok' login to Facebook!");
if (success) {
login(title, id);
}
}
});
if (stats) {
title = encodeURI(title);
FB.ui({
method: 'share_open_graph',
action_type: '{graph:action}',
action_properties: JSON.stringify({
image: '{..thumbnail.png}',
certificate: "{..object.php?title=" + title + "&id="+id+"}",
description: "{external description}",
title: title,
course: title,
type: '{YOUR GRAPH OBJECT: OBJECT}'
})
},
function(response) {
if (response && !response.error_code) {
document.getElementById('result').innerHTML = 'Success!';
} else {
document.getElementById('result').innerHTML = 'Error: ' + response.error_message;
if (response.error_code == 100) {
alert('Sorry! The application is not allowed to post on the FaceBook. Please contact support.');
} else {
alert('Sorry! The application could not post on the FaceBook. Please contact support.')
};
}
});
}
return false;
}
HTML
<div id="result"></div>
Hope this information is helpful. Best regards.