Cannot embed an instagram / FB post in Rich text

[romain (Romain Lambert)]

Hello

There seems to be an error while trying to embed Instagram or Facebook posts inside a Rich text field. When I set the url of the post in the embed input and press "insert" it keeps loading indefinitely.

There also is the following error in the console :

main.js:451 Uncaught RangeError: No value supplied for attribute type

And while checking the network tab, I realised whenever it tried to get the embed post, I get a 200 response but with the following json object :

{"title":null,"embed":{"provider_name":"Instagram","provider_url":"https://instagram.com","error":{"message":"API access disrupted. Go to the App Dashboard and complete Data Use Checkup.","type":"OAuthException","code":200,"fbtrace_id":"ACE9-ppqYa-_nyIWRIVqfRz"}}}

(might be related to this Contrôle de l’utilisation des données - Développement d’applications Meta - Documentation - Meta for Developers)

Thank you in advance for your help

[devon.noeldetilly]

Just want to add that I'm experiencing this issue as well.

[Phil (Phil Snow)]

Hi Team,

Thanks for pointing this out. I'm looking into this with the devs and I'll get back to you as soon as possible.

Thanks.

[Phil (Phil Snow)]

I wasn't able to recreate this bug on my side @romain @devon.noeldetilly ,

Please provide me with:

1. Your repository URL.
2. The UID of the document where you are seeing this issue.
3. The link you're trying to embed.

With this I'll be able to recreate this easier and get help from the devs faster.

Thanks.

[romain (Romain Lambert)]

Hello Phil,

This might have already been resolved
I just tried it again and I cannot reproduce it anymore on my side neither.

I don't know if @devon.noeldetilly still has this bug.

Thanks for your time

[Phil (Phil Snow)]

OK, great. Thanks for letting us know

[devon.noeldetilly]

Seems to be working on my side as well now, those JS errors are gone. Thanks @Phil

[balazs (Balázs Radványi)]

Hello everyone,

I'm just experiencing the same issue with the same error message in console as in the first post of this thread. Do you have any tips that might help me?

[Pau]

Hey @balazs, can you share the URL of your embed so we can test it on our end?

[cparent (Clément Parent)]

Hello everyone,

I'm having a similar issue.
When submitting the link, I got a console error 'No Value supplied for the attribute type'.
Also when I paste the url in the embed field, there's a code 200 response with the following body :

{
    "title": null,
    "embed": {
        "provider_name": "Instagram",
        "provider_url": "https://instagram.com",
        "error": {
            "message": "(#10) To use 'Oembed Read', your use of this endpoint must be reviewed and approved by Facebook. To submit this 'Oembed Read' feature for review please read our documentation on reviewable features: https://developers.facebook.com/docs/apps/review.",
            "type": "OAuthException",
            "code": 10,
            "fbtrace_id": "AJjpE31LCuClD20SEEdrHEa"
        }
    }
}

Has anyone ran a similar issue ? Am I doing something wrong ?

Thank you,

Regards,

[Phil (Phil Snow)]

Hi Clément,

You're not doing anything wrong here. The package handling these embeds might need to be updated.

Can you tell me if you're seeing this in the embed in the rich text field or on a dedicated rich text field?

The workaround right now would be have custom embed field:

Add Custom Embed or HTML code

To add a custom embed code or raw HTML, you will first need to set up a unique field or Slice specifically for this. Then you will need to add code to your website application to handle this new field. 1. Create a new field for the HTML You have two options, using a Key Text field or a Rich Text field. with a Rich text field We recommend you using a customized Rich Text field specifically for your custom code. You will need to configure the field to "Allow multiple paragraphs" and set the fiel…

[cparent (Clément Parent)]

Hi Phil,

Thank you for your reply.

I'm seeing this in a rich text field, after typing /emb ` .
About the workaround, I believe that having a dedicated embed field forces me to switch from a simple rich text field to a slices zone. That might not fit with my current front-end.

[Phil (Phil Snow)]

In that case targetting the embeds with the rich text serializer can work as another workaround:

@prismicio/richtext Technical Reference

[cparent (Clément Parent)]

Thank you, I finally managed to fix this issue using the rich text serializer.

Have you any update regarding the package handling the oembed html generation ?

Regards,

[Phil (Phil Snow)]

We plan to overhaul how embeds work in the future, so there will probably be no changes here until then.

When we have an update about that, we'll post it here.