Log in | Register
  1. Forum
  3. Discontinued Products
  5. JFBConnect Joomla 1.5 Support (CLOSED)
  7. JFBConnect 3.2.2 System Plugin causing pages to not render properly
× Joomla Facebook Connect support forum

Topic-icon JFBConnect 3.2.2 System Plugin causing pages to not render properly

Active Subscriptions:

None
14 years 11 months ago #11411 by Ivan
I added the code below to load javascript asynchronously and got my pages to render properly, however the javascript function on the login module
does not want to fire off. How can i instanciate the javascript in the login module so that it works? How do i instanciate the jfbc.login.login_button_click();
asynchronously?
{function() {
     window.fbAsyncInit = function()
     {
     FB.init({appId: '{$AppId}', status: true, cookie: true, xfbml: true,channelUrl: '{$channelurl}'});{$subs}
     //FB.Canvas.setAutoResize();

     }; 
    
     function async_load(){
     var s = document.createElement('script');
     s.type = 'text/javascript';
     s.async = true;
     s.src = document.location.protocol + '//connect.facebook.net/{$locale}/all.js';
     //s.src =  'https://connect.facebook.net/en_US/all.js';
     document.getElementById('fb-root').appendChild(s);
     }
     if (window.attachEvent)
        window.attachEvent('onload', async_load);
     else
        window.addEventListener('load', async_load, false);
     })();
The topic has been locked.
Support Specialist
14 years 11 months ago #11416 by alzander
Ivan,
I'm not exactly sure what you're trying for in the above. The Facebook library already loads asynchronously by default. The code we use in JFBConnect looks like:
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/en_GB/all.js';
document.getElementById('fb-root').appendChild(e);
}());

In there, we're creating a new src element, specifying that it's an asynchronous load of Javascript, and then inserting that into the page. This is Facebook's recommended way of loading their library asynchronously. You seem to be delaying the asynchronous load until after the page has fully loaded, which defeats the purpose of an asynchronous load anyway (which is to prevent blocking of the page load by the Javascript initialization).

Hope that makes sense, but if you can clarify what you're trying to accomplish with that, it would help.

If it's that you're simply trying to make the Canvas.setSize function wait appropriately, you may want to try the following snippet:
FB.init({appId: '{$AppId}', status: true, cookie: true, xfbml: true,channelUrl: '{$channelurl}'});{$subs} 
window.setTimeout(function() { FB.Canvas.setAutoResize(); }, 250);

That will set up a timeout for the resize, but you may need to adjust the 250 (in ms) longer or shorter depending on your configuration. We're adding Canvas/Page Tab support to our next 4.0 release in July, and the above code is what we're using.

Hope this helps,
Alex
The topic has been locked.
Support Specialist
14 years 11 months ago #11418 by alzander
Sorry for the problem post earlier. We installed sh404 today, and even after lengthy debugging and testing before installation, there were still issues.

Thanks,
Alex
The topic has been locked.
Support Specialist
14 years 11 months ago #11419 by alzander
Also, looking at that code.. I think I realize the full problem now.. basically.. the top code calling FB.Init is not tied to the loading of the all.ja Facebook library. So, it's likely getting called before the library is loaded, which will prevent the initialization from occuring. If this is the case, in your Javascript error console, you'll likely see a message like "FB.Login() called before FB.Init()".

Again, hope that helps,
Alex
The topic has been locked.
Active Subscriptions:

None
14 years 11 months ago #11425 by Ivan
Okay,

Let me try to clarify. The code i pasted at the top is part of the code that i was using in 3.0.2 to load javascript asynchronously and was needed for a component to work properly with ajax. However with the javascript code thats in the system plugin in 3.2.2 it seems to be preventing other javascript functions to execute and thus conflicting with some of my other components. It would sometimes work and sometimes it would not, both in IE8 and IE9.

With the code i posted above I managed to get the pages to work properly and render proplerly however the code i posted above is missing a part:

This is the entire code i have in 3.0.2 :
    (function() {
     window.fbAsyncInit = function()
     {
     FB.init({appId: '{$this->facebookAppId}', status: true, cookie: true, xfbml: true});
     //FB.Canvas.setAutoResize();
     FB.Canvas.setSize();
     }; 
    
     function async_load(){
     var s = document.createElement('script');
     s.type = 'text/javascript';
     s.async = true;
     s.src = document.location.protocol + '//connect.facebook.net/{$locale}/all.js';
     //s.src =  'https://connect.facebook.net/en_US/all.js';
     document.getElementById('fb-root').appendChild(s);    
     }
     if (window.attachEvent)
        window.attachEvent('onload', async_load);
     else
        window.addEventListener('load', async_load, false);
     })();

     function fb_login_button_click()\n
     {
     if (FB.getSession())
     {
      self.location = "{$optionPermsUrl}";
     }
     }
     function fb_logout_button_click()\n
                    {
                        {$logoutCall}
                    }

                    function redirect_to_jfbconnect_logout()
                    {
                        self.location = '{$logoutLink}';
                    }

What youll notice is that this code contains the fucntions for the login button and to log out, which the code i posted at the top doesnt have, thus when i use it the :

jfbc.login.login_button_click(); doesnt seem to get instanciated since it is being loaded in this way.

It seems i need to load the button functions in the same system plugin for it to work.
The topic has been locked.
Active Subscriptions:

None
14 years 11 months ago #11426 by Ivan
"FB.Login() called before FB.Init()".



Yes this is what I am seeing in my javascript error console.

How can i make this work?
The topic has been locked.
Support Specialist
14 years 11 months ago #11427 by alzander
The problem is being caused because you're asynchronously loading the Facebook Javascript library (all.js) while the window.fbAsync code is being called inline. So, the FB.Init code is likely occurring before the Facebook library is even loaded.. which is then causing a problem when the login button is clicked which calls FB.login. Since FB.Init hasn't been called properly, first, it's not working.

You'll need to restructure the ordering of your loading. I don't remember the AJAX issue you were having before, so I don't recall why the current loading of code in 3.2 is causing problems. What error were you seeing with 3.2 concerning AJAX? I'm sure we can get you past the problems, but just don't recall the problem.

Thanks,
Alex
The topic has been locked.
Active Subscriptions:

None
14 years 11 months ago #11428 by Ivan
Im not sure but with this new version 3.2.2 my component does seem to work . Without me having to apply any fixes

I followed these other 2 posts to have it work with 3.0.2


I followed through whats at the bottom of this forum post you did: www.sourcecoast.com/forums/topic?id=1366&p=1

and you had helped out on this post : www.sourcecoast.com/forums/topic?id=1450&p=1#p5957
The topic has been locked.
Active Subscriptions:

None
14 years 11 months ago #11431 by Ivan
Do you know how I can restructure the order of the loading?
The topic has been locked.
Support Specialist
14 years 11 months ago #11455 by alzander
Ivan,
I'm a little confused. Above, you say:

Im not sure but with this new version 3.2.2 my component does seem to work . Without me having to apply any fixes

Is it working with 3.2.2? After your issues and a few others with AJAX problems in the 3.0 version, we did update the inclusion of the Facebook library to prevent the same problems from occuring in the future. It's likely you won't need to make any changes, or at least not the original ones you posted back in January.

I'd highly recommend trying to use 3.2.2 as best you can, and modify it starting with that version instead of trying to use modifications from the 3.0 release.

If it's still not working, just let us know what's happening and what modifications you've tried to the 3.2.2 code.

Thanks,
Alex
The topic has been locked.
  1. Forum
  3. Discontinued Products
  5. JFBConnect Joomla 1.5 Support (CLOSED)
  7. JFBConnect 3.2.2 System Plugin causing pages to not render properly
From the Blog
Facebook | Twitter | LinkedIn | Blog RSS