Develop Reference

Connecting Facebook on an application

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) {}
}

How to logout only my FBapplication not my facebook account?

I am using facebook javascript sdk on my web application. I am using graph api to login my application. When I logged out from my application, my application is logged out and my facebook account is also logout.
How to logout only my application not my facebook account ?
Please help me if someone has found solution for this.
Code:
<script type="text/javascript">
var button;
var userInfo;
window.fbAsyncInit = function() {
FB.init({ appId: '########',
status: true,
cookie: true,
xfbml: true,
oauth: true});
showLoader(true);
function updateButton(response) {
button = document.getElementById('fb-auth');
userInfo = document.getElementById('user-info');
userdata = document.getElementById('user-data');
if (response.authResponse) {
//user is already logged in and connected
FB.api('/me', function(info) {
login(response, info);
});
button.onclick = function() {
FB.logout(function(response) {
logout(response);
});
};
} else {
//user is not connected to your app or logged out
button.innerHTML = 'Login';
button.onclick = function() {
showLoader(true);
FB.login(function(response) {
if (response.authResponse) {
FB.api('/me', function(info) {
login(response, info);
});
} else {
//user cancelled login or did not grant authorization
showLoader(false);
}
}, {scope:'email,user_birthday,status_update,publish_stream,user_about_me'});
}
}
}
// run once with current status and whenever the status changes
FB.getLoginStatus(updateButton);
FB.Event.subscribe('auth.statusChange', updateButton);
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol
+ '//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
function login(response, info){
if (response.authResponse) {
var accessToken = response.authResponse.accessToken;
userInfo.innerHTML = '<img src="https://graph.facebook.com/' + info.id + '/picture">' + info.name
+ "<br /> Your Access Token: " + accessToken;
button.innerHTML = 'Logout';
showLoader(false);
document.getElementById('other').style.display = "block";
}
}
function logout(response){
userInfo.innerHTML = "";
document.getElementById('debug').innerHTML = "";
document.getElementById('other').style.display = "none";
showLoader(false);
}
//stream publish method
function streamPublish(name, description, hrefTitle, hrefLink, userPrompt){
showLoader(true);
FB.ui(
{
method: 'stream.publish',
message: '',
attachment: {
name: name,
caption: '',
description: (description),
href: hrefLink
},
action_links: [
{ text: hrefTitle, href: hrefLink }
],
user_prompt_message: userPrompt
},
function(response) {
showLoader(false);
});
}
function showStream(){
FB.api('/me', function(response) {
//console.log(response.id);
streamPublish();
});
}
function share(){
showLoader(true);
var share = {
method: 'stream.share',
u: 'http://www.appovative.com/'
};
FB.ui(share, function(response) {
showLoader(false);
console.log(response);
});
}
function setStatus(){
showLoader(true);
status1 = document.getElementById('status').value;
FB.api(
{
method: 'status.set',
status: status1
},
function(response) {
if (response == 0){
alert('Your facebook status not updated. Give Status Update Permission.');
}
else{
alert('Your facebook status updated');
}
showLoader(false);
}
);
}
function showLoader(status){
if (status)
document.getElementById('loader').style.display = 'block';
else
document.getElementById('loader').style.display = 'none';
}
</script>

Their is function defined in FB object use this to destroy FB session ,
usage( via PHP)
$facebook->destroySession();
Or
FB API provides a logoutURL which will log the user out of their current Facebook account.
you can use it like this ,
$facebook = new Facebook($config);
$params = array('next' => 'www.yousite.com/test.php' );
$logoutURL = $facebook->getLogoutUrl($params);
***note
advisable to add below codes also (not in case if you dont want your user to log out of your site)
//remove PHPSESSID from browser
if ( isset( $_COOKIE[session_name()] ) )
setcookie( session_name(), '', time()-7000000, '/' );
//clear session from globals
$_SESSION = array();
With JS using a custom event
ref : (FB.logout() called without an access token. javascript sdk)
function fbLogoutUser() {
FB.getLoginStatus(function(response) {
if (response && response.status === 'connected') {
FB.logout(function(response) {
document.location.reload();
});
}
});
}

how to get publish_stream permissions for post on facebook wall?

here is my connection:
window.fbAsyncInit = function () {
FB.init({
appId: "348044465251207",
status: true,
cookie: true,
xfbml: true,
oauth: true
});
FB.Event.subscribe('auth.login', function (response) {
var credentials = { uid: response.authResponse.userID, accessToken: response.authResponse.accessToken };
SubmitLogin(credentials);
}, { perms: 'read_stream,publish_stream,offline_access' });
FB.getLoginStatus(function (response) {
if (response.status === 'connected') {
FB.api('/me', function (response) {
//console.log('Good to see you, ' + response.name + '.');
mail = response.email;
currentName = response.name;
gender = response.gender;
place = response.location;
$.ajax({
url: "/Login/DetailsToDataBase",
type: "POST",
data: { gender: gender, mail: mail, place: place },
success: function (data) {
generalScore = data;
div_element = document.getElementById("userScore");
div_element.innerHTML = "Your score is: " + generalScore;
}
});
});
} //end if
else if (response.status === 'not_authorized') { alert("user is not authorised"); }
else { alert("user is not conntected to facebook"); }
}, { scope: 'read_stream,publish_stream,offline_access' });
function SubmitLogin(credentials) {
$.ajax({
url: "/Login/FacebookLogin",
type: "POST",
data: credentials,
error: function () {
alert("error logging in to your facebook account.");
},
success: function () {
// alert("success log in facebook");
// window.location.reload();
}
});
}
};
(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);
} (document));
and this is the function to post on user facebook wall:
var params = {};
params['method'] = 'stream.publish';
params['message'] = currentName +' earn '+ score+ '$ in battelship!';
params['name'] = 'BattelShip';
params['description'] = 'let\'s see if you sucsses to break my highlight';
params['link'] = 'https://apps.facebook.com/348044465251207/?fb_source=search&ref=ts&fref=ts';
params['picture'] = 'http://www.israup.net/images/98d0808995e356818a0c016bc1a2a7cc.png';
params['caption'] = 'Try it by Yourself!';
FB.api('/me/feed', 'post', params, function(response) {
if (!response || response.error) {
console.log('Error occured');
} else {
console.log('Published to stream - you might want to delete it now!');
}
});
it post only on my wall (because i am the admin of the app), but for another users it says:
"The user hasn't authorized the application to perform this action"
help me please!!

You need to look at the Login documentation again I think, you're using a parameter in part of your login flow 'perms' which was deprecated over a year ago in favour of 'scope' -
Check the examples that come with the SDK and read the login documentation, though the code might just work if you fix that error, i'd be wary of what other things have changed in the API since the example you're working from was written - you can check what permissions were granted to the access token you're using by calling /me/permissions with that access token

How to login using Facebook account?

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 */
}
}
);
}

Facebook Login infinite loop

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
};