I have implemented Facebook Comments on my application using the code supplied by Facebook here: https://developers.facebook.com/docs/plugins/comments/
The comments load correctly and life is good. However, I have a settings panel for administrative users which expose the ability to modify:
When a user changes these, I use
FB.XFBML.parse(this.fbEl);
to refresh the comments. This works however it does not render correctly and gives the error:
Uncaught SecurityError: Blocked a frame with origin "https://www.facebook.com" from accessing a frame with origin "http://mysite.dev". The frame requesting access has a protocol of "https", the frame being accessed has a protocol of "http". Protocols must match.
I have searched the internets to no avail. Does anyone know how to resolve this issue?
The SDK code is as follows:
<div id="fb-root"></div>
<script>
(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/sdk.js#xfbml=1&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div class="fb-comments" id="fb-comments" data-href="{{data.url}}" data-width="100%" data-numposts="{{data.numPosts}}" data-order-by="{{data.orderBy}}" data-colorscheme="{{data.colorScheme}}"></div>
Sadly, there is no right way to fix this. Facebook must fix this within their JS framework. The good news is that I've figured out a quick fix, which will display your comments window even when that error occurs. I've tested the code and Facebook allows me to post comments even after the error happens.
this fix uses jQuery, and also uses setTimeout to wait (and guess) for the error to be called before removing a class. I'm sure there are better ways to implement this fix, but so far this works for me. For example, you could change the timeout from 1 second to 2 seconds for a better chance of the script executing after the error occurs.
setTimeout(function(){$('.fb-comments').removeClass('fb_hide_iframes');},1000);