CODEWITHSUNDEEP
javascriptasp.nethtmlfacebook
user736893
user736893

Reputation:

external link containing facebook connect functions?

I'm just starting to play with the facebook API. I have a basic "Hell World" application that just shows the logged in username. It works great when I have the FB.init() function inline (shows the "Login using facebook" button and works). However, I tried creating a JS file called "Facebook.js" and putting the init() in there and now I just see plain text that says "Login using facebook" and obviously, it doesn't work.

Is it possible to do this? Am I missing something stupid? (probably YES to both)

[------------- index.aspx -----------------------------------------------------------]

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Scott's test application</title>
    <script src="JS/jquery-1.6.4.min.js" type="text/javascript"></script>
    <script src="http://connect.facebook.net/en_US/all.js" type="text/javascript"></script>
    <script src="JS/facebook.js" type="text/javascript"></script>
</head>
<body>
    <div id="fb-root"></div>
    <div>Welcome <span id="guest" class="UserNameWelcome">Guest</span><span id="name" class="UserNameWelcome"></span>!</div>
    <div><img src="" alt="Avatar" id="image"/></div>
    <fb:login-button>Login with Facebook</fb:login-button>
</body>
</html>

[------------- facebook.js -----------------------------------------------------------]

FB.init({
    appId: 'myappid', cookie: true,
    status: true, xfbml: true
});
FB.api('/me', function (user) {
    if (user != null) {
        var image = document.getElementById('image');
        image.src = 'https://graph.facebook.com/' + user.id + '/picture';
        var name = document.getElementById('name');
        name.innerHTML = user.name
    } else {
        $('#image').hide();
        $('#name').hide();
    }
});

Upvotes: 0

Views: 1272

Answers (3)

Floyd Wilburn
Floyd Wilburn

Reputation: 1842

You don't have to have everything in the body, but you do have to ensure that all.js is fully loaded before you call any FB functions. Inside facebook.js, you could wrap the FB.init and FB.api calls inside a function called something like start_fb(), and then call start_fb either from within window.onload or window.fbAsyncInit event handler. fbAsyncInit is automatically triggered when all.js has finished loading, but window.onload is slightly safer since it also ensures that all the dom elements are in place like fb-root.

Upvotes: 1

user736893
user736893

Reputation:

Apparently everything has to be in the body (?) and in the correct order... The following HTML seems to do what I would expect.

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Scott's test application</title>
    <script src="JS/jquery-1.6.4.min.js" type="text/javascript"></script>
    <link href="CSS/site.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div id="fb-root"></div>
    <script src="http://connect.facebook.net/en_US/all.js" type="text/javascript"></script>
    <script src="JS/facebook.js" type="text/javascript"></script>
    <div>Welcome <span id="guest" class="UserNameWelcome">Guest</span><span id="name" class="UserNameWelcome"></span>!</div>
    <img src="" alt="Avatar" id="image"/>
    <fb:login-button>Login with Facebook</fb:login-button>
    <div id="version">v0.01</div>
</body>
</html>

Upvotes: 0

Juicy Scripter
Juicy Scripter

Reputation: 25918

You can use async loader of Facebook's JavaScript SDK Wrap content of your Facebook.js with window.fbAsyncInit function

window.fbAsyncInit = function() {
    // Your code goes 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));

Upvotes: 0

Related Questions