FBConnect: Why is it showing on some pages and not others?

In the开发者_如何转开发 top right hand corner, it shows on this page:

http://www.thegreekmerchant.com/product/fokofpolisiekar/band-logo

But not on this one

http://www.thegreekmerchant.com/

Any idea why? I'm using Drupal 6 with the FBConnect module.

In fact, the problem is that the pages use different scripts to load the FBConnect module.

On http://www.thegreekmerchant.com/:

<div id="fb-root"></div>
  <script type="text/javascript">
    window.fbAsyncInit = function() {
      FB.init({
        appId  : '146943825373452',
        status : true, // check login status
        cookie : true, // enable cookies to allow the server to access the session
        xfbml  : true,
        logging: '0'
      });

      jQuery(document).trigger('fb:init');
    };

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

On http://www.thegreekmerchant.com/product/fokofpolisiekar/band-logo there are two scripts, the previous one and the following one:

<div id="fb-root"></div><script type="text/javascript">
 window.fbAsyncInit = function() {
   FB.init({
     appId: "146943825373452",
     status: true, 
     cookie: true,
     xfbml: true
   });

   FB.Event.subscribe("edge.create", function(href, widget) {
      _gaq.push(["_trackEvent", "Facebook like", "Drupal", href]);
   });


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

I've replaced the first script with the second one and http://www.thegreekmerchant.com/ now works (of course not the sharp version, but on my sandbox server). You only need the second script on http://www.thegreekmerchant.com/product/fokofpolisiekar/band-logo.

On the working page you have this markup:

<div id="fbconnect_button-wrapper" class="form-item">
  <fb:login-button v="2" background="dark" onlogin="facebook_onlogin_ready();" size="small">
    <a class="fb_button fb_button_small">
      <span class="fb_button_text">Facebook Connect</span>
    </a>
  </fb:login-button>
  <div class="description">Sign in using Facebook</div>
</div>

Whereas on the nonworking you have this:

<div id="fbconnect_button-wrapper" class="form-item">
  <fb:login-button v="2" background="dark" onlogin="facebook_onlogin_ready();" size="small">
    Facebook Connect
  </fb:login-button>
  <div class="description">Sign in using Facebook</div>
</div>

I presume, that the JavaScript creating the markup does not run properly. Maybe you have another JavaScript error before the execution of the FB button script. Use Firebug or a similar tool to find that out.

Without more information it's difficult to help.

the buttons are both not working for me in chrome, while on firefox the first link is working and the second not...

the thing is that the home page on firefox is sending the cpu load to 100%, and I see you have loads of javascripts on the home. I would try disabling other javascripts and eventually running a check on the page source to see if there is any broken content.

You error is in :

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

The line :

e.src = document.location.protocol + '//connect.facebook.net//all.js';

should to be something like

e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';

If you watch the all.js file that your browser downloads you will see an error.

Thus the FB scripts are not loaded, and thus the inside of your window.fbAsyncInit = function() is never called ..