Instagram API does not display the image

Developing with Prismic
1

Hi there,

We have an issue with Instagram API and the link to display the picture on our website.
We have an Instagram module on Prismic where we can contribute the post's link on Instagram we want to display on the website.

At first, it's working well with the image displayed, but after some time, the image doesn't display anymore in the module and in Prismic we don't have the thumbnail.

When we inspect the API's result, I have in "instagram_links_group" > "instagram_link" > "thumbnail URL" the following url: https://scontent.cdninstagram.com/v/t51.2885-15/sh0.08/e35/s640x640/106801610_289284412186235_3559400079460734215_n.jpg?_nc_ht=scontent.cdninstagram.com&_nc_cat=111&_nc_ohc=XWIFQRU6Vi8AX-pm0OQ&tp=1&oh=985ace0c35124d6c897ab873e9185071&oe=6002A985 that redirects me to: URL signature expired

Could you double check and tell me what's the possible reason for it?

Thanks

5

Hi Team,

Sorry about the delayed response on this.

I'm not really sure what the issue is here as it's something I've never seen before. When you say you have an instagram module on Prismic, do you mean you have a Slice with and embed field? or are you importing you images through the API with Integration fields?

If you can tell me this and the name of your repo I might be able to help.

Thanks.

6

Hi Phil,

Thanks for your help.
The name of the repo is: "Cheval Blanc"

For the Instagram integration, we have a Slice with an embed field yes

Thanks,
Martin

7

Hey Martin,

I'm happy to help. Can you also provide me with the name of the Slice and an example image URL that you are adding you I can test?

Thanks.

9

For instance, here is the section where we want to put the Instagram URL: https://chevalblanc.prismic.io/documents~k=maisons&b=working&c=published&l=fr-fr/XErggBEAADGWYoTm/?section=Instagram%20Module

in "Instagram Links" (the name of the Slice) you can see that the URL give no preview (https://www.instagram.com/p/CEMAYcUgobK/) :

Image_17_02_2021_11_22_collée
Image_17_02_2021_11_22_collée933×136 11.4 KB

When I populate this field with a link, the preview is working, and then after some days (don't know how much), the preview disappear and the image isn't displayed in front.

10

OK, Thanks. This extra information really helps, although I'm not sure what exactly the issue is. So I'm going to have to pass this to our Dev Team here to get some help. Once I have a response I'll let you know.

11

Ok thanks,

Do you know when it will be possible for you to give me an answer?

12

Hi Martin,

thunbnails are generated on instagrams side and it looks like they clear out the cdn so the thumbnail_url becomes invalid.

If you want an all ways up to-date thumbnail to appear on your site i would recommend using the "embed_url" property to form query to instagrams oembed api.

const url = encodeURIComponent(data.embed_url)
const maxwidth = "500"
const token = "facebook-app-token"
fetch(`https://graph.facebook.com/v9.0/instagram_oembed?url=${url}&maxwidth=${maxwidth}&access_token=${token}&fields=thumbnail_url`)

Or is this an issue with the way things look in the editor?

Best,

Marc

13

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.