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'
    }
) }}

[anita-chouhan]

The token for Twitter is meant to improve data; it's not required, right? Can the embeds function without it?

[reganlawton]

@anita-chouhan I've been working on unit tests for each major site Facebook, Instagram, Twitter / X, YouTube, etc, very slowly due to the current workload at my scale-up. More to come in the future, it's a process and after a long day trying to generate API keys is legitimately exhausting mentally.

See:

I have noticed that Twitter does work but output eccentrically and has changed multiple times over the time I started this local branch.

This said, it does work when I run my code, but with Elon's and X's agenda changing hourly, please take this as sarcasm; we are a bit at the mercy of their choices (X.com) and the core package embed\embed. That said, if you want the best results, an API token will be the best long-term solution.

If you need anymore additional information or help, feel free to reach out I believe my Discord is linked to my profile and I'm sorry that this slipped through the cracks.