I’m running a facebook Connect site where I use Connect for authentication. I check if the user is connected through facebook on every page so that I can quickly authenticate them if they are registered.
I think that my current way of doing this may be bad, because the page “hiccups” whenever it loads in users from facebook connect. That is to say, page elements are visibly re-rendered, and the user’s facebook profile pic flashes a bit before loading in. I’m pretty sure there’s a better way because I’ve seen Facebook Connect Authentication without these “hiccups”. Here’s my working and very basic code:
<body onload="fbConnect();">
<!-- page contents -->
<script type="text/javascript">
function fbConnect()
{
FB.init([MYAPPKEY], "xd_receiver.htm",{"reloadIfSessionStateChanged":true});
}
</script>
</body>
</html>
I take advantage of that reload to authenticate the user on the site if they’re Facebook Connected. So is there a way to improve my method and eliminate the hiccups?
If your page content doesn’t heavily depend on whether or not user is logged in, i.e. you just want to show user profile in the corner, then there is no need to reload the page. You can notify the server about user login through ajax call and render user profile through javascript.
If logged user sees a pretty much different page from the guests then you can move facebook login to the server side altogether and check if user is logged in before displaying a page.
This would eliminate extra page reload. If you want to go one step further and minimize delay during checking whether or not user is logged in (it could take couple seconds on facebook side) then you cache user info in a session cookie once they logged in for the first time and read user info from there (either on server side or through js) instead of making requests to facebook on every page load.