Facebook open graph - login button not displaying everytime

Question

I recently upgraded to open graph and implemented some of the facebook social plugins on my website like fb:friendpile fb:like-box etc

Ever since I implemented these new features, I'm seeing some random behavior with these plugins.

Like on my home page, when you type in the URL and go for the first time, none of the facebook social plugins are rendered - no login button, no friendpile no like - nothing.

But when you hit CTRL F5 - they appear. First I thought it probably has somethin to do with my machine but yesterday two of my users reported the same issue.

I googled around and it seems to have something to do with where you place your connect code. Right now, I have this relevant portion of the script placed in my head tag - I even tried placing it right before the end of body tag - but it made no difference.

<script type="text/javascript">
    window.fbAsyncInit = function() {
       FB.init({appId: '<?php echo Zend_Registry::getInstance()->configuration->facebook->appid;?>', status: true, cookie: true, xfbml: true});

                /* All the events registered */
                FB.Event.subscribe('auth.login', function(response) {
                    // do something with response
                    login();
                });
                FB.Event.subscribe('auth.logout', function(response) {
                    // do something with response
                    logout();
                });
            };
            (function() {
                var e = document.createElement('script');
                e.type = 'text/javascript';
                e.src = document.location.protocol +
                    '//connect.facebook.net/en_US/all.js';
                e.async = true;
                document.getElementById('fb-root').appendChild(e);
            }());

            function login(){        
                document.location.href = "<?php echo $this->baseUrl(); ?>/login/log";
            }
            function logout(){
                FB.init({appId: '<?php echo Zend_Registry::getInstance()->configuration->facebook->appid;?>'});               
                FB.logout(function(response) {
                      // user is now logged out
                    }); 
                document.location.href = "<?php echo $this->baseUrl(); ?>/login/logout";
                return false;
            }
</script>

Any insights in trouble shooting this will be appreciated Thanks

Where is your FB.init()? Can you post your full init script? — serg
Thanks - I have updated the question to show the full init script — Gublooo
And you have <div id="fb-root"></div> above this, right? Fb init code you provided should be put right below open <body> tag. Also do you include xmlns:fb namespace in <html> tag? — serg
Yes - after the body tag - I immediately have the <div id="fb-root"></div> followed by code shown above. — Gublooo
Everything looks fine... Have you tried looking in firebug what is going on with those fbml tags on the page - do they remain as fbml or getting rendered into something that is hidden? — serg

daaku daaku · Accepted Answer · 2010-07-12T00:19:27

Your logout logic seems problematic (you call FB.logout() in logout() -- but also call logout() on the 'auth.logout' event, which seems circular). You should also remove the FB.init() call inside your logout() function. The lack of xmlns:fb on the <html> tag is often the cause of XFBML not rendering in IE, so I'd double check that. You could also try replacing the async loading with sync loading using a normal script tag like:

<script src="http://connect.facebook.net/en_US/all.js"></script>

But a live repro case would be more helpful since your code looks fine for the most part.

EDIT: You can also checkout http://fbrell.com/xfbml/fb:login-button for examples.

Facebook open graph - login button not displaying everytime

1 Answers