Facebook like button https issue: protocol mismatch from http and https

I'm running an error very similar with this one: Facebook Login API HTTPS Issue.

I have a website use facebook authentication, the Facebook login is no problem. But the Facebook like-button get troubled when been clicked (test fail on Chrome, Safari, Firefox, in OSX), the error message is:

Blocked a frame with origin "https://www.facebook.com" from accessing a 
frame with origin "http://static.ak.facebook.com".  The frame requesting 
access has a protocol of "https", the frame being accessed has a protocol
of "http". Protocols must match.

I've searched all over and find no solutions.

It seems like that when the like-button is clicked, it pop out a frame from https://facebook.com callback and trying to request http://static.ak.facebook.com thus cause protocol mismatch?!

Here's what I put right after <body> tag

<div id="fb-root"></div>
<script>
  window.fbAsyncInit = function() {
    // init the FB JS SDK
    FB.init({
      appId      : 'appid',                        // App ID from the app dashboard
      channelUrl : '//mydomain/channel.html',        // Channel file for x-domain comms
      status     : true,                                 // Check Facebook Login status
      xfbml      : true                                  // Look for social plugins on the page
    });

    // Additional initialization code such as adding Event Listeners goes here
  };

  // Load the SDK asynchronously
  (function(d, s, id){
     var js, fjs = d.getElementsByTagName(s)[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement(s); js.id = id;
     js.src = "//connect.facebook.net/zh_TW/all.js";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));
</script>

and the channel file at http://mydomain/channel

<script src="//connect.facebook.net/zh_TW/all.js"></script>

and here's how I use the like-button

<div class="fb-like" data-href=url data-send="true" data-width="450"
data-show-faces="true"></div>

Really needs help, please!

Solution

In your first script tag you can tell Facebook explicitly to use HTTPS...

Add the line:

FB._https = (window.location.protocol == "https:");

Add it before the FB.init function call, just below or in place of the comment:

// init the FB JS SDK

This will ensure that Facebook's servers load any required libraries their end over https.

Hope this helps.