I have been through this link and tried the code.
I am doing the same thing but there is no response coming from Facebook. No popup (not blocked). My code is given below:
<div id="fb-root"></div>
<script>
// Additional JS functions here
window.fbAsyncInit = function() {
FB.init({
appId : 'myappid', // App ID
channelUrl : '//myurl/channel.html', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
FB.getLoginStatus(function(response) {
alert("Response");
alert("getloginstatus");
if (response.status === 'connected') {
// connected
} else if (response.status === 'not_authorized') {
// not_authorized
login();
} else {
// not_logged_in
login();
}
});
};
(function(d){
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
alert("Lodaed SDK");
}(document));
function testAPI() {
console.log('Welcome! Fetching your information.... ');
FB.api('/me', function(response) {
alert("Good to see you, " + response.name + ".");
});
}
function login() {
FB.login(function(response) {
if (response.authResponse) {
// connected
} else {
// cancelled
}
});
}
</script>
</div>
Please tell me what I am doing wrong. I yea, I have not any checkbox in
Select how your app integrates with Facebook.
during creating Facebook app. If I have to define url so what I have given?
<script>
// This is called with the results from from FB.getLoginStatus().
function statusChangeCallback(response) {
console.log(response);
// The response object is returned with a status field that lets the
// app know the current login status of the person.
// Full docs on the response object can be found in the documentation
// for FB.getLoginStatus().
if (response.status === 'connected') {
// Logged into your app and Facebook.
testAPI();
} else if (response.status === 'not_authorized') {
// The person is logged into Facebook, but not your app.
console.log("The person is logged into Facebook, but not your app.");
} else {
// The person is not logged into Facebook, so we're not sure if
// they are logged into this app or not.
}
}
// This function is called when someone finishes with the Login
// Button. See the onlogin handler attached to it in the sample
// code below.
function checkLoginState() {
FB.getLoginStatus(function(response) {
statusChangeCallback(response);
});
}
window.fbAsyncInit = function() {
FB.init({
appId: '{Your App Id}',
cookie: true, // enable cookies to allow the server to access
// the session
xfbml: true, // parse social plugins on this page
version: 'v2.2' // use version 2.2
});
// Now that we've initialized the JavaScript SDK, we call
// FB.getLoginStatus(). This function gets the state of the
// person visiting this page and can return one of three states to
// the callback you provide. They can be:
//
// 1. Logged into your app ('connected')
// 2. Logged into Facebook, but not your app ('not_authorized')
// 3. Not logged into Facebook and can't tell if they are logged into
// your app or not.
//
// These three cases are handled in the callback function.
FB.getLoginStatus(function(response) {
statusChangeCallback(response);
});
};
// 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/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
// Here we run a very simple test of the Graph API after login is
// successful. See statusChangeCallback() for when this call is made.
function testAPI() {
console.log('Welcome! Fetching your information.... ');
FB.api('/me', function(response) {
console.log("Fb response");
console.log(response);
console.log('Successful login for: ' + response.name);
document.getElementById('status').innerHTML =
'Thanks for logging in, ' + response.name + '!';
});
}
</script>
In Body , use :-
<fb:login-button scope="public_profile,email" onlogin="checkLoginState();">
</fb:login-button>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" type="text/css" href="">
</head>
<body>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '1736082853383409',
xfbml : true,
version : 'v2.8'
});
FB.getLoginStatus(function(response){
if(response.status === 'connected'){
document.getElementById('status').innerHTML = 'we are connected';
} else if(response.status === 'not_authorized') {
document.getElementById('status').innerHTML = 'we are not logged in.'
} else {
document.getElementById('status').innerHTML = 'you are not logged in to Facebook';
}
});
// FB.AppEvents.logPageView();
};
(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(){
FB.login(function(response){
if(response.status === 'connected'){
document.getElementById('status').innerHTML = 'we are connected';
} else if(response.status === 'not_authorized') {
document.getElementById('status').innerHTML = 'we are not logged in.'
} else {
document.getElementById('status').innerHTML = 'you are not logged in to Facebook';
}
});
}
// get user basic info
function getInfo() {
FB.api('/me', 'GET', {fields: 'first_name,last_name,name,id'}, function(response) {
document.getElementById('status').innerHTML = response.id;
});
}
function logout(){
FB.logout(function(response) {
document.location.reload();
});
}
</script>
<div id="status"></div>
<!-- <button onclick="getInfo()">Get Info</button> -->
<button onclick="login()">login</button>
<button onclick="logout()">logout</button>
</body>
</html>
Use this code or follow https://github.com/radhey113/facebook_login/blob/master/index1.html
window.fbAsyncInit = function() {
FB.init({
appId : '1557876490891744',
appSecret : '302f28b9110351071840458316ce232f',
xfbml : true,
version : 'v2.5'
});
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
document.getElementById('status').innerHTML = 'We are connected.';
document.getElementById('login').style.visibility = 'hidden';
} else if (response.status === 'not_authorized') {
document.getElementById('status').innerHTML = 'We are 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'));
// login with facebook with extened publish_actions permission
function login() {
FB.login(function(response) {
console.log(response);
if (response.status === 'connected') {
document.getElementById('status').innerHTML = 'We are connected.';
document.getElementById('login').style.visibility = 'hidden';
} else if (response.status === 'not_authorized') {
document.getElementById('status').innerHTML = 'We are not logged in.'
} else {
document.getElementById('status').innerHTML = 'You are not logged into Facebook.';
}
}, {scope: 'publish_actions'});
}
// getting basic user info
function getInfo() {
FB.api('/me', 'GET', {fields: 'first_name,last_name,name,id'}, function(response) {
document.getElementById('status').innerHTML = response.id;
});
}
// uploading photo on user timeline
function uploadPhoto() {
FB.api('/me/feed', 'post', {source: 'http://lh3.googleusercontent.com/nYhPnY2I-e9rpqnid9u9aAODz4C04OycEGxqHG5vxFnA35OGmLMrrUmhM9eaHKJ7liB-=w300', message : "SHOWDOWN POST",link:'http://54.175.71.74:3000'}, function(response) {
if (!response || response.error) {
console.log(JSON.stringify(response));
document.getElementById('status').innerHTML = "Error!";
} else {
console.log(JSON.stringify(response));
document.getElementById('status').innerHTML = response.id;
}
});
}
function uploadFeed(imgUrl, des) {
console.log("img Url-------- " + imgUrl);
$scope.loaderOverlay = false;
var linkPage = 'http://playshowdown.com/feed?categoryName='+vm.stateType.categoryName+'&id='+ vm.stateType._id +
'&type='+vm.stateType.type + '&feedType='+vm.stateType.feedType;
FB.ui({
method: 'share_open_graph',
action_type: 'og.shares',
action_properties: JSON.stringify({
object: {
'og:url': linkPage,
'og:title': "Play Showdown",
'og:description': des,
'og:image': imgUrl
}
})
},
function (response) {
console.log(response);
// if(response.post_id){
if(response.error_code != 4201){
vm.areYouSure = false;
$timeout(function(){
$('.overlay').show();
$('#congract4').show();
},1000);
console.log("post response1: " + JSON.stringify(response));
}
// }
// Action after response
})
}
function readPermission() {
FB.api(
"/debug_token?input_token=EAAWI4WLX8eABAJHx3al6NIi2pLM7ZCZBXEgFUOp2gJQ3VOh7gRbLSdZBZAJgmjcuYcYT7jaqO4mrkOyUeCI2q8kuZBqZCzJajjEqPjsZAFzFnHJPhWWozOGqKRZCCvTARTOS67G04cUyeYi9RAZBSZCrZA1Jq6FOmiyksFnhSKkEaFHOQQbZB5siATE9AQCU7prTGv0ZD",
function (response) {
console.log(response)
if (response && !response.error) {
/* handle the result */
}
}
);
}
Related
I can not retrieve the facebook e-mail address of a person who connects with the facebook login button. I use JDK java script in 2.8 version
<fb:login-button scope="public_profile,email" onlogin="checkLoginState();" auto_logout_link="true"></fb:login-button>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '<appId>',
xfbml : true,
version : 'v2.8'
});
FB.AppEvents.logPageView();
};
(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_FR/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
function checkLoginState() {
FB.getLoginStatus(function(response) {
//console.log('Check login state');
//console.log(response);
statusChangeCallback(response);
});
}
function statusChangeCallback(response) {
if (response.status === 'connected') {
console.log('Connected');
testAPI();
} else if (response.status === 'not_authorized') {
console.log('Please log into this app');
} else {
console.log('Please log into Facebook.');
}
}
function testAPI() {
FB.login(function(response) {
if (response.authResponse) {
var access_token = response.authResponse.accessToken;
FB.api(
'/me',
{fields: 'id,email,cover,name,first_name,last_name,age_range,link,gender,locale,picture,timezone,updated_time,verified'},
function (response) {
console.log('response');
console.log(response);
}
);
} else {
console.log('User cancelled login or did not fully authorize.');
}
},{scope:'email'});
}
function testLogout() {
FB.logout(function(response) {
console.log(response);
});
}
</script>
I have all the information except the email. Can you help me please ?
Change:
FB.api(
'/me',
{fields: 'id,email,cover,name,first_name,last_name,age_range,link,gender,locale,picture,timezone,updated_time,verified'},
function (response) {
console.log('response');
console.log(response);
}
);
To:
FB.api(
'/me?fields=id,email,cover,name,first_name,last_name,age_range,link,gender,locale,picture,timezone,updated_time,verified',
function (response) {
console.log('response');
console.log(response);
}
);
I am making a Facebook Quiz app. Which lets the user log in with Facebook. I'm trying to display User's profile picture automatically without having to click on "Get Info" but really it kept crashing the code and it the login button stops working. Currently, it works. The user logs in then to display the profile picture, the user has to click "Get Info" button and it will display the user's profile picture. I don't want the "get info" button, I want the profile picture to be automatically displayed.
HTML:
<div id="status"></div>
<div id="lgnbtn">
<button onclick="login()" id="login">Login with Facebook</button>
</div>
<button onclick="getInfo()" id="getInfo">Get Info</button>
Javascript:
// initialize and setup facebook js sdk
window.fbAsyncInit = function() {
FB.init({
appId : '1036296558220017',
xfbml : true,
version : 'v2.5'
});
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
document.getElementById('status').innerHTML = 'We are connected.';
document.getElementById('login').style.visibility = 'hidden';
} else if (response.status === 'not_authorized') {
document.getElementById('status').innerHTML = 'We are 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'));
// login with facebook with extra permissions
function login() {
FB.login(function(response) {
if (response.status === 'connected') {
document.getElementById('status').innerHTML = 'We are connected.';
document.getElementById('login').style.visibility = 'hidden';
} else if (response.status === 'not_authorized') {
document.getElementById('status').innerHTML = 'We are not logged in.'
} else {
document.getElementById('status').innerHTML = 'You are not logged into Facebook.';
}
}, {scope: 'email'});
}
// getting basic user info
function getInfo() {
FB.api('/me', 'GET', {fields: 'first_name,last_name,name,id,picture.width(150).height(150)'}, function(response) {
document.getElementById('status').innerHTML = "<img src='" + response.picture.data.url + "'>";
});
}
Invoke getInfo(); in FB.login success handler.
window.fbAsyncInit = function() {
FB.init({
appId: '1034762986580727',
xfbml: true,
version: 'v2.5'
});
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
document.getElementById('status').innerHTML = 'We are connected.';
document.getElementById('login').style.visibility = 'hidden';
} else if (response.status === 'not_authorized') {
document.getElementById('status').innerHTML = 'We are 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'));
// login with facebook with extra permissions
function login() {
FB.login(function(response) {
if (response.status === 'connected') {
document.getElementById('status').innerHTML = 'We are connected.';
document.getElementById('login').style.visibility = 'hidden';
getInfo(); // Invoke it here
} else if (response.status === 'not_authorized') {
document.getElementById('status').innerHTML = 'We are not logged in.'
} else {
document.getElementById('status').innerHTML = 'You are not logged into Facebook.';
}
}, {
scope: 'email'
});
}
// getting basic user info
function getInfo() {
FB.api('/me', 'GET', {
fields: 'first_name,last_name,name,id,picture.width(150).height(150)'
}, function(response) {
console.log(response);//Check the response in console
document.getElementById('status').innerHTML = "<img src='" + response.picture.data.url + "'>";
});
}
<div id="status"></div>
<div id="lgnbtn">
<button onclick="login()" id="login">Login with Facebook</button>
</div>
Everytime I log out my account on Facebook itself, the connected account (same account) in the app also logs out. Is this expected?
I was hoping to come up with something like Hootsuite's functionalities, starting with Facebook first.
Here is my code.
<div id="fb-root"></div>
<script>
var app_id='{!#SETTINGS.facebook_api_key#value}';
function statusChangeCallback(response) {
console.log('statusChangeCallback');
console.log(response);
if (response.status === 'connected') {
console.log('The user is connected.');
var fb_access_token = response.authResponse.accessToken;
console.log(fb_access_token);
rbf_setFieldValue("facebook_access_token", fb_access_token);
} else if (response.status === 'not_authorized') {
console.log('The user is not authorized.');
} else {
console.log('The user is not logged in.');
FB.login(function(response) {
console.log('Logging in.');
var fb_access_token = response.authResponse.accessToken;
console.log(fb_access_token);
rbf_setFieldValue("facebook_access_token", fb_access_token);
}, {scope: 'public_profile, manage_pages, publish_actions, user_groups'});
}
}
function checkLoginState() {
FB.getLoginStatus(function(response) {
statusChangeCallback(response);
});
}
window.fbAsyncInit = function() {
FB.init({
appId : app_id,
cookie : true,
xfbml : true,
version : 'v2.1'
});
FB.getLoginStatus(function(response) {
statusChangeCallback(response);
});
};
// 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/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
Got it.
My mistake was I used FB.ui for posting to Facebook, and it requires a Facebook account to post.
The solution was to use FB.api and pass the user/page access token so that you can post without user login.
function postToSocialTimeline() {
try {
var obj = {
name: name,
description: description,
link: link,
picture: picture,
caption: caption,
message: "Test",
access_token: accessCode
};
function resp(response) {
console.log('Cancelled');
} //FB.ui(obj, resp);
FB.api('/me/feed', 'POST', obj, function(response) {
if (!response || response.error) {
console.log(!response ? 'error occurred' : response.error);
console.log('Error');
alert('Unable to post to Facebook!');
return;
} else {
alert('Requisition has been successfully posted!');
}
});
} catch (e) {}
}
I am trying to fetch facebook user email for my app. But when I query, the email address is returned as undefined. I am not getting how to deal with it.
Here is my code-
<body>
<script>
function statusChangeCallback(response) {
console.log('statusChangeCallback');
console.log(response);
if (response.status === 'connected') {
testAPI();
} else if (response.status === 'not_authorized') {
FB.login(function(response) {}, {
scope: 'email'
});
document.getElementById('status').innerHTML = 'Please log ' +
'into this app.';
} else {
FB.login(function(response) {}, {
scope: 'email'
});
document.getElementById('status').innerHTML = 'Please log ' +
'into Facebook.';
}
}
function checkLoginState() {
FB.getLoginStatus(function(response) {
statusChangeCallback(response);
});
}
window.fbAsyncInit = function() {
FB.init({
appId: 'app id',
cookie: true, // enable cookies to allow the server to access
xfbml: true, // parse social plugins on this page
version: 'v2.1' // use version 2.1
});
FB.getLoginStatus(function(response) {
statusChangeCallback(response);
});
};
(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 testAPI() {
console.log('Welcome! Fetching your information.... ');
FB.api('/me', function(response) {
alert(response.name);
alert(response.email);
console.log('Successful login for: ' + response.name);
document.getElementById('status').innerHTML = 'Thanks for logging in, ' + response.name + '!';
});
}
</script>
<fb:login-button perms="email" autologoutlink="true" onlogin="checkLoginState();">
</fb:login-button>
<div id="status">
</div>
</body>
#Tobi this really saved my day :
FB.api('/me
Replaced by
FB.api('/me?fields=id,name,email,permissions', function(response) {
console.log(response.name);
console.log(response.email);
});
However, I don't understand why the scope of the following code (which is in the facebook documentation) isn't working
<fb:login-button scope="public_profile,email" onlogin="checkLoginState();">
You should use the scope attribute instead of perms in the Login Button, so the permission cannot be fetched. Try
<fb:login-button scope="public_profile,email" autologoutlink="true" onlogin="checkLoginState();">
</fb:login-button>
See:
https://developers.facebook.com/docs/facebook-login/login-flow-for-web/v2.2#quickstart
I got a Problem with the Facebook Login on my page.
First I tried it with only FB.Login but then i get following message: "FB.login() called when user is already connected."
So I added FB.getLoginStatus But now it keeps loggin me in, in a infinite loop. Even if i'm logged (into my system) and without me clicking on the FB-Connect Button.
How can I achieve it to not log me in until I click the FB-connect Button?
<div id="fb-root"></div>
<script>(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/fb_LT/all.js#xfbml=1&appId=198866780209581";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
window.fbAsyncInit = function() {
FB.init({
appId : "198866780209581", // App ID
status : true,
cookie : true,
xfbml : true,
oauth : true,
});
var login = false;
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
console.log('connected');
login=true;
$.ajax({
type: "POST",
url: "/?eID=login&modus=facebook&fb-login=1",
data: $(this).serialize(),
success: function(msg) {
console.log("LOGIN");
window.location.reload();
}
})
var uid = response.authResponse.userID;
var accessToken = response.authResponse.accessToken;
}
else{
FB.login(function(response) {
if (response.authResponse) {
console.log('Welcome! Fetching your information.... ');
FB.api('/me', function(response) {
console.log('Good to see you, ' + response.name + '.');
if(login===false)
{
alert('nicht connected');
}
});
} else {
console.log('User cancelled login or did not fully authorize.');
}
}, {scope: 'email'});
}});
// Additional initialization code here
};
</script>
The solution was to change the click function like this:
$(".fb-login-button").live("click", function() {
}
My final code looks like this:
<div id="fb-root"></div>
<script>(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/fb_LT/all.js#xfbml=1&appId=198866780209581";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
window.fbAsyncInit = function() {
FB.init({
appId : "198866780209581", // App ID
status : true,
cookie : true,
xfbml : true,
oauth : true,
});
var login = false;
$(".fb-login-button").live("click", function() {
FB.getLoginStatus(function(response) {
alert('hier 1');
if (response.status === 'connected') {
alert('connected');
console.log('connected');
login=true;
$.ajax({
type: "POST",
url: "/?eID=login&modus=facebook&fb-login=1",
data: $(this).serialize(),
success: function(msg) {
console.log("LOGIN");
window.location.reload();
}
})
var uid = response.authResponse.userID;
var accessToken = response.authResponse.accessToken;
}
else{
alert('im else');
FB.login(function(response) {
if (response.authResponse) {
console.log('Welcome! Fetching your information.... ');
FB.api('/me', function(response) {
console.log('Good to see you, ' + response.name + '.');
if(login===false)
{
alert('nicht connected');
}
});
} else {
console.log('User cancelled login or did not fully authorize.');
}
}, {scope: 'email'});
}});
});
// Additional initialization code here
};