OK. So I have no idea on how to do this but you are going to have to talk like a 3 year old to me. I know PHP, HTML, CSS and a tiny smidge of javascript. I want to be able to make a page that gets the users facebook and checks to see if they have liked my Facebook page (https://www.facebook.com/MrDarrenGriffin). If they have, a redirect will direct them to a page. However, If not, it will tell them that to go to the downloads page, they have to like the page. The liking method could be with the embedded like button in the code. After they have liked the page it will go through the check again and if they have successfully liked my page, it will redirect them to the downloads section (or a specified page).
Thanks in advance :D
You can use this code because it's so simple :
FB.api({
method: "pages.isFan",
page_id: page_id,
}, function(response) {
console.log(response);
if(response){
alert('You Likey');
} else {
alert('You not Likey :(');
}
}
);
this ll user user_likes permission
Hope this will help you
Here are the steps to do so:
1) You need to use this step by step guide to connect user to your facebook page in order to fetch user basic information
https://developers.facebook.com/docs/facebook-login/getting-started-web/
FB.api('/me', function(response) {
console.log('Good to see you, ' + response.name + '.');
}
2) After knowing that user is connected using facebook you need to issue the graph GET request to find out about this user that he liked your page or not
FB.api('/me/likes/YOUR_APP_ID', function(response) {
console.log(response.data);
}
3) And then run your business logic (whether to take user to download page or other page)
Code from the tutorial above is given below too
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'YOUR_APP_ID', // App ID
channelUrl : '//www.example.com/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.Event.subscribe('auth.authResponseChange', function(response) {
if (response.status === 'connected') {
testAPI();
} else if (response.status === 'not_authorized') {
$("#btnFB").show();
FB.login();
} else {
$("#btnFB").show();
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));
function testAPI() {
FB.api('/me', function(response) {
console.log('Good to see you, ' + response.name + '.');
});
FB.api('/me/likes/PAGE_ID', function(response) {
console.log(response.data);
});
}
How to get PAGE_ID?
Goto http://developers.facebook.com/tools/explorer/?method=GET&path=me%2Flikes%2F
This worked for me! :)
Related
I am doing facebook login. The login dialog pops up but does not show permissions.
My current dialog is like this.
no permission dialog
But i want it like this.
permission dialog
My code is below.
<script>
function statusChangeCallback(response) {
console.log('statusChangeCallback');
console.log(response);
// var response=JSON.stringify(response);
// alert('statusChangeCallback'+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 {
// The person is not logged into your app or we are unable to tell.
document.getElementById('status').innerHTML = 'Please log ' +
'into this app.';
}
}
// 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 : '1538657022815637',
cookie : true, // enable cookies to allow the server to access
// the session
xfbml : true, // parse social plugins on this page
version : 'v2.9' // use graph api version 2.8
});
// 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);
});
};
(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#xfbml=1&version=v2.8&appId=1538657022815637";
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) {
// alert(JSON.stringify(response));
console.log('Successful login for: ' + response.name);
document.getElementById('status').innerHTML =
'Thanks for logging in, ' + response.name + '!';
});
}
</script>
I tested two different login buttons as shown below.
<fb:login-button scope="public_profile,email" onlogin="checkLoginState();">
</fb:login-button>
<div class="fb-login-button" data-perms="email,user_checkins" data-scope="public_profile,email" data-max-rows="1" data-size="large" data-button-type="login_with" data-show-faces="false" data-auto-logout-link="true" data-use-continue-as="true"></div>
I create a app that use login on Facebook, but I can not capture the user's email address, I know I need to use scope, but do not know how. How can I do this?
This is my code:
window.fbAsyncInit = function() {
FB.init({
appId : '<?= $this->getAppId(); ?>', // App ID
channelUrl : '//WWW.YOUR_DOMAIN.COM/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
oauth : true
});
FB.Event.subscribe('auth.authResponseChange', function(response) {
// Here we specify what we do with the response anytime this event occurs.
if (response.status === 'connected') {
testAPI();
} else if (response.status === 'not_authorized') {
FB.login()
} else {
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 + '.');
console.log( response.email);
});
}
You pass in any additional permissions you want as an argument (comma-separated for multiple permissions) to FB.login(). IN your case, you want email:
FB.login(function(response) {
// handle the response
}, {scope: 'email'});
The FB JS SDK Documentation very clearly explains this. Please take the time to read it.
I resolved the problem, when use FB.Event.subscribe, we need put the permissions in html and not in FB.login() function, using this way:
fb:login-button show-faces="true" perms="email,user_birthday" width="200" max-rows="1
Thanks
I am trying to incorporate the facebook login button into my website's homepage. I have connected it with an app, so i have the app id and secret, if the user is already registered.
I have used the JavaScript SDK from facebook but when I press the facebook's login button, after the authorization, nothing happens and my website's homepage is shown again. Does anyone know how to get the user's email from the Javascript SDK? I want to redirect to another page after login, but after login it stays on that page only.
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function()
{
FB.init({
appId : '178124332351909', // App ID
channelUrl : '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.Event.subscribe('auth.authResponseChange', function(response)
{
if (response.status === 'connected')
{
alert("connected");
testAPI();
}
else if (response.status === 'not_authorized')
{
alert("nt connected");
FB.login();
}
else
{
alert("else");
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()
{
alert("in testapi");
console.log('Welcome! Fetching your information.... ');
FB.api('/me', function(response)
{
console.log('Good to see you, ' + response.name + '.');
});
}
</script>
Reference : Add the login code
Please help how to redirect to another page.
For asking the permission for email, replace Fb.login()with:
FB.login(function(response)
{
if(response.status == 'connected'){
alert('I am connected')
}
},{scope: 'email'});
For redirecting the user to other page after successful login, simply write the redirection code in the testAPI() function:
function testAPI()
{
alert("in testapi");
console.log('Welcome! Fetching your information.... ');
FB.api('/me', function(response)
{
console.log('Good to see you, ' + response.name + '.');
});
window.location="http://www.newlocation.com"; // HERE
}
There could be 1 reason:
when you click on the login button>> it tries to open the pop- up window>> if "allow pop up is blocked">> then it will just refresh the page, and user will think that nothing is happening.
If you want to get users email then you can pass it as a "perms" parameter something like this.
<div class="fb-login-button" onclick="fbLoginClick();" perms="email"><div>
I'm having a hard time getting the Facebook JS API to work as described in http://developers.facebook.com/docs/reference/javascript/
Specifically, the user seems to get asked to log in even if they are already logged in to Facebook. For this I'm doing the following:
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '3120012412', // App ID goes here
channelURL : '//WWW.qy.ORG/channel.php', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
oauth : true, // enable OAuth 2.0
xfbml : true // parse XFBML
});
// Additional initialization code here
FB.login(function(response) {
if (response.authResponse) {
alert('Welcome! Fetching your information.... ');
FB.api('/me', function(response) {
alert('Good to see you, ' + response.name + '.');
alert('response' + response);
FB.logout(function(response) {
alert('Logged out.');
});
});
} else {
alert('User cancelled login or did not fully authorize.');
}
}, {scope: 'email'});
};
// Load the SDK Asynchronously
(function(d){
var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));
</script>
I also tried:
FB.getLoginStatus(function(response) {
if (response.authResponse) {
// logged in and connected user, someone you know
} else {
// no user session available, someone you dont know
}
});
This also fails even when I'm already logged in to Facebook.
What should I do if I want the user to go through the minimum hassle, for just basic access to public information? I understand they have to authorize the basic access, but it shouldn't ask them repeatedly should it?
Your first code chunk is logging the user in, then immediately logging them out again - so you probably aren't logged in if you have been running this a few times. Remove the FB.logout block and try it again to see if it makes a difference.
Another thing to remember (and probably the reason your second example isnt working) is although you are logged into facebook.com, you have to be logged in to your own domain via FB.login. getLoginStatus will check for your fbsr_ cookie and consider you logged in if it is there, but you must already have the cookie, from calling FB.login first.
So I suggest using this:
// Additional initialization code here
FB.login(function(response) {
if (response.authResponse) {
alert('Welcome! Fetching your information.... ');
FB.api('/me', function(response) {
alert('Good to see you, ' + response.name + '.');
alert('response' + response);
});
} else {
alert('User cancelled login or did not fully authorize.');
}
}, {scope: 'email'});
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'MY_APP_ID',
status : true,
cookie : true,
xfbml : true
});
FB.Event.subscribe('auth.login', function(response) {
$.ajax({
url: "http://example.com/fbconnect",
success: function(){
window.location.reload();
}
});
});
};
(function(d){
var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));
</script>
<div class="fb-login-button" data-perms="email,user_birthday,user_hometown,user_location">Login with Facebook</div>
It's working with only two cases.
1- when a user is NOT logged in and log in to facebook it triggers.
2- when a user is logged in but didn't authorize the app yet it triggers.
the third scenario which is not working is when a user is logged in and He is already authorized the app the FB.Event.subscribe('auth.login) won't trigger !!!
I encountered the same thing as you and I found a function, "getLoginStatus", that might be of interest for you.
When the user is already logged in and has granted your app all the permissions, then there is no need to log in again and therefore the event won't be triggered.
However, if the response of the "getLoginStatus" is "connected" you can do the stuff you want to do when the user is already logged in and has granted your app all the permissions.
The complete script might look something like this:
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'APPID', // App ID
channelUrl : 'CHANNEL_URL', // 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) {
if (response.status === 'connected') {
// the user is logged in and connected to 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;
FB.api('/me', function(response) {
if (response.name != undefined ) {
console.log("Welcome, " + response.name);
}
});
} else if (response.status === 'not_authorized') {
// the user is logged in to Facebook,
// but not connected to the app
} else {
// the user isn't even logged in to Facebook.
}
});
// Additional initialization code here
};
// Load the SDK Asynchronously
(function(d){
var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));
</script>
Got the exact same issue here and it's driving me nuts. Not liking the Facebook Javascript SDK atm.
It's really complex with the status check in FB.init() and makes it even harder when you put facebook comments on the page...
A workaround I just tested is to have your own login button and use the FB.login() method, there you can hook in to the callback (this replaces your code for the auth.login event).
window.fbAsyncInit = function () {
FB.init({
...
});
$('#fb-login-button-custom').show().click(function () {
var scopeList = $(this).data('scope');
FB.login(function (response) {
alert('FB.login callback');
console.log(response);
document.location.href = document.location.pathname + '?fblogin=1';
}, { scope: scopeList });
});
});
That default login event is actually only triggered when the user authorizes your application. So when loging out the user, you could revoke the authorization. But then every time they log in they have to 'allow' the app.
Using FB.Event.subscribe('auth.statusChange', handleStatusChange); will notify you status changes..
hope it helps