Facebook like button error - blocked frame

Question

I'm using jQuery to create dynamic Facebook "Like" buttons. However I'm getting an error that's just repeating itself over and over again.

My jQuery to create the button is:

$('#fbLike').html('<fb:like href="'+url+'" send="false" layout="button_count" width="80" show_faces="true" />');
FB.XFBML.parse(document.getElementById('fbLike'));

However, I'm getting the following error:

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

Any ideas?

• Edit

  (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/en_US/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));

Answer 1

This happens because protocols does not match.

You are trying to create a https frame in http page.

Because of mixed content is disabled on your browser you are seeing that error.

You can enable mixed content on google chrome via command line arg.

chrome.exe --allow-running-insecure-content

Answer 2

Hi Ian have you tried hitting https://localhost/appname and running the call again? If you are running something like XAMPP, LAMP, MAMP your default site should be bound to port 443 (https) hopefully allowing your request protocols to match. If you are still having the same issue you might want to look into trying this from a actual web server (WWW facing) and seeing if the problem persist. Also is there no setting on Facebooks side that you need to enable to allow the use of localhost to their API (swing in the dark here)?