Facebook Refused to display '<URL>' in a frame because it set 'X-Frame-Options' to 'deny'.

[PeterHueer]

No Facebook embed will be load.

Error message: Refused to display '' in a frame because it set 'X-Frame-Options' to 'deny'.

Reproducable on your Storybook Facebook section: https://justinmahar.github.io/react-social-media-embed/?path=/story/embeds-facebookembed--main-example

[PeterHueer]

Seems to be fixed... I dont know if this appears if multiple requests going against a specific URL...

[PeterHueer]

Ok it's reproducable in Safari.

[justinmahar]

Hmm interesting. Kinda stumped on this one as this library is entirely client-side. From what I've gathered, Safari defaults to DENY, and Facebook would need to explicitly send an X-Frame-Options header value for it to work in Safari. Only solution I can come up with is to use a proxy and set the header yourself.

[PeterHueer]

Another option could be to use the embed (iframe) from facebook and exchange the url's. Or is there a reason why you preferred the sdk?

[PeterHueer]

i got it to work @justinmahar by loading the script not in the iframe but in my application. After the script is loaded and im sure the div is rendered I execute the fb init function. if i find time i can try to get this running in the package. What do you think?

  const [scriptLoaded, setScriptLoaded] = React.useState(false);
  const [fbRef, setFbRef] = React.useState<HTMLDivElement | null>();

 React.useEffect(() => {
    if (!fbRef) return;
    if (!isInitialized) return;
    setIsLoading(true);
    window.FB.init({
      xfbml: true,
      version: "v15.0",
    });
    FB.Event.subscribe("xfbml.render", () => setIsLoading(false));
  }, [fbRef, url, scriptLoaded, isInitialized]);

  return (
    <>
      <Script
        id="fb_init"
        src="https://connect.facebook.net/en_US/sdk.js"
        onLoad={() => setScriptLoaded(true)}
      />
      {isLoading && (
          <PortraitFormatSkeleton
            aria-label="Facebook skeleton"
            width={`${SOCIAL_MEDIA_WIDTH}px`}
            height={`${SOCIAL_MEDIA_HEIGHT}px`}
          />
        )}
      <div
        ref={setFbRef}
        aria-label={`Facebook post ${deeplink}`}
        className="fb-post"
        data-href={deeplink}
        data-width={SOCIAL_MEDIA_WIDTH}
      />
    </>
  );

[wesleybl]

This error occurs when we are not logged into Facebook. Updating the sdk version, the problem is fixed. I created the PR:

35

[justinmahar]

Thanks to @wesleybl for the fix. Just shipped the update to npm.

To install:

npm i react-social-media-embed@latest