Menu
This is going to be as beginner a question with getting started as you're like to encounter.
I've done previous programming with Facebook but not directly as web programming - so, I know my way around the Graph API and how things work in general, but I don't have any experience doing web programming and I'm a little lost on how to get from Facebook's documentation to having a working web page that lets me log in (the goal is to just have as plain of HTML/JavaScript as possible, but allowing uploading of images and posting links and such on walls using the publish_stream permission).
Here's the code I have so far from going through what Facebook has told me to do (and the small amount I added on from having seen a small amount of HTML before now):
<!DOCTYPE html>
<html>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<head>
The title of the document (test text)
</head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
// init the Facebook JavaScript SDK
FB.init({
appId : 'EDITED OUT FOR PRIVACY BUT IS VALID IN MY CODE',
channelUrl : null,
status : true,
cookie : false,
xfbml : false
});
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
// connected
} else if (response.status === 'not_authorized') {
// not authorized
login();
} else {
// not_logged_in
login();
}
});
};
function login() {
FB.login(function(response) {
if (response.authResponse) {
// connected
testAPI();
} else {
// cancelled
}
});
}
function testAPI() {
console.log('Welcome! Fetching your information... ');
FB.api('/me', function(response) {
console.log('Good to see you, ' + response.name + '.');
});
}
(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>
</body>
</html>
When I save this as a .html file and drop it into Firefox, nothing is displayed (unless I type in some hello world text before </body>). I've looked into JavaScript / HTML tutorials on how to get things running, but to no avail.
I know that it says in the Prerequisites section of a previous link (I'd link it again but I'm too new here and stackoverflow won't let me) that "You'll need somewhere that let's you host HTML files online." It also references Heroku, but any resource I can find on that takes me to app-hosting, and I don't get why (this is just to test this functionality) I would need to host it online in the first place instead of just dropping it into my browser (or call ShellExecute from C/C++ to get it to run).
[EDIT:] Thanks for all your help so far everyone, I just wish I hadn't taken up time with typos so far instead of allowing all you helpful people to get to the root of the problem.
809
The reason the page is blank is because, no display HTML was intended to be shown. The point of the example was to demonstrate the login and API calls.
If you logged in already, then you will not see anything as indicated at
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
// connected
// <----- no calls
} else if (response.status === 'not_authorized') {
// not authorized
login();
} else {
// not_logged_in
login();
}
});
};
So if you want to know if it is working when you have logged in already, try placing testAPI() here
if (response.status === 'connected') {
// connected
testAPI(); // <---------------
} else if (response.status === 'not_authorized') {
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
