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

Question

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.

Yeta

Answer 1

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.

Jocose

@RD In fact, you don't need to change http://www.thegreekmerchant.com/product/fokofpolisiekar/band-logo, but, however, I strongly recommend it. This page has both of the FB scripts showed in my answer, and it is redundant (especially when seeing that the first script isn't working). When it comes to http://www.thegreekmerchant.com/, you should change the first code part from my answer to the second code part. – Jocose

Answer 2

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.

Mundt

Answer 3

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.

Chelyabinsk

Answer 4

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 ..

Nedranedrah

@RD This is because there are two scripts on the working page, see my answer. – Jocose

@RD Because on the working page, you have the "good" line : e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js'; and to see this line, just do "view source" on your webpage and search for "all.js" or "connect.facebook" – Nedranedrah