I’ve taken below code from Facebook developer, while login to FB it's showing only logout button not showing user name and profile with logout button. Is it possible to add our own button instead of Facebook login button?
<html>
<head><title>facelogin<title></head>
<body>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '478566162309261',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
// Here we subscribe to the auth.authResponseChange JavaScript event. This event is fired
// for any authentication related change, such as login, logout or session refresh. This means that
// whenever someone who was previously logged out tries to log in again, the correct case below
// will be handled.
FB.Event.subscribe('auth.authResponseChange', function(response) {
// Here we specify what we do with the response anytime this event occurs.
if (response.status === 'connected') {
// The response object is returned with a status field that lets the app know the current
// login status of the person. In this case, we're handling the situation where they
// have logged in to the app.
testAPI();
} else if (response.status === 'not_authorized') {
// In this case, the person is logged into Facebook, but not into the app, so we call
// FB.login() to prompt them to do so.
// In real-life usage, you wouldn't want to immediately prompt someone to login
// like this, for two reasons:
// (1) JavaScript created popup windows are blocked by most browsers unless they
// result from direct interaction from people using the app (such as a mouse click)
// (2) it is a bad experience to be continually prompted to login upon page load.
FB.login();
} else {
// In this case, the person is not logged into Facebook, so we call the login()
// function to prompt them to do so. Note that at this stage there is no indication
// of whether they are logged into the app. If they aren't then they'll see the Login
// dialog right after they log in to Facebook.
// The same caveats as above apply to the FB.login() call here.
FB.login();
}
});
};
// Load the SDK asynchronously
(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));
// Here we run a very simple test of the Graph API after login is successful.
// This testAPI() function is only called in those cases.
function testAPI() {
console.log('Welcome! Fetching your information.... ');
FB.api('/me', function(response) {
console.log('Good to see you, ' + response.name + '.');
});
}
FB.logout(function(response) {
// Person is now logged out
});
</script>
<!--
Below we include the Login Button social plugin. This button uses the JavaScript SDK to
present a graphical Login button that triggers the FB.login() function when clicked. -->
<div class="fb-login-button" data-max-rows="1" data-size="medium" data-show-faces="false" data-auto-logout-link="true">
</div>
</body>
</html>
You can use your own button and call FB.login on click:
document.getElementById('loginBtn').addEventListener('click', function() {
//do the login
FB.login(function(response) {
if (response.authResponse) {
//user just authorized your app
document.getElementById('loginBtn').style.display = 'none';
getUserData();
}
}, {scope: 'email,public_profile', return_scopes: true});
}, false);
Source: http://www.devils-heaven.com/facebook-javascript-sdk-login/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
</script>
<script>
window.fbAsyncInit = function () {
// FB JavaScript SDK configuration and setup
FB.init({
appId: // FB App ID
cookie: true, // enable cookies to allow the server to access the session
xfbml: true, // parse social plugins on this page
version: 'v2.8' // use graph api version 2.8
});
// Check whether the user already logged in
FB.getLoginStatus(function (response) {
if (response.status === 'connected') {
//display user data
getFbUserData();
}
});
};
// Load the JavaScript 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_GB/sdk.js#xfbml=1&version=v2.8&appId=FB APP ID";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
// Facebook login with JavaScript SDK
function fbLogin() {
FB.login(function (response) {
if (response.authResponse) {
// Get and display the user profile data
getFbUserData();
} else {
document.getElementById('status').innerHTML = 'User cancelled login or did not fully authorize.';
}
}, {scope: 'email'});
}
// Fetch the user profile data from facebook
function getFbUserData() {
FB.api('/me', {locale: 'en_US', fields: 'id,first_name,last_name,email,link,gender,locale,picture'},
function (response) {
document.getElementById('fbLink').setAttribute("onclick", "fbLogout()");
document.getElementById('fbLink').innerHTML = 'Logout from Facebook';
document.getElementById('status').innerHTML = 'Thanks for logging in, ' + response.first_name + '!';
document.getElementById('userData').innerHTML = '<p><b>FB ID:</b> ' + response.id + '</p><p><b>Name:</b> ' + response.first_name + ' ' + response.last_name + '</p><p><b>Email:</b> ' + response.email + '</p><p><b>Gender:</b> ' + response.gender + '</p><p><b>Locale:</b> ' + response.locale + '</p><p><b>Picture:</b> <img src="' + response.picture.data.url + '"/></p><p><b>FB Profile:</b> <a target="_blank" href="' + response.link + '">click to view profile</a></p>';
});
}
// Logout from facebook
function fbLogout() {
FB.logout(function () {
document.getElementById('fbLink').setAttribute("onclick", "fbLogin()");
document.getElementById('fbLink').innerHTML = '<i class="fa fa-facebook-official" aria-hidden="true"></i>';
// document.getElementById('fbLink').innerHTML = '<div class="fb-login-button" data-max-rows="1" data-size="large" data-button-type="login_with" data-show-faces="false" data-auto-logout-link="false" data-use-continue-as="false"></div>';
document.getElementById('userData').innerHTML = '';
document.getElementById('status').innerHTML = 'You have successfully logout from Facebook.';
});
}
</script>
Related
I'm using Facebook login .. but recently i got an error while fetching data for signin / signUp
this's my code
<script>
// This is called with the results from from FB.getLoginStatus().
function statusChangeCallback(response) {
console.log('statusChangeCallback');
console.log(response);
if (response.status === 'connected') {
// Logged into your app and Facebook.
testAPI();
} else if (response.status === 'not_authorized') {
fbLogin();
// The person is not logged into your app or we are unable to tell.
document.getElementById('status').innerHTML = 'Please log ' +'into this app.';
}
else {
// The person is not logged into your app or we are unable to tell.
document.getElementById('status').innerHTML = 'Please log ' +'into this app.';
}
}
function checkLoginState() {
FB.getLoginStatus(function (response) {
statusChangeCallback(response);
});
}
function fbLogin() {
debugger;
FB.login(function (response) {
//if (response.authResponse) {
console.log('Welcome! Fetching your information.... ');
FB.api('/me/?fields=picture,name,email', function (response) {
console.log(response);
console.log('Successful login for: ' + response.name);
document.getElementById('status').innerHTML =
'Thanks for logging in, ' + response.name + '!';
});
//} else {
// console.log('User cancelled login or did not fully authorize.');
//}
}, { auth_type: 'reauthenticate', auth_nonce: '{random-nonce}' });
}
window.fbAsyncInit = function () {
FB.init({
appId: '393788184007786',
cookie: true, // enable cookies to allow the server to access
// the session
xfbml: true, // parse social plugins on this page
version: 'v3.2' // The Graph API version to use for the call
});
};
// 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 = "https://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', { fields: 'name,email' }, function (response) {
var info = response.id + '#' + response.name + '#' + response.email;
console.log('Successful login for: ' + info);
});
}
</script>
and this is button included in html for signin
<fb:login-button scope="public_profile,email" onlogin="checkLoginState();">
</fb:login-button>
and response from getLoginState() is:
{ authResponse: undefined, status: "not_authorized" }
and this's error shown enter image description here
i'm getting an message in facebook app said " We've restricted this app for violating the Facebook Platform Policies"
any suggestions for solving this issue?!!
The brackets are just placeholders, you have to remove them:
FB.init({
appId: '393788184007786',
cookie: true,
xfbml: true,
version: 'v3.2'
});
I'm trying to integrate Facebook login into my website with Facebook Javascript SDK. According to the step by step instructions provided by Facebook Developer document here, here is the test code I wrote:
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '{$MY_APP_ID}',
cookie : true, // enable cookies to allow the server to access the session
xfbml : true, // parse social plugins on this page
version : 'v2.1', // use version 2.1
status : true, // check FB login status
});
};
function fblogin() {
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
alert('Logged in.');
}
else {
FB.login();
}
}, true);
}
</script>
<button onclick="fblogin()">login</button>
<script src="//connect.facebook.net/en_US/sdk.js"></script>
Sorry, because of the restriction of website domain, I can't take this to fiddle. But I tried on my own domain, the Facebook login window popuped in Chrome and Firefox, but blocked by Safari. This is kind of weird, is there anything wrong for the code snippets provided by Facebook Developer Document?
As we already discussed in the comments, FB.login must be called on user interaction, the example in the docs is not correct.
This should be a working example how to do a login correctly, copied together from several articles in the Facebook docs:
<script>
//call this on user interaction (click)
function doLogin() {
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 + '.');
});
} else {
console.log('User cancelled login or did not fully authorize.');
}
}, {scope: 'email,user_friends'});
}
window.fbAsyncInit = function() {
FB.init({
appId : 'your-app-id',
xfbml : true,
version : 'v2.1'
});
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;
} else if (response.status === 'not_authorized') {
// the user is logged in to Facebook,
// but has not authenticated your app
} else {
// the user isn't logged in to 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'));
</script>
<button onclick="doLogin()">login</button>
More explanation: http://www.devils-heaven.com/facebook-javascript-sdk-login/
I just want make a script who post when i make the login. I find this code
var body = 'i13 App - Post test';
FB.api('/me/feed', 'post', { message: body }, function(response) {
if (!response || response.error) {
alert('Error occured');
}else {
alert('Post ID: ' + response.id);
}
});
it work with Facebook javascipt Test Console, but when i put in my script i never can post and received the alert('error occured),
Thz for your help,
Have you set up the page code correctly? ensure you have the following code within the page
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
// init the FB JS SDK
FB.init({
appId : 'YOUR_APP_ID', // App ID from the app dashboard
status : true, // Check Facebook Login status
xfbml : true // Look for social plugins on the page
});
// Additional initialization code such as adding Event Listeners goes here
};
// 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";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
https://developers.facebook.com/docs/reference/javascript/
After the user is logged in successfully you can have a button trigger the following code"
var body = 'Reading JS SDK documentation';
FB.api('/me/feed', 'post', { message: body }, function(response) {
if (!response || response.error) {
alert('Error occured');
} else {
alert('Post ID: ' + response.id);
}
});
https://developers.facebook.com/docs/reference/javascript/FB.api/
FB.login fails and execution stops on FB.login. I can only see for a few seconds facebook login popup that says "loading", then it disappear and nothing happens.
I have after body tag
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
// init the FB JS SDK
FB.init({
appId : '129519787234412', // App ID from the App Dashboard
channelUrl : '<?=URL?>facebookChannel.php', // Channel File for x-domain communication
status : true, // check the login status upon init?
xfbml : true // parse XFBML tags on this page?
});
// Additional initialization code such as adding Event Listeners goes here
};
// 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";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
After all HTML, in script tag:
$(".box_top_img").click(function(){
FB.login(function(response) {
if (response.authResponse) {
FB.getAuthResponse()['accessToken'];
FB.api('/me', function(response) {
$.ajax({
url:"ajax/check_vote.php",
type:"POST",
data:response,
success:function(response){
var result = $.parseJSON(response);
if(result.code == 0){
$("#container_1").hide();
$("#container_2").hide();
$("#container_3").show();
}else if(result.code == 1){
$("#container_1").hide();
$("#container_2").show();
$("#container_3").hide();
$("#facebook_id").val(result.id);
if(result.first_name)
$("#name").val(result.first_name);
if(result.last_name)
$("#lastname").val(result.last_name);
if(result.email)
$("#email").val(result.email);
}else{
$("#container_1").show();
$("#container_2").hide();
$("#container_3").hide();
}
}
});
});
} else {
console.log('User cancelled login or did not fully authorize.');
}
}, {scope: 'email'});
});
Thanks!!
Check if sandbox mode is disabled on the app settings page
You could try to replace facebook-jssdk with fb-root. This should work.
I want to disable auto login in my website when there is a facebook session user. I want the user to click on the facebook login button
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId: '<?php echo $facebook->getAppID() ?>',
cookie: true,
xfbml: true,
oauth: true
});
FB.Event.subscribe('auth.login', function(response) {
window.location.reload();
});
FB.Event.subscribe('auth.logout', function(response) {
window.location.reload();
});
};
(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);
}());
</script>
Just do this.
FB.init({
appId : 'key',
status : false,
cookie : true, // enable cookies to allow the server to access
// the session
xfbml : true, // parse social plugins on this page
version : 'v2.8' // use graph api version 2.8
});
and auto login will be disabled.
just put status on the top.
Instead of facebook events, simply use FB.Login.
Call the userLogin(), when the user click your Login button (not the facebook login button, but a simple button)
function userLogin()
{
FB.login(function(response)
{
if (response.authResponse)
{
console.log('Welcome! Fetching your information.... ');
var access_token = response.authResponse.accessToken;
location.href = "REDIRECT_TO.php";
}
else
{
console.log('User cancelled login or did not fully authorize.');
}
});
}
So now, the user have to click on the facebook login button every time he visits your site.
Add "status: false" inside your FB.init.
This will prevent an existing Facebook session from logging users in automatically.
https://developers.facebook.com/docs/unity/reference/current/FB.Init