I'm trying to get user checkins from Facebook and put on Google Earth / Maps, I searched for examples, but found nothing (here and on google).
Right now my problem is to get the users' chekins (first I'll make all the facebook part separately and then will gather with google earth / maps), it seems that is not giving permissions to my application, even though I request all permissions (for testing purposes) and still not working.
Following is the code I'm using:
<!DOCTYPE html>
<html xmlns:fb="https://www.facebook.com/2008/fbml">
<head>
<title>New JavaScript SDK</title>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
window.fbAsyncInit = function() {
FB.init({
appId: 'appidhere',
status: true,
cookie: true,
xfbml: true,
oauth: true
});
function updateButton(response) {
var button = document.getElementById('fb-auth');
if (response.authResponse) {
//user is already logged in and connected
var userInfo = document.getElementById('user-info');
FB.api('/me', function(response) {
userInfo.innerHTML = '<img src="https://graph.facebook.com/' + response.id + '/picture">' + response.name;
button.innerHTML = 'Logout';
//checkin_id, author_uid, page_id, app_id, post_id, coords, timestamp, tagged_uids, message
var query = FB.Data.query('SELECT page_id, coords, tagged_uids, message FROM checkin WHERE author_uid= me()', response.id);
query.wait(function(rows) {
document.getElementById('user-checkins').innerHTML =
'Place: ' + rows[0].page_id + "<br />" +
'Latitude/Longetude: ' + rows[0].coords + "<br />" +
'Friends you been with: ' + rows[0].tagged_uids + "<br />" +
'Message: ' + rows[0].message + "<br />";
});
});
button.onclick = function() {
FB.logout(function(response) {
var userInfo = document.getElementById('user-info');
userInfo.innerHTML="";
});
};
} else {
//user is not connected to your app or logged out
button.innerHTML = 'Login';
button.onclick = function() {
FB.login(function(response) {
if (response.authResponse) {
FB.api('/me', function(response) {
var userInfo = document.getElementById('user-info');
userInfo.innerHTML = '<img src="https://graph.facebook.com/' + response.id + '/picture" style="margin-right:5px"/>' + response.name;
});
} else {
//user cancelled login or did not grant authorization
}
}, {
scope:'user_about_me, user_activities, user_birthday, user_checkins, user_education_history, user_events, user_groups, user_hometown, user_interests, user_likes, user_location, user_notes, user_photos, user_questions, user_relationships, user_relationship_details, user_religion_politics, user_status, user_subscriptions, user_videos, user_website, user_work_history, email, friends_about_me, friends_activities, friends_birthday, friends_checkins, friends_education_history, friends_events, friends_groups, friends_hometown, friends_interests, friends_likes, friends_location, friends_notes, friends_photos, friends_questions, friends_relationships, friends_relationship_details, friends_religion_politics, friends_status, friends_subscriptions, friends_videos, friends_website, friends_work_history, read_friendlists, read_insights, read_insights, read_mailbox, read_requests, read_stream, xmpp_login, ads_management, create_event, manage_friendlists, manage_notifications, user_online_presence, friends_online_presence, publish_checkins, publish_stream, rsvp_event, publish_actions, user_actions.music, user_actions.news, user_actions.video, user_games_activity, friends_actions.music, friends_actions.news, friends_actions.video, friends_games_activity'
});
}
}
}
// 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);
}());
});
</script>
</head>
<body>
<div id="fb-root"></div>
<h2>Updated JS SDK example</h2><br />
<div id="user-info"></div>
<div id="user-checkins"></div>
<p><button id="fb-auth">Login</button></p>
</body>
</html>
It shows the picture and name, but not the checkin information. The console shows:
Uncaught TypeError: Can not read property 'page_id' of undefined facebook2.html: 31
(anonymous function) facebook2.html: 31
t.__wrapper all.js: 49
(anonymous function) all.js: 127
d all.js: 83
(anonymous function) all.js: 83
w all.js: 18
FB.provide.fire all.js: 83
FB.Class.FB.copy.setProperty all.js: 105
FB.subclass.set all.js: 127
(anonymous function) all.js: 129
w all.js: 18
(anonymous function) all.js: 129
would all.js: 66
q all.js: 63
(anonymous function) all.js: 48
(anonymous function)
Other things,
Since there are several checkins, how I do to do a loop with them?
Within each checkin, coords is an array, how do I transform this array into latitude / longetude?
The page_id gives me an id (of course) I like to get the name of the place, how?
If someone can help me, thank you now.
OK!
I found This http://www.facebookmobileweb.com/hackbook/ that is helping me A LOT.
I found the error, I had to set the canvas url in "app on facebook", then the permission worked...