Facebook JS SDK - The loading of “https://www.facebook.com/plugins/like/connect” in a frame is denied by “X-Frame-Options“ directive set to “deny“

Question

I apologize for my "bad" English (thanks chat gpt), but I'll do my best to explain my issue.

I'm referring to the documentation provided by Facebook at https://developers.facebook.com/docs/plugins/like-button/.

In my application code:

window.fbAsyncInit = function() {
    FB.init({
        appId: 'my id here',
        xfbml: true,
        version: 'v19.0'
    });
};

(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 = "https://connect.facebook.net/pt_BR/sdk.js";
    js.crossOrigin = "anonymous"
    fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

Plus, I've included the div with id="fb-root" and the div for the button.

The error I'm encountering is:

"The loading of “https://www.facebook.com/plugins/like/connect” in a frame is denied by “X-Frame-Options“ directive set to “deny“."

Am I making a mistake somewhere?

Answer 1

The error is caused by FaceBook setting a http header at their end to stop this loading into an iframe. I’m afraid only they can change this to allow it to run in your iframe.