Refused to display 'https://x.com/' in a frame because it set 'X-Frame-Options' to 'deny'.

[bartrylant]

Since recently (well actually since updating from Craft 4 to Craft 5 and thus also updating the oembed plugin) posts on X don't show anymore in the control panel. I get a grey rectangle with broken icon instead of a preview. Google Chrome console says this:

Refused to display 'https://x.com/' in a frame because it set 'X-Frame-Options' to 'deny'.

[bartrylant]

Same issue with posts from Instagram and Facebook by the way

[reganlawton]

I've started creating a branch locally for a unit testing, which will eventually go out live when they're ready. I'm not having issues with Facebook. Would you be able to provide some more information around what URL and parameters that you're using?

[bartrylant]

This url
https://www.instagram.com/reel/DDP7yUypbZs/

Generates this code on the front-end:

<iframe src="https://www.instagram.com/reel/DDP7yUypbZs/?"></iframe>

Or in the control panel:

[reganlawton]

Hmm the reason that's happening is cos that's not converting to an embed URL. I'll play around with it in the morning, currently ~12am.

My thinking is this will be FB/ Instagram requiring API access mostly likely. Now it could be network issues and core package issues but now I have a URL I'll be about to troubleshoot.

[reganlawton]

@bartrylant FYI your probably not using the api tokens I just realised as thats the same issue I'm having with unit tests.

{{
    craft.oembed.render(
        url,
        [
            'facebook:token' => 'token',
            'instagram:token' => 'token',
        ]
    )
}}

You can see this in the code from the code package

 use Embed\Embed;

$embed = new Embed();
$embed->setSettings([
    'oembed:query_parameters' => [],  //Extra parameters send to oembed
    'twitch:parent' => 'example.com', //Required to embed twitch videos as iframe
    'facebook:token' => '1234|5678',  //Required to embed content from Facebook
    'instagram:token' => '1234|5678', //Required to embed content from Instagram
    'twitter:token' => 'asdf',        //Improve the data from twitter
]);
$info = $embed->get($url);

See: Core package

From memory I used too / still ahve a setting for it. I've been trying to get through Meta API app process to get unit tests set up for this project but its a mission.

I have a 2 week xmas break coming up so I'll have more unit testing I can do, you can see I've started working on this below and Instagram is broken thats due too no token tho.

[bartrylant]

Will it be fixed in the front-end if I put in

url,
        [
            'facebook:token' => 'token',
            'instagram:token' => 'token',
        ]

?

[reganlawton]

So basically you need to use the api to access the embed media api in meta and twitter.

If you use those in TWIG it should pass through our you can try "Facebook.key",dot notation for an array as I'm away from house atm but wanted to provide something as fast as I could.

As meta api review process is a nightmare IMHO

[bartrylant]

It probably has to do with this:
https://developers.facebook.com/blog/post/2024/09/04/update-on-instagram-basic-display-api/

[bartrylant]

If I do

{{
                  craft.oembed.render(
                      block.bron,
                      [
                          'instagram:token' => 'xxxxxxx',
                      ]
                  )
              }}

it says
A sequence element must be followed by a comma. Unexpected token "arrow function" of value "=>" ("punctuation" expected with value ",").

[reganlawton]

Sorry error from my side.

{{ craft.oembed.render(
    block.bron,
    {
        'instagram:token': 'xxxxxxx'
    }
) }}