views:

42

answers:

1

Hey Guys

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

A: 

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"&gt;&lt;/script&gt;

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.

daaku
Thanks daaku - based on the comments from serg and you , I did correct my logout logic and I did double check the xmlnb:fb in the html tag. I will try the sync loading but I made one other change and this problem has stopped occuring. I'm still not 100% sure if its because of that.I was using facebook ads and as part of beta testing facebook provided with the tracking code they asked to insert at the bottom of the page. I removed it 2 days back and the problem seems to have gone away. I'm goin to wait for another couple of days to see if I can reproduce that error.Thanks
Gublooo
Cool -- feel free to file an issue on Github or report the issue thru the ads feedback if you notice it again. A repro case is always helpful too :)
daaku

related questions