Is there a way to detect if the Facebook Javascript SDK loaded successfully? -


I use Facebook as my website's membership system. It uses the code to generate login controls, so that users can login with their Facebook account. This is essentially a click, if they are already a member, 2 if they are not (to allow).

I have a problem though ... Feedback that the log buttons are not always suggesting correctly. Instead of loading Facebook Login Control, it is simply "Login through Facebook" (Text) - which is the login button that controls the control has loaded successfully.

The test shows what happens when the Facebook Javascript SDK fails to load completely (for whatever reason). I have seen examples, where the URL in the URL prevents the SDK from loading #.

To better support this issue, if I have javascript SDK loaded, what will be known about detection, and ready? In this way, if it fails, I can leave some kind of note for the user.

How it is currently added to this page:

  & lt; Script & gt; Window.fbAsyncInit = function () {FB.init ({appId: '*************', status: true, cookie: true, xfbml: true}); FB.Event.subscribe ('auth.login', function (feedback) {window.location.reload ();}); }; (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);} ()); & Lt; / Script & gt;    

You should load your code and remove all your FB related tasks from the window Should be put in .fbAsyncInit method:

  & lt; Div id = "fb-root" & gt; & Lt; / Div & gt; & Lt; Script & gt; Window.fbAsyncInit = function () {FB.init ({appId: 'YOUR_APP_ID', // app ID channel url: '//WWW.YOUR_DOMAIN.COM/channel.html', // channel file status: true, // Check Login Status Cookie: Enable cookies to allow access to // server session xfbml: true // parse XFBML}; // additional initialization code here;} // load asynchronous SDK (function (D ) {Var js, id = 'facebook-jssdk', ref = d.getElementsByTagName ('script') [0]; if (d.getElementById (id)) {return;} Js = d.createElement ('script') ; Js.id = id; js.async = true; js.src = "//connect.facebook.net/en_US/all.js"; ref.parentNode.insertBefore (js, referee);} (Document));    

This code loads SDK asynchronously, so it will not stop loading other elements of your page This is especially important for ensuring fast page load for users and SEO robots.

The URL protocols relative to the code above are provided by this browser (HTTP, or Page of HTPS) Lets load the SDK in the form which will stop "unsafe content" warnings.

window.fbAsyncInit SDK goes on loading. Any code that you want to run after the SDK should be loaded inside this function and after the call FB.init . For example, the user or your application is interested in.

A quick example is:

  & lt; Div id = "fb-root" & gt; & Lt; / Div & gt; & Lt; Script & gt; Var isloaded = false; Window.fbAsyncInit = function () {FB.init ({appId: 'YOUR_APP_ID', // app ID channel url: '//WWW.YOUR_DOMAIN.COM/channel.html', // channel file status: true, // Check Login Status Cookie: Enable cookies to allow access to the // server session xfbml: true // parse XFBML}; IsLoaded = true; // additional initialization code here;} function checkbackloaded () {if ( Loaded asynchronous (function (D) {var js, id = 'Facebook-jssdk', ref = d.getElementsByTagName ('script' ) [0]; if (d.getElementById (ID)) {return;} JS = D. Socket error ('script'); J.ID = ID; JSACNC = true; JSSRC = "//connect.facebook.net /en_US/all.js "; ref.parentNode.insertBefore (js, referee);} (document)); & lt; / scripts & gt; & lt; a href =" # "onclick =" checkphoded (); " & Gt; Check & lt; / a & gt;   

Image Details Here Please enter
( just clicked check link for some time )


Please note that you are still Login Link Server-Side B Can receive and not using JavaScript example:

  $ loginUrl = $ facebook- & gt; GetLoginUrl (); ... ... & lt; A href = "& lt ;? php echo $ loginUrl ;? & gt;" & Gt; & Lt; Img src = "http://static.ak.fbcdn.net/rsrc.php/zB6N8/hash/4li2k73z.gif" & gt; & Lt; / A & gt;    

Comments