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

Asked 18/6, 2013 at 8:38 Answered 23/10, 2013 at 15:13

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!

Retrieval answered 18/6, 2013 at 8:38 Comment(4)

have you tried to add the protocol to the script src? – Northeastward 10/8, 2013 at 10:3

if you are using // instead of http or https it suppose to trigger request with the protocol match the browser protocol, make sure all your code urls are starting with just // e.g src="//yoursite.com" – Kun 22/8, 2013 at 5:33

Have you tried iframe version of like button ? – Columbite 29/8, 2013 at 22:0

Are you seeing any other problems or just a message in console? – Morentz 17/10, 2013 at 18:21

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.

Awning answered 23/10, 2013 at 15:13 Comment(2)

You must be the holy savior. This problem still exists, but thanks to you it has gone away ! – Outfitter 16/7, 2015 at 7:1

Ha - happy to help, sad to hear this is still an issue nearly 2 years later. Glad I don't do much FB dev any more! – Awning 19/7, 2015 at 22:50

Reviewing the js code on Facebook there are multiple urls containing hard coded strings for

http://static .../rsrc.php

it's possible those are the files triggering the error.

This may be something Facebook needs to update.

On a side note, it may be possible to download that js file from Facebook and store it on your server and remove the hard coded http string. I would test this further but I am on my phone at the moment.

Takeo answered 17/10, 2013 at 19:17 Comment(0)

Recommended topics

Hot tags