Jump to content

Instagram reel link does not embed as per docs/ACP

WebCMS

By WebCMS
in General Questions

 Share

Recommended Posts

WebCMS Proficient

WebCMS

Posted
  • Author
Posted (edited)

Prolly, you made a typo and I could not understand what you said.

"if facebooks embed service is set up, it will not embed reels unfortunately."

Please clarify...

I see that Facebook links have the same issue -

https://www.facebook.com/colm.cahill.77/videos/1017591468687131

Instagram links are shared more than Facebook links and is very important. It would be great if you can get these embedding woking so they can be played right in the post/comment.

YouTube and Twitter embed fine.

Edited by WebCMS
Marc Grand Master

Marc

Posted
Posted

Have you set up the embed service on your facebook application first of all? Please do bear in mind that business verification is required for that (as per facebook rather than ourselves).

WebCMS Proficient

WebCMS

Posted
  • Author
Posted

I'm not sure but asked ChatGPT for JavaScript embed code IG reels like this - will I be able to use this code in any way?

Does Facebook embed videos have the same issue?

It would be great if these work as many users ask for embedded content to play on-page for better UX.

To embed an Instagram reel using JavaScript, you can dynamically generate the necessary HTML code and insert it into your webpage's DOM (Document Object Model). Here's a step-by-step guide on how to do this:

  1. Create an HTML Container: Start by adding an empty HTML container element (e.g., a <div>) to your webpage where you want the Instagram reel to appear. Give this container an id attribute so you can target it with JavaScript.

    <div id="instagramReelContainer"></div>

  2. Write JavaScript Code: Now, you'll need to write JavaScript code to fetch the Instagram embed code and insert it into the container. You can use the Instagram API or the oEmbed API for this purpose. In this example, we'll use the oEmbed API, which doesn't require authentication.

    <script>
    // Replace 'YOUR_INSTAGRAM_REEL_URL' with the URL of the Instagram reel you want to embed.
    const instagramReelURL = 'https://www.instagram.com/p/your_instagram_reel_url/';
    // Make a request to the Instagram oEmbed API. fetch(`https://api.instagram.com/oembed/?url=${encodeURIComponent(instagramReelURL)}`) .then((response) => response.json())
    .then((data) => {
    // Extract the HTML code from the response.
    const instagramEmbedCode = data.html;
    // Get the container element by its ID. const container = document.getElementById('instagramReelContainer');
    // Insert the Instagram embed code into the container.
    container.innerHTML = instagramEmbedCode;
    })
    .catch((error) => {
       console.error('Error fetching Instagram data:', error);
    });
    </script>

  3. Replace 'YOUR_INSTAGRAM_REEL_URL': In the JavaScript code above, replace 'YOUR_INSTAGRAM_REEL_URL' with the actual URL of the Instagram reel you want to embed.

  4. Include the JavaScript: Make sure to include this JavaScript code in the <script> tags within the <head> or before the closing </body> tag of your HTML document.

  5. Test Your Page: Load your HTML page in a web browser, and the Instagram reel should be embedded within the designated container.

Marc Grand Master

Marc

Posted
Posted

Videos I believe will. Its just reels that dont at present. Whether or not you can integrate something like the above would depend on your own development knowledge. We can only advise on what the current suite is capable of.

The reality is, that integrating with Facebook is getting harder and harder, unfortunately. In order to integrate successfully, you will need to ensure you get business verification, as previously mentioned

 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
Invision Community © 2024 IPS, Inc.
×
×
  • Create New...