2 facebook连接同一页面中的按钮

Question

在我的网站上，我有2个facebook连接按钮，其中包含以下代码;

<div id="fb-root"></div>
            {literal}
            <script>             

              window.fbAsyncInit = function() {
                FB.init({
                  appId: {/literal}{$fb_app_id}{literal},
                  cookie: true,
                  xfbml:  true,
                  oauth:  true
                });                            

                FB.Event.subscribe('auth.login', function(resp) {
                    window.location.reload();
                });    

               };
               (function() {
                var e = document.createElement('script'); e.async = false;
                e.src = document.location.protocol +
                  '//connect.facebook.net/en_US/all.js';
                document.getElementById('fb-root').appendChild(e);
               }());
            </script>
            {/literal}

            <a class="facebook-connect" href="#" onclick="fb_login();return false;">facebook connect</a>    

            {literal}
            <script>
            function fb_login(){                                                      
              FB.login( function( response) {
                    if( response.authResponse){
                         // dont do anything, it will reload the page
                         window.location.reload();
                    }
                    else // user cancelled facebook connect
                    {
                        return false;
                    }
                }, {scope : 'email, user_about_me, user_birthday, user_location, friends_about_me, publish_actions, offline_access '});   

        }

之后，我有一个相同的facebook连接按钮但是确实没有类;

<a class="facebook" href="" >facebook connect</a>

但是，在第二节课中，我不想让FB.init加载js-sdk async。所以，我使用了这段代码;

$('.facebook').click( function(){

        $('.facebook-connect').click();
});

但是，点击.facebook按钮后会出现对话框，Facebook会询问登录凭据（电子邮件/密码）。之后，对话框变为空白。有什么想法吗？