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

Question

I'm converting my facebook app to run through HTTPS.

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

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's favorite number.
    // http://developers.facebook.com/docs/reference/javascript/FB.Canvas.setAutoResize/
    FB.Canvas.setAutoResize(91);

};

Any ideas?

score 4 · Answer 1 · edited May 23 '17 at 12:19

4

If you set FB._https = true; and you access the page over http then you have trouble.

I suggest using FB._https = (window.location.protocol == "https:"); per Facebook JavaScript SDK over HTTPS loading non-secure items

edited May 23 '17 at 12:19

Community

1
1

answered Oct 21 '11 at 08:29

Alexandros B

1,881
1
23
36

score 2 · Answer 2 · answered Mar 28 '12 at 19:09

Remove the line specifying FB._https. you should not be setting this value. The JS SDK does this on its own when it is loaded. Setting it yourself is a hack -- the underscore in the name is supposed to suggest that the value is not for external modification.
You should use a cross-domain communication channel URL. Information about this is documented on the JavaScript SDK page. When you use the channel URL, make sure not to specify a protocol like "http:" or "https:". The channel URL should begin with "//", or else it should be manually constructed based on document.location.protocol.
Make sure you have properly set a "Site URL" and "Site Domain" in the application's settings. This is crucial for various JS SDK functions.

score 0 · Answer 3 · answered Mar 20 '12 at 17:29

I'm having the same issue. It seems like it depends on where I put the connect script. Here's the code for getting SSL to work. You have to remove the connect script and go with the channelUrl.

<!-- 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's the code to get the ifame to re-size, but breaks ssl. Add connect script back to the top and remove channelUrl. Actually you don't have to remove the 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 don't get it.

Phil

The channelUrl protocol needs to match the protocol used for the JS SDK and for the document. All three of these things should match. The best thing to do is to use URLs that start with "//" and omit the protocol. If you look at the line with js.src =, you will see what I mean. Also, you should not be setting the value of FB._https. The JS SDK does this on its own when it is loaded. Setting it yourself is a hack (the underscore in the name is supposed to suggest that the value is not for external modification). — AndrewF, Mar 28 '12 at 19:04

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

3 Answers3

Linked