I'm currently facing an issue with displaying a random profile picture of the user's friends on Facebook. I attempted to troubleshoot it myself but ended up crashing the login button and now it's not functioning properly. Can someone please help me identify what went wrong in the code I added to my JavaScript file?
This is the code snippet I experimented with:
/* implementing the API call */
function gatherInfo() {
FB.api('/friend-list-id/members', 'GET', {
fields: 'first_name,last_name,name,id,picture.width(100).height(100)'
}, function (response) {
console.log(response);// Inspect the response in the console
document.getElementById('status').innerHTML = "<img src='" + response.picture.data.url + "'><br>" + response.name;
});
Javascript Section:
window.fbAsyncInit = function() {
FB.init({
appId: '',
xfbml: true,
version: 'v2.5'
});
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
document.getElementById('status').innerHTML = 'Connection successful.';
document.getElementById('login').style.visibility = 'hidden';
} else if (response.status === 'not_authorized') {
document.getElementById('status').innerHTML = 'Not logged in.'
} else {
document.getElementById('status').innerHTML = 'You are not logged into Facebook.';
}
});
};
(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'));
// Sign in using Facebook with additional permissions
function logIn() {
FB.login(function(response) {
if (response.status === 'connected') {
document.getElementById('status').innerHTML = "<img src='http://www.webdevelopmenthelp.net/wp-content/uploads/2015/04/loading.gif' />";
document.getElementById('login').style.visibility = 'hidden';
gatherInfo();// Call the function here
name();
} else if (response.status === 'not_authorized') {
document.getElementById('status').innerHTML = 'Not logged in.'
} else {
document.getElementById('status').innerHTML = 'You are not logged into Facebook.';
}
}, {
scope: 'email'
});
}
// Retrieve basic user information
function gatherInfo() {
FB.api('/me', 'GET', {
fields: 'first_name,last_name,name,id,picture.width(100).height(100)'
}, function(response) {
console.log(response);// Check the response in the console
document.getElementById('status').innerHTML = "<img src='" + response.picture.data.url + "'><br>" + response.name;
});
/* Implementing the API call */
function gatherInfo() {
FB.api('/friend-list-id/members', 'GET', {
fields: 'first_name,last_name,name,id,picture.width(100).height(100)'
}, function (response) {
console.log(response);// Inspect the response in the console
document.getElementById('status').innerHTML = "<img src='" + response.picture.data.url + "'><br>" + response.name;
});
}
Thank you in advance for any help provided.