How to get page events from Facebook? - facebook

I'm using this code, but it returns empty data array. My access_token has all permissions. I know PAGE_ID, now i need to get events from this page.Thanks
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : APP_ID, // App ID
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
// Additional initialization code here
};
// 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));
var interval = setInterval(function() {
if (typeof FB != 'undefined') {
clearInterval(interval);
FB.api('/' + PAGE_ID +'/events?access_token=' + ACCESS_TOKEN, function(response) {
//do something with response
});
}
}, 20);
</script>

It's not clear from your code how you are obtaining the access_token - are you using the access token for the page\account for which you need to retrieve the events? The way I have been doing it (not sure where I picked up this technique) for page events is to loop through the user accounts to get the access token for the page in question. Something like this (php)
$accounts = $facebook->api('/me/accounts');
foreach($accounts['data'] as $account){
if($account['id'] == $page_id){
$page_access_token = $account['access_token'];
}
}

My first access_token for my APP which i get from http://developers.facebook.com/tools/explorer/ was wrong. (Maybe it's only for test mode) Because i couldn't get events by this access_token.
On http://developers.facebook.com/docs/authentication/applications/ was written:
App Access Tokens generally do not expire. Once generated, they are valid indefinitely.
To obtain an App Access Token, perform an HTTP GET on:
https://graph.facebook.com/oauth/access_token?client_id=YOUR_APP_ID&client_secret=YOUR_APP_SECRET&grant_type=client_credentials
I got access_token using HTTP GET, by this access_token i get events from facebook page: https://graph.facebook.com/PAGE_ID/events

Related

Problems handling response.status in auth.authResponseChange event

I want to create a login system that can also use FB's login. So I've setup the FB object and SDK in my page and then subscribed to the auth.authResponseChange event and added an anonymous function to do stuff if I'm logged, not logged or not authorized.
When I'm logged it works properly. When I'm not logged or not authorized, it does nothing. I think it just doesn't enter into the anonymous function either, because I've put a console.log() before the if and it does nothing.
Here's my code:
// Facebook stuff
window.fbAsyncInit = function()
{
FB.init({
appId : 'my id blabla', // App ID
channelUrl : 'my channel.html bla bla', // 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)
{
console.log("Running function");
if(response.status === "connected")
{
console.log("Connected and authorized");
}
else if (response.status === 'not_authorized')
{
console.log("Not authorized");
}
else
{
console.log("Not connected");
}
});
};
// 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));
I have the same problem, but for what it's worth if you subscribe to the event 'auth.statusChange' instead of 'authResponseChange' you can know if he is 'connected' to facebook and authorized your app or if he's connected to fb but not authorized.
Also if you use the FB.getLoginStatus, which facebook advise not to, you can know in what of the three states (connected, not_autorized or not_connected) the user is in.

how to access uid + accesstoken outside of FB.Event.subscribe?

Im sucessfully run FB.Event.subscribe and can output the uid and accesstoken from within that function - however im wondering how i'd go about accessing uid and accesstoken from basically anywhere?
My initial thought was that I needed to declare a global uid and accesstoken var outside of the function - however i've had no luck with that so far - when trying to output the global var I just get undefined
My code just after the starting <body> tag:
<body>
<div id="fb-root"></div>
<script>
//Declaring global var for uid and token
var uid;
var accessToken;
$(document).ready(function(){
function facebookReady(){
FB.init({
appId : '357646666347166', // App ID
channelUrl : '//localhost/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
});
$(document).trigger("facebook:ready");
}
if(window.FB) {
facebookReady();
} else {
window.fbAsyncInit = facebookReady;
}
});
// 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));
</script>
My code placed just before the closing </body> tag' - this is also where I try to access the global uid and token:
<script>
$(document).on("facebook:ready", null, function(){
FB.Event.subscribe('auth.authResponseChange', function(response) {
// Here we specify what we do with the response anytime this event occurs.
if (response.status === 'connected') {
// Setting the uid + token
uid = response.authResponse.userID;
accessToken = response.authResponse.accessToken;
//
}
});
// Trying to access the UID OR TOKEN HERE:
console.log(uid);
console.log(accessToken);
// Trying to access the UID OR TOKEN HERE:
});
</script>
<!-- some included js file where I also want to access the UID -->
<script src="js/animation.js"></script>
I use to just store my accessToken in a global variable and it worked w/o problems. The problem here is that both uid and accessToken only have scope within their respective script tags so the uid and accessToken declared within FB.Event.subscribe are their own values; separate from your "global variables" and who's scope is limited to FB.Event.subscribe.
That being said all you need is to use is FB.getAccessToken()
Example with using jQuery to retrieve data through an ajax request:
$.ajax({
url: "myQuery.php",
data: { accessToken: FB.getAccessToken() }
}).done(function(data) {
doStuff(data);
});
You can also retrieve the uid through FB.getUserID()

Getting facebook's JSON?

I need a little help with getting some JSON out of facebook, basically all I need to do is get the status text and post it to a website.
I'm using the method below, but the access_tokens with this method expires every hour.
$.getJSON('https://graph.facebook.com/SOME_ID?fields=statuses.limit(10).fields(message)&access_token=SOME_ACCESS_TOKEN', function(data) {});
Note that i got the URL above from facebook graph API explorer.
any other way to achieve what I am trying to do?
update:
I used FB.api, but i'm not sure if I've done it correctly as it is sending me this error
"An access token is required to request this resource."
window.fbAsyncInit = function() {
FB.init({
appId : 'My_app_id', // App ID
channelUrl : '//myHost.com/facebook/channel.php', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
FB.api('USER_ID?fields=statuses.fields(message)', function(response) {
console.log(response);
});
// Additional initialization code here
};
// 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));
Note that i replaced (my_app_id, myHost.com and USER_ID) with the right values.
thanks in advance.
Assuming you have the Javascript SDK implemented i would suggest using the FB.api method.
https://developers.facebook.com/docs/reference/javascript/FB.api/
The user needs to be logged in to Facebook and allow your app before you can call the API, update your code to this:
window.fbAsyncInit = function() {
FB.init({
appId : 'My_app_id', // App ID
channelUrl : '//myHost.com/facebook/channel.php', // 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') {
FB.api('USER_ID?fields=statuses.fields(message)', function(response) {
console.log(response);
});
}
});
};
More information on the getLoginStatus status: http://developers.facebook.com/docs/reference/javascript/FB.getLoginStatus/
You will also need to also need to ask the permission user_status see the doc for more details: https://developers.facebook.com/docs/authentication/permissions/
You should ask for permissions when calling FB.login:
FB.login(function(response) {
// handle the response
}, {scope: 'user_status'});
https://developers.facebook.com/docs/reference/javascript/FB.login/

Facebook Login link auto refresh to facebook user profile link and picture

I am trying to make a WordPress submit form using Gravity Forms where the visitors see a "Login with Facebook" button.
Once the visitor logs in and grants the permission, the section then refreshes to show the Facebook user profile link and picture, letting the visitor know that they are submitting with the Facebook profile.
I have already copied the codes but I need some help to complete it.
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'XXXXXXXXXXXXXXXXX', // App ID
channelUrl : '//www.MY-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
});
// 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>
<script>
FB.api('/me', function(user) {
if (user) {
var image = document.getElementById('image');
image.src = 'http://graph.facebook.com/' + user.id + '/picture';
var name = document.getElementById('name');
name.innerHTML = user.name
}
});
</script>
Now, what do I put to get the section where I can show a "login button" and then show the user profile link after someone logs in?
For log-in you may use one of:
FB.login method of JavaScript SDK
Login Button (which have HTML5/XFBML/Iframe version)
Your call the to API is too premature in the page load. First it need to be done after facebook scripts are ready to be run. You can put the code into the fbAsyncInit() function. Secondly, you should follow this paradigm to ensure the user is logged into your app, see: https://developers.facebook.com/docs/reference/javascript/FB.getLoginStatus/

FB.Event.subscribe('auth.login') won't trigger everytime ?

<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