Using the Facebook JavaScript SDK

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('Wele!  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/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.

This is going to be as beginner a question with getting started as you're like to encounter.

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('Wele!  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/en_US/all.js";
    ref.parentNode.insertBefore(js, ref);
}(document));
</script>
</body>
</html>

[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.

Share Improve this question edited Oct 24, 2012 at 23:40 asked Oct 24, 2012 at 18:15 counterfeitname 671 silver badge8 bronze badges

Is this the exact code you copied? It seems you're missing the closing brace } for the testAPI() function. – Adam Elsodaney Commented Oct 24, 2012 at 18:20
Thanks! Edited and fixed. But I still have the same problem. Blank page still. – counterfeitname Commented Oct 24, 2012 at 18:34
First of all, check your popup blocker settings – since you are calling FB.login (which used this way tries to open a popup) without any user interaction, it’s likely to get blocked by most browser’s default blocker configuration. FB.login opening a popup should under general circumstances only be used on explicit user interaction, f.e clicking on some button. Btw., that’s right on top of the docs page. – C3roe Commented Oct 24, 2012 at 18:48
I forgot to mention I had disabled the pop-up blocker for this (just to get some basic functionality to make sure the basics work). With the blocker disabled, I still get a blank page that does nothing (or doesn't seem to do anything). – counterfeitname Commented Oct 24, 2012 at 20:03
BTW, you don't close head, neither html tag. – Simon Boudrias Commented Oct 24, 2012 at 20:36

| Show 3 more ments

1 Answer 1

Sorted by: Reset to default 8

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') {

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

Using the Facebook JavaScript SDK - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)