Embed component not working for Instagram Images/videos

[Abhishek_Saxena]

I have a requirement to embed Instagram images/videos to our website. I was using embed component for that, it should be working by default for youtube, facebook, instagram etc.

It is working fire with youtube/facebook and recognising the url but while adding any instagram url it not recognising at all(throwing error msg- this embed url is not supported).

I did some investigation and found it works via oEmbed API and all endpoints/schemas/API url can be checked from here https://oembed.com/providers.json

here it is given as 

https://graph.facebook.com/v10.0/instagram_oembed

while in our confMgr it is diff.

I tried replacing it with this url, Insta url is then recognised but still image is not appearing on page.

Any suggestions? 

[nitesh_kumar]

Hi @Abhishek_Saxena ,

Some oEmbed endpoints require an access token for embedding. There is an open issue and workaround for a similar issue, Could you please check?

https://github.com/adobe/aem-core-wcm-components/issues/1225 

Hope this helps!

Regards,

Nitesh

[Abhishek_Saxena]

I followed below steps:

1) created the developer account.

2) created an app and through settings>Basic/Advanced i am able to get "App Secret" and "Client Token" and now setup the API endpoint as below. Now after putting the Instagram url I am getting message as "Instagram url can be processed" but still no image is coming on page.

https://graph.facebook.com/v11.0/instagram_oembed?access_token=[App Secret]%7C[Client Token]

3) In App-review> permission and feature in developer account I can see there are already "standard access", do I still need to submit app for revieww.

Thanks,

Abhishek

[DavidMi9]

Here are some suggestions to troubleshoot the issue of Instagram images/videos not embedding on your website:

Verify API Endpoint and Access Token:

Double-check that the oEmbed API endpoint you're using is correct: https://graph.facebook.com/v10.0/instagram_oembed.

Ensure you have a valid Instagram Basic Display API access token. Obtain it from the Meta for Developers dashboard and include it in your API calls.

Validate URL Format:

Confirm that the Instagram URLs you're providing are in the correct format: https://www.instagram.com/p/{post_id}/.

Inspect Network Requests:

Use browser developer tools to examine network requests and responses when attempting to embed Instagram content.

Look for errors or missing data in the API responses.

Address CORS Issues:

If you're making cross-origin requests to the oEmbed API, configure your server to allow CORS (Cross-Origin Resource Sharing) for the Instagram oEmbed endpoint.

Check Component Configuration:

Review the configuration of your embed component, ensuring it's correctly set up to handle Instagram oEmbed responses.

Verify that it supports the specific media types (images and videos) you're trying to embed.

Test with Different Instagram URLs:

Try embedding various Instagram URLs, including public posts, to isolate whether the issue is specific to certain content or a broader problem.

Consider Alternative Solutions:

If the embed component issue persists, explore alternative methods:

Manual Embedding: Use the Instagram oEmbed API directly to fetch embed codes and manually insert them into your website's HTML.

Third-Party Plugins: Utilize plugins or libraries designed for embedding Instagram content, potentially offering more robust features and support.

Additional Tips:

Cache API Responses: Store oEmbed responses locally to reduce API calls and potentially improve performance.

Handle API Changes: Be prepared for potential changes in oEmbed API endpoints or response formats by updating your code accordingly. https://reelssaver.net/