Facebook like button error - blocked frame

11
votes

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'));
2
jqueryfacebook
don't use https if yourself use http – happy
How do I not user https when connecting to Facebook? I'll edit the above to show all my Facebook related code. – Ian
Configure your local server to run as localhost... etc. – ronnyfm
It does that for me too... I think it's a pretty widespread problem. @ronnyfm do you care to elaborate? I have my siteurl set to http://localhost/appname right now, I still get those errors. What would you change? – LazerSharks

2 Answers

3
votes

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
0
votes

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)?