FB._https = true doesn't play well with FB.Canvas.setAutoResize?

Question

I am converting my facebook application to run HTTPS.

It looks like when I set the variable FB._https to true, FB.Canvas.setAutoResize() stops the iframe resizing.

This is what my code looks like:

  window.fbAsyncInit = function() { FB._https = true; // troublemaker FB.init({ appId: facebookAppId, status: true, cookie: true, session: facebookSession, xfbml: true }); // The parameter show how many milliseconds to wait between // resizing. // Apparently, 91 is Paul favorite number. // http://developers.facebook.com/docs/reference/javascript/FB.Canvas.setAutoResize/ FB.Canvas.setAutoResize(91); }; 

Any ideas?

Answer 1

If you set FB._https = true; and if you access the page via http, then you will have problems.

I suggest using FB._https = (window.location.protocol == "https:"); over Facebook JavaScript SDK via HTTPS by loading insecure items

Answer 2

• Delete the line with FB._https. you should not set this value. The JS SDK does this on its own when it is loaded. This is a hack in itself - an underscore in the title should suggest that the value is not for external modification.

• You must use the cross-domain link URL. Information on this is documented on the JavaScript SDK page. When you use the channel URL, do not specify a protocol such as "http:" or "https:". The channel URL must begin with "//", otherwise it must be manually created based on document.location.protocol.

• Make sure that you have correctly configured the "site URL" and "site domain" in the application settings. This is important for the various functions of the JS SDK.

Answer 3

I have the same problem. It looks like it depends on where I set up the script connection. Here is the code for getting SSL. You need to remove the connection script and go with the url channel.

 <!-- COMMENT OUT <script src="https://connect.facebook.net/en_US/all.js"></script>--> <script type="text/javascript" charset="utf-8"> FB._https = (window.location.protocol == "https:"); window.fbAsyncInit = function() { FB.init({ appId : 'xxxxxxxxxxxxx', // App ID channelUrl : '<?php echo bloginfo('url');?>/channel.html', // Channel File status : true, // check login status cookie : true, // enable cookies to allow the server to access the session oauth : true, // enable OAuth 2.0 xfbml : true // parse XFBML }); FB.Canvas.setAutoGrow(); } // Load the SDK Asynchronously (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, ref); }(document)); //FB.Canvas.setAutoGrow(); /*FB.Event.subscribe('edge.create', function(response){ top.location.href = ''; }*/ 

Here is the code to get ifame to resize but break ssl. Add the script connection back and remove channelUrl. In fact, you do not need to remove channelUrl for it to work.

 <script src="https://connect.facebook.net/en_US/all.js"></script> <script type="text/javascript" charset="utf-8"> FB._https = (window.location.protocol == "https:"); window.fbAsyncInit = function() { FB.init({ appId : 'xxxxxxxxxxxxxxx', // App ID //channelUrl : '<?php echo bloginfo('url');?>/channel.html', // Channel File status : true, // check login status cookie : true, // enable cookies to allow the server to access the session oauth : true, // enable OAuth 2.0 xfbml : true // parse XFBML }); FB.Canvas.setAutoGrow(); } // Load the SDK Asynchronously (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, ref); }(document)); //FB.Canvas.setAutoGrow(); /*FB.Event.subscribe('edge.create', function(response){ top.location.href = ''; }*/ 

I do not understand.

Phil